安卓之旅第二站--常用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> 

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"
        />

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>  

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> 

5、帧布局  

帧布局是Android布局中最简单的一种，帧布局为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧

6、绝对布局

通过指定x、y坐标来控制每一个控件的位置，由于不能适应各种屏幕的设备，所以被弃用。