布局管理器: 就是为了方便控制多个控件之间位置关系,按照某个要求显示在屏幕恰当的位置,布局中可以放置其他控件,比如button,tetxtview,imageview等等,甚至可以嵌套其他布局
四大布局:
1 LinearLayout 线性布局
水平(horizontal 左往右)或者竖直(vertical 从上往下) (布局可以嵌套,可以达到tablelayout的效果,比较灵活)
示例:
设置: orientation 属性即可指定是水平还是垂直布局
如果要实现下图所示的界面:
使用linearLayout 需要嵌套才能完完成:
设计视图是这样的:(代码最好不用看了,比较长,看设计视图旁边的结构会比较清晰)
粘上代码:
<?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 拉伸
xml 代码:
就是tablelayout的一行,一行自然是横着的,有点像是水平线性布局
<?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=".TableLayoutActivity">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0,1">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button0" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
列收缩(列变窄,如果没有空余空间了,会被其他列挤压)
android:shrinkColumns
android:shrinkColumns="2" // 设置第2列可以被挤压(收缩),当一行的其他列占得宽度比较大是,留给第二列的空间不多,就会被挤压
测试:将第0,第1列宽度设置为 160dp (每列的宽度取决于该列控件最宽的那个)
效果:
xml代码:
<?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=".TableLayoutActivity">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="2"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button4"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button0" />
<Button
android:id="@+id/button5"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
列隐藏(直接隐藏列,不显示,不占空间)
android:collapseColumns
android:collapseColumns="1" // 隐藏第一列,多列之间用 逗号分隔
// 为了验证影藏列是否还占空间,将 0,2 列设置为拉伸
效果: 隐藏第1列,该列不再占用空间,1,2 列一起沾满整个宽度
xml代码:
<?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=".TableLayoutActivity">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:collapseColumns="1"
android:stretchColumns="0,2"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button0" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
使用tablelayout+linerlayout 实现登录界面:
xml代码:注意 .png 文件放在 res/drawable 下
<?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=".Test32Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/keji2"
android:layout_gravity="center"
/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,3"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
/>
<TextView
android:id="@+id/editText"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:ems="10"
android:text="姓名"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="请输入姓名" />
<TextView
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
/>
<TextView
android:id="@+id/editText2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="密码" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword" />
<TextView
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
/>
<Button
android:id="@+id/button2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="取消" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录" />
<TextView
/>
</TableRow>
</TableLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
3 RelativeLayout 相对布局
相对位置,a在b的上面,a的左与b对齐,就能得到a在b的上方,并且a的左边与b的左边是对齐的,在同一竖线上
还有其他的方向也可以
就好像是 小明在你的左一桌,小红在你的前一桌,你在教室的中央(教室就是整块屏幕)
常用属性:
以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" />
- 上下左右:
android:layout_above="@+id/btnStart" 表示当前控件应该妨放在 id=btnStart的控件的上方(只能保证是在上方,不能保证怎样对齐)
相似的还有: _below,_toLeftoF,_toRightOf
- 对齐:
android:layout_alignRight="@+id/btnStart" 表示当前控件与btnStart 右对齐
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" />
相似的还有:alignTop,alignBottom,alignLeft
4 frame 帧布局
可以实现某些空控件在一个控件的上一层,可以将其覆盖,比如一张背景图上添加文字,可以让文字浮在背景的上一层(实现层叠的效果)
demo:将没有文字的图片上面加上一句文字,并且居中
资源:
效果:
xml代码:
<?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=".FrameLayoutActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="400dp">
<ImageView
android:id="@+id/imageView6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@drawable/background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android程序设计"
android:textSize="24sp"
android:textColor="#f00"
android:layout_gravity="center"
android:gravity="center"
/>
</FrameLayout>
</android.support.constraint.ConstraintLayout>