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

全栈程序员-站长 • 2022年3月9日下午1:00 • 未分类 • 阅读 62

在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)

全栈程序员-站长

0 0

142. 环形链表 II(链表)[通俗易懂]

142. 环形链表 II(链表)[通俗易懂]给定一个链表，返回链表开始入环的第一个节点。如果链表无环，则返回 null。为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。如果 pos 是 -1，则在该链表中没有环。注意，pos 仅仅是用于标识环的情况，并不会作为参数传递到函数中。说明：不允许修改给定的链表。进阶：你是否可以使用 O(1) 空间解决此题？示例 1：输入：head = [3,2,0,-4], pos = 1输出：返回索引为 1 的链表节点解释：链表中有一个环，其尾部

全栈程序员-站长
2022年8月9日
7
dsp调试技巧_keil仿真调试

dsp调试技巧_keil仿真调试DSP仿真调试步骤1.仿真调试步骤通过USB电缆连接仿真器至主机，操作方法如下：确保设备全部处于断电状态。安装仿真器JTAG电缆，并将JTAG接头连接至目标板。用USB电缆连接仿真器至主机。仿真器上电。目标板上电。2.注意事项目标板或者仿真器带电的情况下，不可插拔仿真器JTAG接口。USB电缆尽量不要使用台式机计算机的前置USB接口连接。正确的上电顺序为：a）设备全部断电b）仿真器JTAG街头连接目标板c）连接USB电缆或者网线d）仿真器上

全栈程序员-站长
2025年9月25日
6
JavaWeb——Servlet（全网最详细教程包括Servlet源码分析）「建议收藏」

JavaWeb——Servlet（全网最详细教程包括Servlet源码分析）「建议收藏」JavaWeb——ServletTomcat工作机制动画演示(点击动图可全屏观看）什么是ServletServlet（ServerApplet），全称JavaServlet，未有中文译文。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web…

全栈程序员-站长
2022年4月27日
43
vue+mongodb_mongodb查询速度

vue+mongodb_mongodb查询速度1、查询时间范围在{find}里面输入：{time:{$gte:newDate(“2016/07/2008:00:00”),$lte:newDate(“2016/07/2008:01:01”)}}2、查询某字段包含字符串{name:newRegExp(“^(?!.*?electric).*$”)}3、查询不包含某字符串{

全栈程序员-站长
2022年8月21日
10
Elasticsearch教程-从入门到精通（转载）

Elasticsearch教程-从入门到精通（转载）

全栈程序员-站长
2021年11月24日
40
天赋是积累出来的——转载自周鸿祎博客

天赋是积累出来的——转载自周鸿祎博客天赋是积累出来的（2013年9月）原文地址：http://blog.sina.com.cn/s/blog_49f9228d0101dxiy.html　　只要你在一些方面做得好，可能就会有人说你在这方面有天赋。当你听到这样的话时，千万不要当真，因为这很可能是他们在逃避，不愿意正视自己不努力的现实。做好产品，其实跟做好其他事情是一个道理，如果说有天赋，那只是在漫长的过程中不断经历痛苦，不断…

全栈程序员-站长
2022年7月26日
7

发表回复

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