線性布局
<?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"權(quán)重
含義根據(jù)第一第二組體會(huì)一下吧韩肝,不固定等于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>
效果
image
幀布局
所有的子控件都會(huì)在左上角砰碴,每個(gè)控件都會(huì)覆蓋前面的控件
<?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>
效果圖
image
相對(duì)布局
<?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="相對(duì)布局"
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="注冊(cè)"
android:layout_below="@+id/et"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"/>
</RelativeLayout>
效果:
image
可能會(huì)用到的 | 隨便卡卡 |
---|---|
android:layout_toLeftOf | 該組件在引用組件的左邊 |
android:layout_toRightOf | 該組件在引用組件的右邊 |
android:layout_above | 該組件在引用組件的上邊 |
android:layout_below | 該組件在引用組件的下邊 |
android:layout_alignParentLeft | 對(duì)齊父組件的左邊 |
android:layout_alignParentRight | 對(duì)齊父組件的右邊 |
android:layout_alignParentTop | 對(duì)齊父組件的上邊 |
android:layout_alignParentBottom | 對(duì)齊父組件的下邊 |
android:layout_centerInParent | 相對(duì)于父組件居中 |
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 當(dāng)頁面溢出的時(shí)候壓縮的元素,使表格能夠適應(yīng)父容器的大小
stretchColumns 當(dāng)頁面不滿時(shí)拉伸的元素芳室,使能夠填滿表格中的空閑空間-->
<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>
效果圖
圖片.png
<?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 當(dāng)頁面溢出的時(shí)候壓縮的元素专肪,使表格能夠適應(yīng)父容器的大小
stretchColumns 當(dāng)頁面不滿時(shí)拉伸的元素,使能夠填滿表格中的空閑空間-->
<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>
效果圖
圖片.png
壓縮和拉伸是按照0,1,2,3...排序的
網(wǎng)格布局
所有子控件默認(rèn)在GridLayout中橫向依次排列堪侯,當(dāng)只等每行的列數(shù)時(shí)嚎尤,到達(dá)指定列數(shù)
會(huì)自動(dòng)換行顯示
<?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>
效果圖:
圖片.png
可能會(huì)用到的 | 隨便卡卡 |
---|---|
rowCount | 幾行 |
columnCount | 幾列 |
layout_rowSpan | 合并行的個(gè)數(shù) |
layout_columnSpan | 合并列的個(gè)數(shù) |
layout_column | 在網(wǎng)格的第幾列 |
layout_row | 在網(wǎng)格的第幾行 |