.Net程序猿玩转Android开发---(6)线性布局LinearLayout

              

             LinearLayout控件是Android中重要的布局控件，是一个线性控件，所谓线性控件的意思是指该控件里面的内容仅仅能水平或垂直排列。也就是在一条直线上。

通过控件的属性能够控制该控件内的控件的位置以及大小。以下是放置了3个treeview控件的效果图。此LinearLayout控件的属性为垂直排列.

        

   以下我们通过该控件的几个属性来了解下控件的使用方法

        1.Orientation属性

             该属性设置LinearLayout内的控件显示方向  vertical：垂直显示    horizontal水平显示

                android:orientation="horizontal"

        2. gravity属性

           该属性用来设置LinearLayout内的控件显示位置。 android:gravity="center"表示垂直居中显示.

           该属性有以下枚举值:

           android:gravity="top"
           android:gravity="bottom"
            android:gravity="left"
             android:gravity="right"
            android:gravity="center_vertical"
            android:gravity="fill_vertical"
           android:gravity="fill_horizontal"
           android:gravity="center_horizontal"
           android:gravity="center_vertical"
         android:gravity="fill"
           android:gravity="clip_vertical"
            android:gravity="clip_horizontal"

        

           3.layout_weight属性

                   layout_weight主要是LinearLayout内控件的属性。用来设置LinearLayout内控件的所占比例。

                   3.1  当LinearLayout内的控件垂直排列，而且textview的高度android:layout_height="wrap_content" 时候。我们设置当中一个textview的 android:layout_weight="1",

                     效果例如以下:

                      

                         代码

                        

<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="标签1"
        android:background="#ff0000"

         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="标签2"
         android:background="#FFB5C5"
         />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="标签3" 
         android:background="#EE82EE"

        />

</LinearLayout>

                       

                      这里我们来分析下为什么会产生这种效果，首先我们这是在垂直控件上按比例分配，三个标签的layout_height都为wrap_content,，当三个标签按所占的高度分配空间后。剩余空间会按layout_weight比例分配，由于标签1和标签3没有设置layoutweight属性。默觉得0，所以把剩余空间所有分配给了标签2,

                    要谨记一点，此时的textview的  android:layout_height="wrap_content"
            

                   3.2  当我们把三个textview的  android:layout_height="fill_parent", 同一时候把标签1的layout_weight设为1, 标签2和标签3的layout_weight设为2，

           这时我们又会看到不同的效果

                  

                 代码例如以下

                 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="标签1"
        android:background="#ff0000"
         android:layout_weight="1"
         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:text="标签2"
         android:background="#FFB5C5"
         />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="标签3" 
         android:background="#EE82EE"
          android:layout_weight="2"
        />

</LinearLayout>

                  看到这个效果后，大家可能会感觉到疑惑，标签2和标签3的weight值为2。 标签1的weigiht值为1，为什么标签1占的空间要大？

                  这时由于我们把空间的属性设置为fill_parent后layout_height="fill_parent",这时控件所占比例就会按反比例分配控件，

 比例越小，占的空间越大



                 4.商品列表演示样例

                 接下来我们来展示使用LinearLayout做的一个商品列表演示样例，首先在项目中res目录下创建一个raw目录，然后在raw目录放置产品图片，然后我们開始布局，

效果图例如以下

                

               

<?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"
    android:gravity="top"
    >
 
  <LinearLayout android:layout_width="fill_parent"   android:layout_height="10dp">
　　  </LinearLayout>

 <LinearLayout android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="horizontal"
     android:gravity="center" 
     >

　　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="2"
  android:orientation="vertical"
  android:layout_height="fill_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@raw/pad" />
　　</LinearLayout>
        
　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="1"
  android:orientation="vertical"
  android:layout_height="fill_parent">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="商品名称:IPAD Air" 
                android:layout_weight="1"
                />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品价格:$99" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品颜色:白色" />
       
　　</LinearLayout>
         
     </LinearLayout>   
     
   <LinearLayout android:layout_width="fill_parent"   android:layout_height="2dp" android:background="#F0F0F0">
       
　　  </LinearLayout>
 
 <LinearLayout android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="horizontal"
     android:gravity="center" 
     >

　　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="2"
  android:orientation="vertical"
  android:layout_height="fill_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@raw/pad" />
　　</LinearLayout>
        
　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="1"
  android:orientation="vertical"
  android:layout_height="fill_parent">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="商品名称:IPAD Air" 
                android:layout_weight="1"
                />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品价格:$99" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品颜色:白色" />
       
　　</LinearLayout>
           
     </LinearLayout>    
     
  <LinearLayout android:layout_width="fill_parent"   android:layout_height="2dp" android:background="#F0F0F0">
       
　　  </LinearLayout>
 
 <LinearLayout android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="horizontal"
     android:gravity="center" 
     >

　　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="2"
  android:orientation="vertical"
  android:layout_height="fill_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@raw/pad" />
　　</LinearLayout>
        
　 <LinearLayout 
  android:layout_width="fill_parent"
  android:layout_weight="1"
  android:orientation="vertical"
  android:layout_height="fill_parent">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="商品名称:IPAD Air" 
                android:layout_weight="1"
                />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品价格:$99" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_weight="1"
                android:text="商品颜色:白色" />
       
　　</LinearLayout>
        

        
     </LinearLayout>    
    
</LinearLayout>