android:TableLayout表格佈局詳解
文章重點
android:stretchColumns="0" 第0列可伸展
android:shrinkColumns="1,2" 第1,2列皆可收縮
android:collapseColumns="*" 隱藏所有行
android:layout_column="1" 、、索引從0開始
android:layout_span="2"
android:text="我跨1到2列,不信你看!"
這篇博文包括的內容:
1、TableLayout簡介
2、TableLayout行列數的確定
3、TableLayout可設定的屬性詳解
4、一個包含4個TableLayout佈局的例項及效果圖
一、Tablelayout簡介
Tablelayout類以行和列的形式對控制元件進行管理,每一行為一個TableRow物件,或一個View控制元件。
當為TableRow物件時,可在TableRow下新增子控制元件,預設情況下,每個子控制元件佔據一列。
當為View時,該View將獨佔一行。
二、TableLayout行列數的確定
TableLayout的行數由開發人員直接指定,即有多少個TableRow物件(或View控制元件),就有多少行。
TableLayout的列數等於含有最多子控制元件的TableRow的列數。如第一TableRow含2個子控制元件,第二個TableRow含3個,第三個TableRow含4個,那麼該TableLayout的列數為4.
三、TableLayout可設定的屬性詳解
TableLayout可設定的屬性包括全域性屬性及單元格屬性。
1、全域性屬性也即列屬性,有以下3個引數:
android:stretchColumns 設定可伸展的列。該列可以向行方向伸展,最多可佔據一整行。
android:shrinkColumns 設定可收縮的列。當該列子控制元件的內容太多,已經擠滿所在行,那麼該子控制元件的內容將往列方向顯示。
android:collapseColumns 設定要隱藏的列。
示例:
android:stretchColumns="0" 第0列可伸展
android:shrinkColumns="1,2" 第1,2列皆可收縮
android:collapseColumns="*" 隱藏所有行
說明:列可以同時具備stretchColumns及shrinkColumns屬性,若此,那麼當該列的內容N多時,將“多行”顯示其內容。(這裡不是真正的多行,而是系統根據需要自動調節該行的layout_height)
2、單元格屬性,有以下2個引數:
android:layout_column 指定該單元格在第幾列顯示
android:layout_span 指定該單元格佔據的列數(未指定時,為1)
示例:
android:layout_column="1" 該控制元件顯示在第1列
android:layout_span="2" 該控制元件佔據2列
說明:一個控制元件也可以同時具備這兩個特性。
四、一個包含4個TableLayout佈局的例項及效果圖
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
>
<!-- 第1個TableLayout,用於描述表中的列屬性。第0列可伸展,第1列可收縮,第2列被隱藏-->
<TextView
android:text="表1:全域性設定:列屬性設定"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="1"
android:collapseColumns="2"
android:padding="3dip">
<TableRow>
<Button android:text="該列可伸展"/>
<Button android:text="該列可收縮"/>
<Button android:text="我被隱藏了"/>
</TableRow>
<TableRow>
<TextView android:text="我向行方向伸展,我可以很長 "/>
<TextView android:text="我向列方向收縮,我可以很深"/>
</TableRow>
</TableLayout>
<!-- 第2個TableLayout,用於描述表中單元格的屬性,包括:android:layout_column 及android:layout_span-->
<TextView
android:text="表2:單元格設定:指定單元格屬性設定"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip">
<TableRow>
<Button android:text="第0列"/>
<Button android:text="第1列"/>
<Button android:text="第2列"/>
</TableRow>
<TableRow>
<TextView android:text="我被指定在第1列" android:layout_column="1"/>
</TableRow>
<TableRow>
<TextView
android:text="我跨1到2列,不信你看!"
android:layout_column="1"
android:layout_span="2"
/>
</TableRow>
</TableLayout>
<!-- 第3個TableLayout,使用可伸展特性佈局-->
<TextView
android:text="表3:應用一,非均勻佈局"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="一" ></Button>
<Button android:text="兩字"></Button>
<Button android:text="三個字" ></Button>
</TableRow>
</TableLayout>
<!-- 第4個TableLayout,使用可伸展特性,並指定每個控制元件寬度一致,如1dip-->
<TextView
android:text="表4:應用二,均勻佈局"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="一" android:layout_width="1dip"></Button>
<Button android:text="兩字" android:layout_width="1dip"></Button>
<Button android:text="三個字" android:layout_width="1dip"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
說明:第4個TableLayout裡的均勻佈局的均勻效果是有限的。其有限性體現在,當該行有N列,則每列的控制元件內容不能多於1/N。執行效果圖:(如圖1)
圖1 TableLayout執行結果圖
參考書目:
[1] 《android基礎教程》,[美]Ed Burnette 著,張波,高朝勤,楊月等譯,北京:人民郵電出版社,2009.11
[2] 《android開發入門教程》,[美]Mark L. Murphy著,李雪飛,吳明暉譯,北京:人民郵電出版社,2010.12
[3] 《android核心技術與例項詳解》,吳亞峰,索依娜,北京:電子工業出版社,2010.10
參考文章:
Android 使用 TableLayout 佈局拉伸寬度
相關文章
- Android之TableLayout(表格佈局)Android
- Android UI控制元件系列:TableLayout(表格佈局)AndroidUI控制元件
- Android 使用 TableLayout 佈局拉伸寬度Android
- Android零基礎入門第29節:善用TableLayout表格佈局,Android
- harmonyOS應用-TableLayout佈局
- android佈局------RelativeLayout(相對佈局)詳解Android
- Android 佈局屬性詳解Android
- 表格佈局
- Android FlexboxLayout 佈局詳解AndroidFlex
- 【轉】android佈局屬性詳解Android
- Flutter 佈局詳解Flutter
- ExtJs佈局詳解JS
- Flutter佈局篇(1)–水平和垂直佈局詳解Flutter
- Flutter佈局篇(1)--水平和垂直佈局詳解Flutter
- 等寬類表格佈局
- 詳解CSS的Flex佈局CSSFlex
- 詳解RecyclerView的預佈局View
- Android 約束佈局(ConstraintLayout)1.1.0 版詳解AndroidAI
- CSS例項詳解:Flex佈局CSSFlex
- iOS自動佈局——Masonry詳解iOS
- Flutter 佈局(七)- Row、Column詳解Flutter
- Flutter系列之Flex佈局詳解FlutterFlex
- Flutter 佈局(一)- Container詳解FlutterAI
- ExtJs頁面佈局詳解JS
- Android 佈局Android
- VUE-表格佈局、表格查詢、工具欄、表格、分頁欄Vue
- bootstrap13-邊框表格佈局boot
- Flutter 佈局(九)- Flow、Table、Wrap詳解Flutter
- Flutter Container Widget 佈局詳解FlutterAI
- Flutter佈局詳解,必知必會Flutter
- iOS 自動佈局框架 – Masonry 詳解iOS框架
- iOS自動佈局框架 - Masonry詳解iOS框架
- 一定能看到懂的Android常見介面佈局詳解Android
- 小程式簡單實現表格佈局
- bootstrap17-響應式表格佈局boot
- Android佈局概述Android
- Android xml 佈局AndroidXML
- web響應式佈局之 meta詳解Web