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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • phpstorm 2022.01.13 激活【2021最新】

    (phpstorm 2022.01.13 激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0HKLM1UCCY-eyJsaWNlbnNlSWQiOi…

    2022年3月31日
  • 离散数学在计算机科学中的应用论文(集合论在计算机的应用)

    自从我们学院进行软件工程认证后,期末考试的专业课全部是大题。这次离散数学的最后一题是:利用本学期学到的离散数学的知识阐释其在一个软件工程中的应用。下面说说离散数学的应用。离散数学在数据结构中的应用数据结构中将操作对象间的关系分为四类:集合、线性结构、树形结构、图状结构或网状结构。数据结构研究的主要内容是数据的逻辑结构,物理存储结构以及基本运算操作。其中逻辑结构和基本运算操作来源于离散

    2022年4月17日
  • 傅里叶变换一步步详细推导「建议收藏」

    傅里叶变换一步步详细推导「建议收藏」前言在大学的时候接触过几次傅里叶变换的知识,但是从来没真正懂过.也在网上找过很多资料,看过很多视频,但是,这些内容要么举些简单的例子说说直观上的理解,要么就是直接堆出公式没有任何推导.直到一个巧合在B站上看到这样一个视频才真正搞懂,非常感谢这位UP主DR_CAN.这篇博客也主要是对视频中的推导模仿一遍.同时记录下笔记方便复习.另外,记录当时一条印象很深的弹幕:根本就没有人会学不懂数学,只是…

    2022年7月17日
  • 用数据说话,外贸B2C产品选择(上篇)-热门搜索法

    用数据说话,外贸B2C产品选择(上篇)-热门搜索法

    2022年1月30日
  • 怎么重新启动协议服务器,ssl协议怎么开启

    怎么重新启动协议服务器,ssl协议怎么开启1.首先打开浏览器,找到工具→Internet选项2.找到高级选项卡,下面的使用SSL3.0勾选之后,点击保存即可。3.重新打开网站检查。对于chrome浏览器,SSL和TLS都协议是默认开启的,可以按下F12,然后在开发者工具中查看当前使用的协议版本。若是服务器配置ssl协议证书,首先确认Apache服务器已经安装有加密模块,可以是OpenSSL,或是OpenSSL+ModSSL。通过O…

    2022年5月18日
  • linux mail发送邮件_linux命令行收发email

    linux mail发送邮件_linux命令行收发email一、mail命令1.配置 vim /etc/mail.rc文件尾增加以下内容 setfrom=1968089885@qq.com smtp=”smtp.qq.com”setsmtp-auth-user=”1968089885@qq.com”smtp-auth-password=”123456″setsmtp-auth=login说

    2022年10月20日

发表回复

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

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