线性布局
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
tools:context=".LayoutActivity">
<!-- match_parent 匹配父元素
wrap_content包裹元素
android:orientation="vertical"垂直布局
orientation="horizontal"水平布局
android:layout_weight="1"权重
含义根据第一第二组体会一下吧,不固定等于1 还可以等于其他
-->
<TextView
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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮4"/>
</LinearLayout>
<TextView
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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮4"/>
</LinearLayout>
</LinearLayout>
效果
帧布局
所有的子控件都会在左上角,每个控件都会覆盖前面的控件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="vertical"
tools:context=".LayoutActivity">
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="我是1"
android:gravity="right|bottom"
android:textColor="#fff"
android:background="#123"/>
<TextView
android:layout_width="150dp"
android:layout_height="150dp"
android:text="我是2"
android:gravity="right|bottom"
android:textColor="#fff"
android:background="#234"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:text="我是3"
android:gravity="right|bottom"
android:textColor="#fff"
android:background="#456"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:text="我是4"
android:gravity="right|bottom"
android:textColor="#fff"
android:background="#789"/>
</FrameLayout>
效果图
相对布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical"
tools:context=".LayoutActivity">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="相对布局"
android:textSize="20dp"/>
<EditText
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
android:layout_toLeftOf="@+id/btn2"
android:layout_alignTop="@+id/btn2"
android:layout_marginRight="20dp"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册"
android:layout_below="@+id/et"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"/>
</RelativeLayout>
效果:
可能会用到的 | 随便卡卡 |
---|---|
android:layout_toLeftOf | 该组件在引用组件的左边 |
android:layout_toRightOf | 该组件在引用组件的右边 |
android:layout_above | 该组件在引用组件的上边 |
android:layout_below | 该组件在引用组件的下边 |
android:layout_alignParentLeft | 对齐父组件的左边 |
android:layout_alignParentRight | 对齐父组件的右边 |
android:layout_alignParentTop | 对齐父组件的上边 |
android:layout_alignParentBottom | 对齐父组件的下边 |
android:layout_centerInParent | 相对于父组件居中 |
android:layout_centerHorizontal | 横向居中 |
android:layout_centerVertical | 垂直居中 |
表格布局
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shrinkColumns="1"
tools:context=".LayoutActivity">
<!-- shrinkColumns 当页面溢出的时候压缩的元素,使表格能够适应父容器的大小
stretchColumns 当页面不满时拉伸的元素,使能够填满表格中的空闲空间-->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2">
</Button>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮4">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮5">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮6">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮7">
</Button>
</TableRow>
</TableLayout>
效果图
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="2"
tools:context=".LayoutActivity">
<!-- shrinkColumns 当页面溢出的时候压缩的元素,使表格能够适应父容器的大小
stretchColumns 当页面不满时拉伸的元素,使能够填满表格中的空闲空间-->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2">
</Button>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮4">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮5">
</Button>
</TableRow>
</TableLayout>
效果图
压缩和拉伸是按照0,1,2,3...排序的
网格布局
所有子控件默认在GridLayout中横向依次排列,当只等每行的列数时,到达指定列数
会自动换行显示
<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:rowCount="6"
android:columnCount="4"
tools:context=".LayoutActivity">
<TextView
android:text="0"
android:textColor="@android:color/black"
android:textSize="40dp"
android:layout_columnSpan="4"
>
</TextView>
<Button
android:text="清除"
android:textColor="@android:color/black"
android:textSize="26dp"
android:layout_columnSpan="4"
>
</Button>
<Button android:text="1" android:textSize="26dp"/>
<Button android:text="2" android:textSize="26dp"/>
<Button android:text="3" android:textSize="26dp"/>
<Button android:text="+" android:textSize="26dp"/>
<Button android:text="4" android:textSize="26dp"/>
<Button android:text="5" android:textSize="26dp"/>
<Button android:text="6" android:textSize="26dp"/>
<Button android:text="-" android:textSize="26dp"/>
<Button android:text="7" android:textSize="26dp"/>
<Button android:text="8" android:textSize="26dp"/>
<Button android:text="9" android:textSize="26dp"/>
<Button android:text="*" android:textSize="26dp"/>
<Button android:text="." android:textSize="26dp"/>
<Button android:text="0" android:textSize="26dp"/>
<Button android:text="=" android:textSize="26dp"/>
<Button android:text="/" android:textSize="26dp"/>
</GridLayout>
效果图:
可能会用到的 | 随便卡卡 |
---|---|
rowCount | 几行 |
columnCount | 几列 |
layout_rowSpan | 合并行的个数 |
layout_columnSpan | 合并列的个数 |
layout_column | 在网格的第几列 |
layout_row | 在网格的第几行 |