一、View和ViewGroup

Android体系中UI的设计采用视图层次的结构。

视图层次： 由View和ViewGroup组成。在创建UI时，开发人员不会真正去创建View或者ViewGroup，而是直接使用Android所提供的具有不同功能的控件，因此通常是看不到View或ViewGroup。

View是Android系统中最基本的组件，同时也是Android所有可视组件的父类，它完成了构建按钮、文本框、时钟等诸多控件的基本功能。此外View还有一个非常重要的子类ViewGroup。 View与ViewGroup的区别：ViewGroup能够容纳多个View作为ViewGroup的子组件，同时View也可以包含ViewGroup作为其子组件，所以View和ViewGroup是相互包容、“你中有我，我中有你”的关系。

wrap_content: 是layout_width和layout_height的属性值之一，表示和自身内容一样的长度。(由内容决定)

match_parent: 是layout_width和layout_height的属性值之一，表示和父组件一样的长度。

fill_parent: 以填充布局单元内尽可能多的空间。

margin属性： 外边距，指当前视图与其他视图间的距离，可以一次性指定上下左右四个外边距值，也可以一次性指定上下左右采用同一个边距值。

android:layout_margin="10dp"

android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"

padding属性： 内边距，指当前视图边距与其内容间的距离。赋值跟margin属性同类型。

android:layout_padding="10dp"

android:layout_paddingTop="10dp"
android:layout_paddingBottom="10dp"
android:layout_paddingLeft="10dp"
android:layout_paddingRight="10dp"

visible属性：

android:visiblity="visible"
android:visiblity="invisible"
android:visiblity="gone"

二、Android的五种常见控件

2.1 文本控件

在Android的体系结构中，TextView和EditView之间是父类和子类的关系。即EditText继承于TextView，因此EditText几乎具备TextView的所有功能，两者之间最大的不同在于：EditText能够支持用户输入，而TextView不能。

2.1.1 TextView

TextView是用于显示文字（字符串）的控件，可在代码中通过设置属性改变文字的大小、颜色、样式等功能。

注意：颜色值组成（三原色）有三种表示方法

1.#RGB：3位16进制整数,如：#f00

2.#RRGGBB:#00ff00

3.#AARRGGBB:#ff0000ff

2.1.2 EditText

EditText是可以进行编辑操作(用于用户输入和编辑文字或字符的控件)的文本框，将用户信息传递给Android程序。还可以为EditText控件设置监听器，用来测试用户输入的内容是否合法。

2.2 按钮控件

2.2.1 Button

Android的体系结构中Button继承于TextView，而ImageButton继承于ImageView。虽然这两个控件继承于不同的控件，但是Button和ImageButton都是用于完成用户的单击按钮时的onClick事件。

Button是按钮，是用于响应用户的一系列点击事件，使程序更加流畅和完整。

点击事件（监听事件）实现方式（三种）：

☞ 实现方式一：

先在layout文件中指定onClick属性：Android:onClick="click"。然后在Activity中实现这个click方法

public void click (View v){
   /// 处理按钮监听事件
}

☞ 实现方式二：在Activity中添加匿名内部类

Button button = findViewById(R.id.button);


button.setOnClickListener(new View.OnClickListener(){
    @Override
    public void OnClick(View v){
   /// 处理按钮监听事件
    Log.i("匿名内部类方式","button is clicked");  
    }
});

☞ 实现方式三：

public class MainActivity implements View.OnClickListener
{
    //实现接口抽象方法
    public void onClick(View v){
    //处理按钮监听事件
    }
}

//在Activity中注册回调接口
button.setOnClickListener(this);

2.2.2 RadioButton

RadioButton为单选按钮，它需要与RadioGroup配合使用，提供两个或多个互斥的选项集。（如男、女） RadioGroup是单选组合框，可容纳多个RadioButton，并把它们组合在一起，实现单选状态。

RadioButton按钮的实现步骤：

1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加如下代码：

<RadioGroup
   android:id="@+id/radiogroup"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
   
    <RadioButton
   android:id="@+id/radiobutton1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:text="Male"/>
   <RadioButton
   android:id="@+id/radiobutton2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Female"/>
   
 </RadioGroup>

然后在MainActivity.java中添加onCreate函数中添加以下代码：

RadioGroup radiogroup = (RadioGroup)findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){
    public void onCheckedChanged(RadioGroup group,int checkedId){
    switch(checkedId){
        case R,id.maleradio:editText.setText("男");
        break;
     }
       case R,id.femaleradio:editText.setText("女");
        break;
     }
    }
}

///另外Switch也可以用以下方法表示
if(checked==R.id.radiobutton1){
    textView.setText("男");
}
else{
     case R,id.maleradio:editText.setText("女");
        break;
     } 
}

2.2.3 CheckBox

CheckBox即多选按钮，允许用户在一组选项中进行单选和多选。用法与RadioButton类似。

CheckBox按钮的实现步骤：

1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加代码（与radioBox的相似） 2.

注意：响应事件从何而来？（两个来源）

1.由系统提供的，具有特定函数名的响应函数（在OnCreate中进行定义和实现）

2.自定义响应函数名的方法来响应用户事件（放在Activity中作为一个成员函数来使用）

public void CheckboxClicked(View view){
    boolean checked = ((Checked)view).isChecked();
    case R.id.meat:
    if(checked){
        editText.setText("肉类");
    }else{
        ...
    }
    break;
    
    ...
}

2.3 图片控件

2.3.1 ImageView

ImageView是视图控件，它继承于View，其功能是在屏幕中显示图像，ImageView类可以从各种来源加载图像(如资源库或网络)，并提供缩放、裁剪、着色（渲染）等功能。

///在UI布局文件activity——main.xml中添加

<ImageView 
android:id="@id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:srcCompat="@tolls:sample/backgrounds/scenic[0]"

///在MainActivity.java中添加onCreate函数中定义ImageView对象
ImageView imageView;
imageView.setImageResource(R.drawable.ic_launcher_foreground);

2.4 列表控件

2.4.1 ListView

普通列表--ListView在程序中使用频率相对比较高，很多地方都会用到这个控件，其中的内容会以一个列表的形式显示出来，但是在使用ListView时需要一个适配器（应用自带适配器、z自定义适配器）（Adapter）类显示需要的内容。当显示的内容复杂的时候系统的适配器不能满足要求了，这时可以自定义适配器，写一个类继承BaseAdapter。

2.4.2 Spinner

下拉列表--Spinner 控件也是一种列表类型的控件，可以极大地提高用户的体验性。当需要用户选择时，可以提供一个下拉列表将所有可选的项列出来，供用户选择。

2.4.3 ExpandableListView

多级列表ExpandableListView控件提供的是一个多级列表（一般是两级）。

如何实现这个两级列表呢？既然ExpandableListView采用列表的形式，它也是应该有一个适配器，但是它的适配器不是继承BaseAdapter，而是继承它独有的适配器BaseExpandableListView，同时也需要实现其中的几个方法：

BaseExpandableListView中的方法：

方法名称	参数	说明
getGroudId	int groundPosition	获取在给定的位置编号
getChildId	int groundPosition，int childPosition	获取给定组的孩子的ID
getGroudCount		获取第一级列表的列数
getChildrenCount	int groupPosition	获取指定组中孩子的数量
getGroup	int groupPosition	获取定组相关的数据
getGroupView	int groupPositin，boolean isExpanded，View convertView，ViewGroup parent	获取一个显示的视图给定组
getChild	int groupPosition，int childPosition	获取与孩子在给定的组相关的数据
getChildView	int groupPosition，boolean isLastChild，View convertView，ViewGroup parent	获取一个视图显示在给定的组的孩子的数据

2.5 时间日期控件

2.5.1 AnalogClock（模拟时钟的显示方式）和DigitalClock

这两个控件都是通过获取系统时间展示给用户。AnalogClock是以模拟时钟的形式展示，DigitalClock是以数字时钟 的形式向用户展示。

2.5.2 DatePicker和TimePiker

用户可以通过这两个控件来设置日期和时间，DatePicker（会在Android 4.0中自动产生一个日历的功能）用于选择日期，TimePicker用于选择时间。

三、五种常用的布局

在Android程序中界面是通过布局文件设定的，在每个应用程序创建会默认包含一个主界面布局，该布局位于res/layout目录中。实际开发中每个应用程序都包含多个界面，而程序默认提供的一个主界面布局无法满足需求，因此经常会在程序中添加多个布局。

在Android中有两种方式创建布局：一种是在项目中的layout文件夹中写XML，将各个布局写在XML中；一种是在程序中通过代码去编写，这种方式一般用得比较少。

四种布局常用的单位：

1.px：像素，即在屏幕中可以显示最小元素单位。

2.pt：磅数，一磅等于1/72英寸，一般pt作为字体的单位来显示

3.dp（与密度无关的像素，dp与dip相同）：基于屏幕密度的抽象单位。不同设备由不同的显示效果，更具分辨率的不同来去顶控件的尺寸。

4.sp: 可伸缩像素，采用与dp相同的设计理念，推荐设置文字大小时使用。

3.1 线性布局（LinearLayout）

线性布局就是将一些控件排放在一条线上，但是有水平方向和垂直方向两种。水平和垂直方向的控制由属性android:orientation来控制，这个属性有两个值：水平（Vertical）和垂直（Horizaontal），在线性布局中还有一些比较常用的属性，如：android:gravity、android:weight（控件的权值）等。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按钮1"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按钮2"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按钮3"
            android:layout_weight="1.0"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按钮4"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按钮5"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按钮6"
            android:layout_weight="1.0"
            />
    </LinearLayout>
</LinearLayout>

运行效果效果如下：

3.2 相对布局（RelativelLayout）

线对布局是指按照控件间的相对位置进行布局，也就是说我们可以选一个控件作为参照，其他的控件可以在它的上边、下边、左边及右边等。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
   <TextView
       android:id="@+id/textView01"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="AA"
       android:textColor="#00FF00"
       android:textSize="22sp"
       android:layout_marginLeft="20px"/>

    <TextView
    android:id="@+id/textRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView01"
    android:text="BB"
        android:textColor="#FF0000"
        android:textSize="22sp"
    android:layout_marginLeft="20px"/>
    <TextView
        android:id="@+id/text02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView01"
        android:text="CC"
        android:textColor="#00FFFF"
        android:textSize="22sp"
        android:layout_marginLeft="20px"/>
    <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textRight"
        android:layout_toRightOf="@id/text02"
        android:text="DD"
        android:textColor="#000000"
        android:textSize="22sp"
        android:layout_marginLeft="20dip"/>

</RelativeLayout>

运行结果如下： BB相对于AA的左边，CC相对于AA的下边边，DD相对于BB的下边且相对于CC的右边

3.3 帧布局（FrameLayout）

帧布局是五大布局中最简单的一个布局，在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素上，将前面的子元素部分和全部遮挡。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    >
    <TextView
        android:id="@+id/TextView01"
        android:layout_width="1000px"
        android:layout_height="1000px"
        android:background="#ff0000"
        android:text="文本框1"
        android:textColor="#ffffff"/>
    <TextView
        android:id="@+id/TextView02"
        android:layout_width="750px"
        android:layout_height="750px"
        android:background="#0000ff"
        />
    <TextView
        android:id="@+id/TextView03"
        android:layout_width="500px"
        android:layout_height="500px"
        android:background="#00ff00"
        />
</FrameLayout>

运行结果如下：

3.4 表格布局（TableLayout）

表格布局适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。TableRow的数量决定表格的行数。而表格的列数是由包含最多控件的TableRow决定。

<?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:background="#ffffff"
    android:stretchColumns="1"
    >
    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="open..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_o"/>
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Save..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_s"/>
    />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Save As..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_shift_s"/>
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="X"/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Import..."/>
    </TableRow>
</TableLayout>

运行结果如下：

3.5 绝对布局（AbsoluteLayout）

绝对布局是通过指定x、y坐标来控制每一个控件位置的。

四、参考资料

《从零开始学Android编程》

中国大学慕课网：Android应用开发

中国大学慕课网：Android基础应用开发