android学习笔记1_LinearLayout and weight

LinearLayout简单例子：

新建一个工程，名称：HelloLinearLayout.

1、打开res/layout/main.xml文件，修改文件如下：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="1">
  <TextView 
   android:text="red--"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:background="#aa0000"
      android:layout_weight="4"
      />
  <TextView 
   android:text="green"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:background="#00aa00"
      android:layout_weight="3"
      />
  <TextView 
   android:text="blue"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:background="#0000aa"
      android:layout_weight="2"
      />
  <TextView 
   android:text="yellow"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:background="#aaaa00"
      android:layout_weight="1"
      />
 </LinearLayout>
 <LinearLayout
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="1">
     <TextView
   android:text="row one"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row two"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row three"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row four"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>

不需修改Activity，直接运行，效果如下：

 

在此，大家都注意到了红绿蓝黄颜色所占的空间不等，是由属性android:layout_weight设置的，

当前的布局文件中：水平布局的textview的layout_width都设置为 android:layout_height="wrap_content"，

从图中可以看出，布局分配给4个颜色必须的空间外，余下的空间2/5分给了红色，3/10分给了绿色，1/5分给蓝色，1/10分给黄色。

 

2、现在将水平布局的textview的layout_width设置都为 android:layout_width="fill_parent"，layout_weights值不变，

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="1">
  <TextView 
   android:text="red--"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="#aa0000"
      android:layout_weight="4"
      />
  <TextView 
   android:text="green"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="#00aa00"
      android:layout_weight="3"
      />
  <TextView 
   android:text="blue"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="#0000aa"
      android:layout_weight="2"
      />
  <TextView 
   android:text="yellow"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="#aaaa00"
      android:layout_weight="1"
      />
 </LinearLayout>
 <LinearLayout
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_weight="1">
     <TextView
   android:text="row one"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row two"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row three"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
  <TextView
   android:text="row four"
   android:textSize="15pt"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>
运行效果如下：

 

此时，红色不可见， android:layout_weight值最小的黄色占屏幕空间最大。

3、以上是对TextView的实验，现在试试LinearLayout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:background="#aa0000"
     android:layout_weight="4">
     <TextView  android:text="red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:background="#00aa00"
     android:layout_weight="3">
     <TextView  android:text="green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:background="#0000aa"
     android:layout_weight="2">
     <TextView  android:text="blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    </LinearLayout>
 <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:background="#aaaa00"
     android:layout_weight="1">
     <TextView  android:text="yellow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
</LinearLayout>

运行效果如下：

 

4、修改LinearLayout的android:layout_width="fill_parent"，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#aa0000"
     android:layout_weight="4">
     <TextView  android:text="red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#00aa00"
     android:layout_weight="3">
     <TextView  android:text="green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#0000aa"
     android:layout_weight="2">
     <TextView  android:text="blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#aaaa00"
     android:layout_weight="1">
     <TextView  android:text="yellow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
</LinearLayout>
运行效果如下图：

 

总结：以水平布局为例，不管是view还是linearlayout。

设置android:layout_width="wrap_content" 的时候，显示空间能容下显示的内容即可，各个view或linearlayout都显示，并且分配空间视android:layout_weight的值而定，越大则空间显示越大。

设置android:layout_width="fill_parent"的时候，即要求显示充满父控件，此时父控件就要根据android:layout_weight的配置的值（权值）进行分配空间，layout_weight的值越小，分配的空间越大。即权值越小，权重越大。

上图中，green的textview的width设置为wrap_content，只显示字体长度，但green背景图中已经折叠成了只有四个字符的宽度。红色应该是被折叠到小于一个像素了，所以不显示。可以设置weight的跨度小一些来验证下，比如1.4-1，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#aa0000"
     android:layout_weight="1.4">
     <TextView  android:text="red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#00aa00"
     android:layout_weight="1.3">
     <TextView  android:text="green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#0000aa"
     android:layout_weight="1.2">
     <TextView  android:text="blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    </LinearLayout>
 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#aaaa00"
     android:layout_weight="1">
     <TextView  android:text="yellow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 </LinearLayout>
</LinearLayout>
运行后效果如图：

 

end.