线性布局(LinearLayout)——Mars Android开发视频之第一季第十二集(重)

隐身守侯 提交于 2020-03-13 22:36:18

##1·LinearLayout布局的嵌套 下图为三个线性布局嵌套的结果。最外层为一个水平排列的线性布局,内层为两个垂直排列的线性布局, 其中每个包含两个文本框。

输入图片说明

###1.1·实现:

首先,外层为水平排列的线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="horizontal">

</LinearLayout>

然后在里面添加两个垂直排列的线性布局,每个含两个文本框:

第一个

 <LinearLayout 
        android:layout_width="wrap_content"
    	android:layout_height="match_parent"
    	android:layout_margin="10dp"
    	android:padding="5dp"
    	android:background="@drawable/border"<!--给边框设置的颜色,详情见附录-->
		android:orientation="vertical">
		
        <TextView 
            android:id="@+id/textView_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00FFFF"
            android:textSize="15sp"
            android:text="文本框1"/>
        <TextView 
            android:id="@+id/textView_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:textSize="15sp"
            android:text="文本框2"/>
        
    </LinearLayout>

第二个:

 <LinearLayout 
        android:layout_width="wrap_content"
    	android:layout_height="match_parent"
    	android:background="@drawable/border"
    	android:padding="5dp"
    	android:layout_margin="10dp"
		android:orientation="vertical">
		
        <TextView 
            android:id="@+id/textView_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:textSize="15sp"
            android:text="文本框3"/>
        <TextView 
            android:id="@+id/textView_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:textSize="15sp"
            android:text="文本框4"/>
        
    </LinearLayout>

至此,我们就完成了一个线性布局嵌套-----水平方向的线性布局嵌套两个垂直方向的线性布局:

输入图片说明

##2·layout_weight属性 ###2.1·作用: 子控件占父控件的空余空间的比例

  • 要求1:子控件并未占满父控件的所有空间,也就是要有空余空间。

输入图片说明

  • 要求2:layout_weight的值(整型)用于指定父控件的空闲空间的分配比例

例: 控件1和控件2的layout_weight属性值都设置为1的话。

输入图片说明

它们将平分父控件的空闲空间,其效果为:

输入图片说明

为了方便理解,我们用刚才的代码做个试验:

我们把文本框3和4的layout_weight属性设置为1,文本框1和2不变,效果为:

输入图片说明

父控件白色空余部分平均分配给了文本框3和4.

注意,平均分配的部分仅仅是父控件的空余空间。两个子控件所占空间并非一定相等。

输入图片说明

同样的代码,我仅仅将文本框3的文本内容多增加了一点,就是这样一种效果。 layout_weight为1的话,子控件并非一定相等,它们仅仅是平均分配了父控件的空余空间而已。

###2.2·精确控制子控件在整个父控件中所占比例 假如,我们想要让两个子控件在父控件中精确的占据三分之一,和三分之二的空间。

那么我们只需将:

  • 两个子控件的高度设置为0dp(布局如果是水平排列,那么就将宽度设置为0dp);
  • layout_weight分别设置为1和2。

这时的效果为:

输入图片说明

如此,我们就实现了,精确控制两个子控件分别占据整个父控件的三分之一和三分之二。 ##3·练习 实现这样的布局: 输入图片说明

###3.1实现: 最外层一个垂直方向的线性布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    

</LinearLayout>

第一部分为一个文本域: (内容居中使用gravity属性)

	<TextView 
	    android:id="@+id/title"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:text="猜拳游戏"
	    android:textSize="20dp"
	    android:gravity="center"/>

输入图片说明

接着是一个按钮(中间那个复杂的部分留在最后来实现):

	<Button
	    android:id="@+id/startBtn"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:text="确定"/>

输入图片说明

接着是两个文本域,它们需要放在水平的线性布局里:

	<LinearLayout 
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    
	</LinearLayout>

在水平的线性布局里放入两个宽度一样的文本域:

	    <TextView 
	        android:id="@+id/resultTextView"
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="wrap_content"
	        android:text="结果"/>
	    
	    <TextView 
	        android:id="@+id/testResultTextView"
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="wrap_content"
	        android:text="测试结果"/>

输入图片说明

最后是,中间复杂的部分。

输入图片说明

首先,是一个水平线性布局:

	<LinearLayout 
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    
	    
	</LinearLayout>

然后在这个线性布局中,又包含两个宽度相等的垂直线性布局:

	    <LinearLayout 
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="match_parent"
	        android:orientation="vertical">
	        
	    </LinearLayout>
	    <LinearLayout 
	        android:layout_width="0dp"
	        android:layout_weight="1"
	        android:layout_height="match_parent"
	        android:orientation="vertical">
	        
	    </LinearLayout>

然后在两个垂直线性布局中,各有一个图片视图:

	        <ImageView 
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:src="@drawable/z"/>

输入图片说明

最后在图片下面有一组单选按钮:

	        <RadioGroup 
	            android:id="@+id/radioGroup_1"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:orientation="vertical">
	            
	            <RadioButton 
	                android:id="@+id/radioBtn_Cut_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="剪刀"/>
	            <RadioButton 
	                android:id="@+id/radioBtn_Rock_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="石头"/>
	            <RadioButton 
	                android:id="@+id/radioBtn_Cloth_A"
	                android:layout_width="wrap_content"
	                android:layout_height="wrap_content"
	                android:text="布"/>	            	            
	        </RadioGroup>

这样,就完成了。 输入图片说明

##4·附录 给边框设置颜色:

首先,在res目录下的drawable文件夹下创建一个border.xml 然后替换为以下代码,之后在通过android:background="@drawable/border.xml"调用即可。:

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
  
  <solid android:color="#FFFFFF" />

	<stroke android:width="1dp" android:color="#000000" />

	<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>  
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!