天天看點

安卓之旅第二站--常用UI界面設計 安卓之旅第二站--常用UI界面設計

安卓之旅第二站--常用UI界面設計

線性布局和相對布局是最常用的兩種布局,先介紹這兩種布局

1、線性布局

線性布局分為兩種形式,水準線性布局和垂直線性布局 android:orientation="horizontal" ----------使控件水準排列 android:orientation="vertical" ----------使控件垂直排列

<span style="font-size:18px;"><LinearLayout  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:orientation="horizontal"  
    >  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="你"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="好"  
        />  
</LinearLayout>  
    <LinearLayout  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:orientation="vertical">  
  
  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="世"  
            />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="界"  
            />  
    </LinearLayout></span> 
           
安卓之旅第二站--常用UI界面設計 安卓之旅第二站--常用UI界面設計

2、相對布局

子類控件相對子類控件:值是另外一個控件的id android:layout_above-------------位于給定DI控件之上

android:layout_below ------------位于給定DI控件之下

android:layout_toLeftOf ---------位于給定控件左邊

android:layout_toRightOf -------位于給定控件右邊

android:layout_alignLeft ---------左邊與給定ID控件的左邊對齊

android:layout_alignRight --------右邊與給定ID控件的右邊對齊

android:layout_alignTop ---------上邊與給定ID控件的上邊對齊

android:layout_alignBottom -----底邊與給定ID控件的底邊對齊

android:layout_alignBaseline----對齊到控件基準線

相對父容器,用true或false來調整

android:layout_alignParentLeft ---------------相對于父靠左

android:layout_alignParentTop----------------相對于父靠上

android:layout_alignParentRight--------------相對于父靠右

android:layout_alignParentBottom -----------相對于父靠下

android:layout_centerInParent="true" -------相對于父即垂直又水準居中

android:layout_centerHorizontal="true" -----相對于父即水準居中

android:layout_centerVertical="true" --------相對于父即處置居中

相對于父容器位置,用數值來調整位置

android:layout_margin="10dp"

android:layout_marginLeft=""

android:layout_marginRight=""

android:layout_marginTop=""

android:layout_marginBottom=""

版本4.2以上相對布局新屬性

android:layout_alignStart----------------- -将控件對齊給定ID控件的頭部

android:layout_alignEnd--------------------将控件對齊給定ID控件的尾部

android:layout_alignParentStart-----------将控件對齊到父控件的頭部

android:layout_alignParentEnd--------- -- 将控件對齊到父控件的尾部

舉例: 隻給一個控件設定一個id,然後其他控件全部根據這個控件調整位置: ew plain

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="中"
    android:layout_centerInParent="true"
    android:id="@+id/btn1"
    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左上"
        android:layout_toLeftOf="@+id/btn1"
        android:layout_above="@+id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左下"
        android:layout_toLeftOf="@+id/btn1"
        android:layout_below="@+id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右上"
        android:layout_toRightOf="@+id/btn1"
        android:layout_above="@+id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下"
        android:layout_toRightOf="@+id/btn1"
        android:layout_below="@+id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上"
        android:layout_above="@+id/btn1"
        android:layout_centerHorizontal="true"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左"
        android:layout_toLeftOf="@id/btn1"
        android:layout_alignBaseline="@id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右"
        android:layout_toRightOf="@id/btn1"
        android:layout_alignBaseline="@id/btn1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下"
        android:layout_below="@id/btn1"
        android:layout_centerHorizontal="true"
        />
           
安卓之旅第二站--常用UI界面設計 安卓之旅第二站--常用UI界面設計

3、表格布局

表格布局是讓控件以表格的形式來排列,隻要将控件放在單元格中,控件就能整齊的排列。   <Tablerow></TableRow>-----------将控件放在tableRow裡排列成一行   android:stretchColumns----------使某一列的按鈕填充 android:layout_columns ---------讓此按鈕本行的某一列顯示 ew pla

<span style="font-size:18px;"><strong><?xml version="1.0" encoding="utf-8"?>  
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_gravity="center">  
    <TableRow>  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="左上"  
  
            />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="上"  
            />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="右上"  
            />  
    </TableRow>  
    <TableRow>  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="左"  
        />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="中"  
            />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="右"  
            />  
    </TableRow>  
<TableRow>  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="左下"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="下"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="右下"  
        />  
</TableRow>  
</TableLayout></strong></span><span style="font-size: 14px;">  
</span>  
           
安卓之旅第二站--常用UI界面設計 安卓之旅第二站--常用UI界面設計

4、網格布局

網格布局是Android 4.0新增的布局,它實作了控件的交錯顯示,能夠避免因布局嵌套對裝置性能的影響,利于自由布局的開發。

<span style="font-size:18px;"><strong><?xml version="1.0" encoding="utf-8"?>  
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:columnCount="4"  
        >  
        <Button  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:text="/"  
    android:layout_column="3"  
    />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="1"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        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="*"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="4"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="5"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="6"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="-"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="7"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="8"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="9"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="+"  
        android:layout_rowSpan="3"  
        android:layout_gravity="fill"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="0"  
        android:layout_columnSpan="2"  
        android:layout_gravity="fill"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="00"  
        />  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="="  
        android:layout_columnSpan="3"  
        android:layout_gravity="fill"  
        />  
</GridLayout>  
</strong></span> 
           
安卓之旅第二站--常用UI界面設計 安卓之旅第二站--常用UI界面設計

5、幀布局  

幀布局是Android布局中最簡單的一種,幀布局為每個加入其中的控件建立一個空白區域(稱為一幀,每個控件占據一幀

6、絕對布局

通過指定x、y坐标來控制每一個控件的位置,由于不能适應各種螢幕的裝置,是以被棄用。

繼續閱讀