Android笔记——UI开发

概述:

　　布局（Layout）的概念是针对Activity的，Activity就是布满整个Android设备的窗体或者悬浮于其它窗体上的交互界面。在一个应用程序中通常由多个Activity构成。每一个须要显示的Activity都须要在AndroidManifest.xml文件之中声明。

　　通常情况下，能够使用两种方式来创建UI组件，一种方式是使用XML方式来配置UI组件的相关属性。然后装载这些UI组件，这也是最经常使用的方式。可是有些特殊情况下，须要动态生成UI组件。则须要使用另外一种方式，全然使用Java代码来创建UI组件。

　　XML布局文件是Android系统中定义的Layout的经常使用方式，全部布局文件必须包括在res/layout文件夹中。且必须符合Java的命名规范。

当在res/layout文件夹下新增了布局文件之后。R.java文件会自己主动收录该布局资源，Java代码可通过setContentView方法在Activity中显示该Layout。

　　setContentView(R.layout.<资源名称>)。

在布局文件里能够指定UI组件的android:id属性，该属性的属性值代表该组件的唯一标识。通过Activity.findViewById()訪问，而且findViewById()必须在setContentView载入xml文件之后使用，否则会抛出异常。

　　

　　findViewById(R.id.)

　　Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中。Android应用的全部UI组件都继承了View类。

View类另一个重要的子类：ViewGroup，ViewGroup类是全部布局管理器的父类。

　　ViewGroup容器控制其子组件的分布依赖于ViewGroup.LayoutParams、ViewGroup.MarginLayoutParams两个内部类。

　　ViewGroup.LayoutParams提供两个XML属性设定组件的大小。

• android:layout_height:指定该子组件的基本高度；

• android:layout_width：指定该子组件的基本宽度。

这两个属性有三个基本值。这两个属性有三个特定的值：

• fill_parent：指定组件的高度、宽度与父容器组件的一样。

• match_parent：与fill_parent一样，Android2.2開始推荐使用。

• warp_content：内容包裹。

ViewGroup.MarginLayoutParams用于控制子组件周围的页边距。

• android:layout_marginBottom(下边距);

• android:layout_marginLeft（左边距）;

• android:layout_marginRight（右边距）:

• layout_marginTop（上边距）

　　对于View的尺寸。android提供了三种单位供选择使用：

• px：像素。

• dp：dpi。表示屏幕实际的像素。

• sp：与scale无关的像素。与dp类似。

　　尺寸单位选择的技巧：假设设置长度、高度等属性时能够使用dp或sp。可是假设设置字体，须要使用px。假设使用dp或sp，系统会依据屏幕密度的变化进行转换。

　　为了适应各种界面风格，Android提供了六种布局规范。利用这六种布局，基本上能够在设备上随心所欲的摆放不论什么UI组件，这六种布局各自是：

• RelativeLayout（相对布局）

• LinearLayout（线性布局）

• TableLayout（表格布局）

• GridLayout（网格布局）

• FrameLayout（帧布局）

• AbsoluteLayout（绝对布局）

布局类型：

相对布局（RelativeLayout）：

RelativeLayout。其内子组件的位置总是相对兄弟UI组件、父亲容器来决定的。

比方UI组件A相对于UI组件B的位置进行定位，那么UI组件B须要在UI组件A之前定义。

　相对布局用到的主要属性：

• android:layout_below：在某元素的下方。

• android:layout_above：在某元素的上方。
• android:layout_toLeftOf：在某元素的左边。
• android:layout_toRightOf：在某元素的右边。

• android:layout_alignXxx：控制与某元素的边界对其方式。

这个比較好玩，在元素的位置的时候，使用相对位置，能够相对其它元素，也能够相对这个布局，就像我说：我如今站在pawa和 tempest的中间；或者说，我站在队伍的中间。前者就是相对其它元素来定义位置，后者是相对整个布局来定义位置。

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"
        android:text="Button1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/button1"
        android:layout_marginBottom="100dp"
        android:layout_toRightOf="@id/button1"
        android:text="Button2"/>

</RelativeLayout>

线性布局（LinearLayout）：

LinearLayout是最经常使用的布局方式，它会将容器里的UI组件一个一个挨着排列起来。

可是LinearLayout不会换行。当UI组件超出屏幕之后。则不会被显示出来。

LinearLayout有两个重要的XML属性：

androidgravity（对齐方式）

android：orientation（排列方式）

　　android：orientation（排列方式），设定了LinearLayout中包括的UI组件的排列方式。有两个选项vertical（竖向）、horizontal（横向，默认值）



　　android：gravity（对齐方式），设定LinearLayout中包括UI组件的对齐方式。其选项非常多，经常使用上（top）、下（bottom）、左（left）、右（right）。

这样的布局比較经常使用，也比較简单，就是每一个元素占一行，当然也可能声明为横向排放，也就是每一个元素占一列。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"/>
</LinearLayout>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

表格布局（TableLayout）：

表格布局，採用行、列的形式来管理UI组件，TableLayout通过TableRow、其它UI组件来控制表格的行数和列数。

　　每次向TableLayout中加入一个TableRow。该TableRow就是一个表格行，TableRow也是容器，因此它也能够不断加入其它组件，没加入一个子组件。该表格就添加一列。假设直接向TableLayout中加入组件。那么这个组件将直接占用一行。

　　TableLayout支持的XML属性

• android:collapseColumns：设置须要被隐藏的列序号。
• android:shrinkColumns：设置须要被收缩的列序号。
• android:stretchColumns：设置须要被拉伸的列序号。

　　注意：TableLayout中所谓的序列号是从0開始计算的。

<?

xml version="1.0" encoding="utf-8"?

>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="2">

    <TableRow>
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="Button1"/>
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button2"/>
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button3"/>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Button4"/>
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Button5"/>
    </TableRow><h3><span style="font-family:宋体;"><span style="font-size:12px;">androidgravity（对齐方式）</span></span></h3><h3><span style="font-family:宋体;"><span style="font-size:12px;">android：orientation（排列方式）</span></span></h3>

</TableLayout>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

网格布局（GridLayout）：

说明：网格布局是4.0之后加入的布局。跟TableLayout有点像，但更加好用，它把容器分为一个rows*columns的网格，每一个网格都是一个组件位，但是通过设置让组件位占领多行/列。

GridLayout有两类须要关注的属性：

1 GridLayout本身的属性

说明：这类属性是针对GridLayout自身来设置的。主要是对行和列。以及对其方式的设置。

属性表例如以下：

属性	相应方法	属性说明
android:columnCount	setColumCount(int)	设置布局的最大列数
android:rowCount	setRowCount(int)	设置布局的最大行数
android:alignmentMode	setAilgnmentMode(int)	设置布局的对其方式(alignBounds: 对齐子视图边界；alignMargins： 对齐子视图边距；)
android:columnOrderPeserved	setColumOrderPreserved(boolean)	设置容器是否保留列序号
android:rowOrderPeserved	setRowOrderPeserved(boolean)	设置容器是否保留行序号
android：useDefaultMargins	setUseDefaultMargins(boolean)	设置容器是否使用默认的页边距

2 针对容器内的子组件的属性

说明：这类属性是针对GridLayout中的子组件设置的，能够设置组件在网格中的大小和摆放方式。

属性表例如以下：

属性	相应方法	属性说明
android:layout_Gravity	setGravity(int)	设置组件怎样占领其所属网格的空间
android:layout_column		设置组件在容器的第几列
android:layout_row		设置组件在容器的第几行
android:layout_columnSpan		设置组件占领了几列
android:layout_rowSpan		设置组件占领了几行

<?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"
    android:orientation="horizontal">

    <Button
        android:layout_column="3"
        android:text="/"/>
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="*"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="-"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+"/>
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0"/>
    <Button android:text="00"/>
    <Button
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="="/>

</GridLayout>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

帧布局（FrameLayout）：

帧布局是最简单的布局方式。全部加入到这个布局中的视图都是以层叠的方式显示，而且后声明的遮挡先声明的控件。

帧布局容器为每一个增加当中的组件创建一个空白的区域（称为一帧），全部每一个子组件占领一帧，这些帧都会依据gravity属性运行自己主动对齐。

帧布局方式。说帧不太easy理解，能够说成是层布局方式，也就是说，在它内部的元素。是一层一层的叠加在一起的。假设用过Photoshop，或者 Flash，这里面的层的概念是和他们一致的。

假设最上层的元素是不透明的，而且比以下的元素尺寸要大，那么将看不到以下的元素，仅仅能看到顶层元素。

这些 层的顺序是：最新声明的放到最前面。能够这样理解，Android按文件的书写顺序来组织这个布局，先声明的放在第一层。再声明的放到第二层，…，最后声 明的放在最顶层。

<?xml version="1.0" encoding="utf-8"?

>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="294dp"
        android:layout_height="294dp"
        android:text="Button1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="218dp"
        android:layout_height="214dp"
        android:text="Button2"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="156dp"
        android:layout_height="143dp"
        android:text="Button3"/>
</FrameLayout>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

绝对布局（AbsoluteLayout）：

对于AbsoluteLayout，android不提供不论什么布局控制，而是由开发者自己通过X坐标、Y坐标来控制组件的位置。



　　在AbsoluteLayout中，每一个子组件都须要通过两个XML属性来确定坐标：layout_x:指定该子组件的X坐标。layout_y:指定该子组件的Y坐标。



　　由于此布局比較繁琐。并且在不同的屏幕上显示效果差距比較大，所以一般不推荐使用。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:text="Button1"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="200dp"
        android:layout_y="150dp"
        android:text="Button2"/>
</AbsoluteLayout>

布局案例——用户注冊：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/regist_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="22dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:paddingRight="5dp"
            android:text="用户名："/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入您的用户名"
            android:textSize="14dp"/>

    </LinearLayout>
    <LinearLayout
        android:id="@+id/regist_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/regist_username"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:paddingRight="5dp"
            android:text="密    码："/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入您的密码"
            android:inputType="textPassword"
            android:textSize="14dp"/>
    </LinearLayout>
    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/regist_password"
        android:layout_marginLeft="30dp"
        android:contentDescription="性别"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="男"/>
        <RadioButton
            android:id="@+id/radioFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女"/>
    </RadioGroup>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radioGroup"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="36dp"
        android:text="注冊"/>
</RelativeLayout>