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

现在的位置: 首页 > 综合 > 正文

RSS

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

2017年11月08日 ⁄ 综合 ⁄ 共 7343字 ⁄ 字号小中大 ⁄ 评论关闭

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开发—(7)相对布局RelativeLayout
【下篇】.Net程序员玩转Android开发—(5)项目文件介绍

作者: irrextAstep

该日志由 irrextAstep 于6年前发表在综合分类下，最后更新于 2017年11月08日.
转载请注明: .Net程序员玩转Android开发—(6)线性布局LinearLayout | 学步园 +复制链接

抱歉!评论已关闭.

学步园