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

Posted 2020-10-25 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>