(二)android布局管理器

阳光穿透心脏的1/2处 2022-03-11 01:10 343阅读 0赞

**布局管理器**: 就是为了方便控制多个控件之间位置关系,按照某个要求显示在屏幕恰当的位置,布局中可以放置其他控件,比如button,tetxtview,imageview等等,甚至可以嵌套其他布局

四大布局:

# 1 LinearLayout 线性布局 #

水平(horizontal 左往右)或者竖直(vertical 从上往下) (布局可以嵌套,可以达到tablelayout的效果,比较灵活)  
示例:  
设置: **orientation** 属性即可指定是水平还是垂直布局  
如果要实现下图所示的界面:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]  
使用linearLayout 需要嵌套才能完完成:  
设计视图是这样的:(代码最好不用看了,比较长,看设计视图旁边的结构会比较清晰)  
![在这里插入图片描述][20190307102427755.png]  
粘上代码:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".PetActivity">
    
        <LinearLayout android:id="@+id/linearLayout3" android:layout_width="0dp" android:layout_height="220dp" android:orientation="vertical" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
    
            <LinearLayout android:layout_width="match_parent" android:layout_height="500dp" android:layout_weight="1" android:orientation="horizontal">
    
                <ImageView android:id="@+id/imageView5" android:layout_width="146dp" android:layout_height="match_parent" android:layout_marginTop="0dp" android:width="60dp" android:adjustViewBounds="true" android:background="@drawable/keji2" />
    
                <LinearLayout android:layout_width="match_parent" android:layout_height="500dp" android:layout_marginTop="0dp" android:orientation="vertical">
    
    
                    <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal">
    
                        <TextView android:id="@+id/textView10" android:layout_width="40dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="宠物名:" />
    
                        <EditText android:id="@+id/pet_name" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_weight="2" android:inputType="text" />
                    </LinearLayout>
    
                    <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal">
    
                        <TextView android:id="@+id/textView11" android:layout_width="40dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="性 别:" />
    
                        <EditText android:id="@+id/pet_sex" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_weight="2" android:inputType="text" />
                    </LinearLayout>
    
    
                    <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal">
    
                        <TextView android:id="@+id/textView12" android:layout_width="40dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="种 类:" />
    
                        <EditText android:id="@+id/pet_species" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_weight="2" android:inputType="text" android:outlineAmbientShadowColor="#ff1" />
                    </LinearLayout>
    
                    <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal">
    
                        <TextView android:id="@+id/textView13" android:layout_width="40dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="年 龄:" />
    
                        <EditText android:id="@+id/pet_age" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_weight="2" android:inputType="number" />
                    </LinearLayout>
    
                    <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal">
    
                        <Button android:id="@+id/btn_sure" android:layout_width="120dp" android:layout_height="wrap_content" android:text="确认" />
    
                        <Button android:id="@+id/btn_cancel" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:gravity="center" android:text="取消" />
                    </LinearLayout>
    
                </LinearLayout>
    
            </LinearLayout>
    
            <TextView android:id="@+id/showInfo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" />
    
        </LinearLayout>
    
    </android.support.constraint.ConstraintLayout>

# 2 tablelayout 表格布局管理器 #

就是一个表格,每列表格的宽度,取决于该列宽度最大的那一格的宽度  
其中有几个重要的属性:  
**列拉伸**(列变宽,如果还有空余空间):  
**android:stretchColumns**

android:stretchColumns="0,1" // 这里表示把 第0列,第1列拉伸
    // 比如:屏幕宽是 100dp
    //  第2列分别占用 20dp,那么第0列,第1列可以占用高于20dp的宽度,使得最终这3列占满全部宽度

效果: 0,1 拉伸  
![在这里插入图片描述][20190307104006761.png]  
xml 代码:  
就是tablelayout的一行,一行自然是横着的,有点像是水平线性布局

**列收缩**(列变窄,如果没有空余空间了,会被其他列挤压)

**android:shrinkColumns**

android:shrinkColumns="2" // 设置第2列可以被挤压(收缩),当一行的其他列占得宽度比较大是,留给第二列的空间不多,就会被挤压

测试:将第0,第1列宽度设置为 160dp (每列的宽度取决于该列控件最宽的那个)  
效果:  
![在这里插入图片描述][20190307104714200.png]  
xml代码:

**列隐藏**(直接隐藏列,不显示,不占空间)  
**android:collapseColumns**

android:collapseColumns="1" // 隐藏第一列,多列之间用 逗号分隔
     // 为了验证影藏列是否还占空间,将 0,2 列设置为拉伸

效果: 隐藏第1列,该列不再占用空间,1,2 列一起沾满整个宽度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]  
xml代码:

使用tablelayout+linerlayout 实现登录界面:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]  
xml代码:注意 .png 文件放在 res/drawable 下  
![在这里插入图片描述][20190307105908826.png]

# 3 RelativeLayout 相对布局 #

相对位置,a在b的上面,a的左与b对齐,就能得到a在b的上方,并且a的左边与b的左边是对齐的,在同一竖线上  
还有其他的方向也可以  
就好像是 小明在你的左一桌,小红在你的前一桌,你在教室的中央(教室就是整块屏幕)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]  
常用属性:  
以btnSetting 为例

<ImageView android:id="@+id/btnSetting" android:layout_width="60dp" android:layout_height="60dp" android:layout_above="@+id/btnStart" android:layout_alignRight="@+id/btnStart" android:src="@drawable/other" />

1.  上下左右:  
    **android:layout\_above**="@+id/btnStart" 表示当前控件应该妨放在 id=btnStart的控件的上方(只能保证是在上方,不能保证怎样对齐)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]相似的还有: \_below,\_toLeftoF,\_toRightOf

1.  对齐:  
    android:layout\_alignRight="@+id/btnStart" 表示当前控件与btnStart 右对齐  
    btnSetting 加上右对齐:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]相似的还有:alignTop,alignBottom,alignLeft

# 4 frame 帧布局 #

可以实现某些空控件在一个控件的上一层,可以将其覆盖,比如一张背景图上添加文字,可以让文字浮在背景的上一层(实现层叠的效果)  
demo:将没有文字的图片上面加上一句文字,并且居中  
资源:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6]  
效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7]xml代码:

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]: /images/20220311/e3f181070e1d44b293fb818cc854ba9f.png
[20190307102427755.png]: /images/20220311/1f5177198a82463d84c254ff260039ff.png
[20190307104006761.png]: /images/20220311/2fd99baf66fd470a9a0d2746548d23f3.png
[20190307104714200.png]: /images/20220311/e6ad69f8d9a843329e3bcc41f6b308f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]: /images/20220311/aa3df66b4a15467195312039f6ee0ab7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]: /images/20220311/6df1c2b1378342abbdd34e86d0fab3b2.png
[20190307105908826.png]: /images/20220311/f6a652a6cc124981914b535cb9c9e30b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]: /images/20220311/804ddbc0bdbc46079b4059e434cc9163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]: /images/20220311/8ccd6488c7654985b2c4ec141a15f9c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]: /images/20220311/90675b9775bd49b7bd06ef19af7ca3f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6]: /images/20220311/82d1870d1d254ea7a599c27ec47bf8dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7]: /images/20220311/0176461b6bb6423796c56187b4a63353.png