android之layout_weight体验(实现按比例显示)

在android开发中LinearLayout很常用,LinearLayout的内控件的android:layout_weight在某些场景显得非常重要,比如我们需要按比例显示。android并没用提供table这样的控件,虽然有TableLayout,但是它并非是我们想象中的像html里面的table那么好用,我们常用ListView实现table的效果,但是列对齐确比较麻烦,现在用Linear

大家好,又见面了,我是全栈君。在android开发中LinearLayout很常用,LinearLayout的内控件的android:layout_weight在某些场景显得非常重要,比如我们需要按比例显示。android并没用提供table这样的控件,虽然有TableLayout,但是它并非是我们想象中的像html里面的table那么好用,我们常用ListView实现table的效果,但是列对齐确比较麻烦,现在用LinearLayout及属性android:layout_weight能很好地解决。下面我们共同体验下layout_weight这个属性。

  一、LinearLayout内的控件的layout_width设置为”wrap_content”,请看一下xml配置:

 <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1"
     >
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="#aa0000"
          android:gravity="center"
          android:text="1"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="2"
          android:background="#00aa00"
          android:gravity="center"
          android:text="1"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="3"
          android:background="#0000aa"
          android:gravity="center"
          android:text="1"/>
  </LinearLayout>

 效果如下:

android之layout_weight体验(实现按比例显示)

可以看到这三个TextView是按照1:2:3的比例进行显示的,这样看来似乎可以实现按照比例显示了,但是有个问题,如果TextView内的文本长度一同那么较长文本的TextView会宽度会有所增加,见下面配置及效果:

配置:

 <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="#aa0000"
          android:gravity="center"
          android:text="1111111111111111111111111111111111111111111"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="2"
          android:background="#00aa00"
          android:gravity="center"
          android:text="2"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="3"
          android:background="#0000aa"
          android:gravity="center"
          android:text="3"/>
  </LinearLayout>

效果:

android之layout_weight体验(实现按比例显示)

这样看来我们所需要的按比例又无法实现了,经过满天地google终于找到了解决方案,就是设置layout_width设置为”wrap_content”。配置及效果见下:

 <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      <TextView
          android:layout_width="0dp"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="#aa0000"
          android:gravity="center"
          android:text="1111111111111111111111111111111111111111111"/>
      <TextView
          android:layout_width="0dp"
          android:layout_height="fill_parent"
          android:layout_weight="2"
          android:background="#00aa00"
          android:gravity="center"
          android:text="2"/>
      <TextView
          android:layout_width="0dp"
          android:layout_height="fill_parent"
          android:layout_weight="3"
          android:background="#0000aa"
          android:gravity="center"
          android:text="3"/>
  </LinearLayout>

效果:

android之layout_weight体验(实现按比例显示)

这样终于达到我们的按比例显示的效果了,感觉很是奇怪,android开发框架的大佬们有时候设计确实有点匪夷所思。

  二、LinearLayout内的控件的layout_width设置为”fill_parent”,请看一下xml配置:

 <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="#aa0000"
          android:gravity="center"
          android:text="1"/>
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="2"
          android:background="#00aa00"
          android:gravity="center"
          android:text="2"/>
  </LinearLayout>

效果如下:

android之layout_weight体验(实现按比例显示)

奇怪吧,整个宽度平分3块,第一个TextView占了两块,这样看来weight值越小的优先级越大。只有两个TextView似乎看出些道理,那么让我们看看三个是什么效果:

<LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="#aa0000"
          android:gravity="center"
          android:text="1"/>
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="2"
          android:background="#00aa00"
          android:gravity="center"
          android:text="2"/>
      <TextView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="3"
          android:background="#0000aa"
          android:gravity="center"
          android:text="3"/>
  </LinearLayout>

效果:

android之layout_weight体验(实现按比例显示)

什么意思?第三个TextView丢掉了,很是奇怪,让我们再试一个,把weight分别改为2,3,4的看看效果:

android之layout_weight体验(实现按比例显示)

这个效果让人很困惑,我一直想寻求出一个确切的比例公式,但是至今未找到。有哪位大神能搞定的话忘不吝赐教。

虽然这个android:layout_weight属性很怪异,但幸运的是我们达到了目标:

  按比例显示LinearLayout内各个子控件,需设置android:layout_width=”0dp”,如果为竖直方向的设置android:layout_height=”0dp”。在这种情况下某子个控件占用LinearLayout的比例为:本控件weight值 / LinearLayout内所有控件的weight值的和。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/121448.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MAC 系统安装 Maven 及环境变量配置

    MAC 系统安装 Maven 及环境变量配置1、概述本文主要为在MAC苹果系统下安装Maven及环境变量配置Maven是Apache下的一个纯Java开发的开源项目。基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。Maven是一个项目管理工具,可以对Java项目进行构建、依赖管理。Maven也可被用于构建和管理各种项目,例如C#,Ruby,Scala和其他语言编写的项目。Maven曾是Jakarta项目的子项目,现为由Apache软件基金会主持

    2022年7月24日
    9
  • 华为服务器安装nas系统,云服务器搭建nas

    华为服务器安装nas系统,云服务器搭建nas云服务器搭建nas内容精选换一换在云服务器上搭建网站后,部分客户通过本地网络访问网站时出现偶发性无法访问的情况。确认客户使用的本地网络。若客户的本地网络是NAT网络(本地主机通过NAT功能使用公网IP地址访问弹性云服务器),可能会导致该问题。若客户的本地网络是NAT网络(本地主机通过NAT功能使用公网IP地址访问弹性云服务器),可能会导致该问题。执行以下命令,查看搭建网在云服务器上搭建网站后,部…

    2022年6月15日
    57
  • 输入法个性化怎么设置_手机输入键盘怎么个性化设置

    输入法个性化怎么设置_手机输入键盘怎么个性化设置个性化设置技巧(补充输入法)子墨居士前言本次的内容大部分为推送。本打算自己推荐几款比较好用的桌面整理软件,然而最近事情越来越多,这部分的内容分享已经有很多不错的文章。就允许我偷一次懒呗(…

    2025年6月29日
    2
  • 使用C#创建WebService实例

    使用C#创建WebService实例新增WebService专案更改服务程式名称重命名程式名称Service1.asmx修改为TestService.asmx此时下面的cs代表文件也会跟着修改,但可发现,代码中的类名并没有跟着变动修改类名称手动将类名称由Service1修改为TestService如果此时执行发布会发现还是会vb.net教程有问题,报错無法建立型別‘.Service1’修改服务绑定代码在TestService.asmx上右键选择打开方式,选择“Web服务编辑器”打开此时会看到服务所有设定,

    2022年7月21日
    12
  • centos7安装yum[通俗易懂]

    centos7安装yum[通俗易懂]centos7系统yum卸载后重新安装1.rpm包准备yum卸载后软件安装很麻烦,重新安装yum,先把相关rpm包下载下来,传到服务器。下载地址:http://mirrors.163.com/centos/7/os/x86_64/Packages/(我的是centos764位,所以是这个路径,看网址就可以知道每个路径是干嘛的,下载自己版本所需的即可,各个包小版本有变化,注意进行选择)…

    2022年6月4日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号