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

Posted zhchoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.Net程序猿玩转Android开发---线性布局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>

??
??

以上是关于.Net程序猿玩转Android开发---线性布局LinearLayout的主要内容,如果未能解决你的问题,请参考以下文章

Android开发基本知识

Android开发基本知识

Android开发基本知识

Android开发基本知识

Android开发 UI布局

Android布局之线性布局——LinearLayout