UI布局是Android项目非常重要的一部分内容,我们知道Android一共包括五中布局方式:1.LinearLayout(线性布局);2.RelativeLayout(相对布局);3.TableLayout(表格布局);4.AbsoluteLayout(绝对布局);5.FrameLayout(帧布局)。但在实际项目当中,我们基本上只用到LinearLayout和RelativeLayout。现在我们一起了解一下LinearLayout中的一个非常重要的属性:layout_weight。
android:layout_weight是指LinearLayout先给里面的控件分配完大小之后剩余空间的权重,这块可能大家不是特别好理解。不用着急,首先我们初学者要明白一个概念,那就是布局文件并不一定都要放在屏幕当中,例如下面一个例子:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</LinearLayout></span>
两个TextView,textView1填满父元素,textView2也是填满父元素,其实是这样分布,textView2是放在屏幕外面的:
其次,很多初学者都以为layout_weight是按比例分配空间的,根本不理解剩余空间的概念,下面我们来看这样一个例子
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="天气"
android:background="#fff123" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="北京天安门"
android:background="#123fff"/>
</LinearLayout></span>
运行结果:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="天气"
android:layout_weight="1"
android:background="#fff123" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="北京天安门"
android:layout_weight="1"
android:background="#123fff"/>
</LinearLayout></span>
运行结果:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="天气"
android:layout_weight="1"
android:background="#fff123" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="北京天安门"
android:layout_weight="1"
android:background="#123fff"/>
</LinearLayout></span>
运行结果:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="天气"
android:layout_weight="1"
android:background="#fff123" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="北京天安门"
android:layout_weight="1"
android:background="#123fff"/>
</LinearLayout></span>
我们给每一个控件的宽度都设为0dp,这样剩余空间的大小=1个fill_parent的大小-textView1的大小(0)-textView2的大小(0)=1个fill_parent的大小,然后textView1的大小=0dp+1/2(1个fill_parent)=1/2fill_parent,也就是屏幕的一半,textView2同样.
2.我们在实际项目中会经常遇到这样一种布局样式
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="天气"
android:layout_weight="1"
android:background="#fff123" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:background="#123fff"/>
</LinearLayout></span>
可以看到,我们给textView1控件设置了layout_weight为1,没有为textView2设置权重,而且两个控件的宽度都是包裹内容,用我们上面的公式分析,textView1把剩余的空间全部占了,所以就把textView2控件挤到了屏幕的右边。
3.最后,我们看一个稍微简复杂点的例子
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="4"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="3"/>
<TextView
android:layout_width="match_parent"
android:layout_weight="4"
android:layout_height="wrap_content"
android:text="4"/>
</LinearLayout>
</LinearLayout></span>
我们可以看到第二列的宽度都是fill_parent,权重是3:4:4:4,那么我们再来一起分析一下这个权重是如何得来的,首先我们计算第二列的剩余空间的大小=1个fill_parent(LinearLayout的宽度)-4个fill_parent(4个控件的宽度都为fill_parent,所以是4个fill-parent)=-3个fill_parent,那么根据我们所需textView1的宽度占屏幕的2/5,我们设textView1的权重为x,也就是1个fill_parent+(x/4)*(-3个fill_parent)=2/5fill_parent,得到x=4/5;同样的方法textView2,设其权重为y,1个fill_parent+(x/4)*(-3个fill_parent)=1/5fill_parent,得到y=16/15 ,剩下的权重都为16/15,所以权重比应该是4/5:16/15:16/15:16/15,也就是3:4:4:4.
如果看完最后一个例子,你心里有个疑惑那就对了,为什么我们要把其宽度设为fill_parent,我们设置为0dp,然后权重按2:1:1:1分配权重不是更简单,确实是这样。我们之所以上面那样做就是为了真正掌握layout_weight!(是不是有人会有种想骂街的冲动啊,忍住!其实只要我们真正了解了其原理,今后我们就可以随心所欲的实现我们的效果啊)
ok,到此位置layout_weight的总结全部结束!