Android 中的UI第一篇：Common Layout

1. UI概述
    1）UI是User Interface的简写，它提供了用户与程序之间的接口，可以呈现数据，给用户更好的体验。
    2）UI是由Android中的View（Android原生UI父类对象，它分为基本View，容器View）和ViewGroup（View容器，布局基本View组件）组成的。
    3）H5，CSS3，JS等也可以通过混编的形式，开发UI。

========================================================================================================================================================

2. Android UI中的ViewGroup
在官方文档中ViewGroup是这样解释的：
Each view group is an invisible container that organizes child views, while the child views may be input controls or other widgets that draw some part of the UI.
每个ViewGroup是一个不可见的容器用来组织子View，而子View是用来描绘UI中的一部分内容，其继承体系如下

从具体的实现来看，ViewGroup可以分为两大类：Common Layout和Adapter Layout

========================================================================================================================================================

3. Android Common Layout

    1）RelativeLayout（相对布局）

      定义的每个组件都会相对于其组件进行布局（也就是说每个组件都有一个相对位置），一般用于比较复杂的布局页面。

     一个简单的实例如下：

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- 标题栏 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/backCloseId"
        android:layout_alignBottom="@+id/backCloseId"
        android:layout_alignParentRight="true"
        android:text="系统登录"
        android:textColor="#ffffffff"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:textSize="20sp"
        android:background="#ff669900"
        android:padding="10dp" />
     
      <ImageView
          android:id="@+id/backCloseId"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/ic_menu_back"
          android:background="#ff669900"
          android:padding="10dp"
          android:onClick="onClick" />

    
    <!-- 第一行 -->
    <!-- 第一个元素默认左对齐，且顶端对齐 -->
    <ImageView
        android:id="@+id/phonePt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_menu_call"
        android:layout_marginTop="50dp"
         />
   
    <EditText
        android:id="@+id/phoneId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/phonePt"
        android:hint="input phone"
        android:inputType="number"
        android:background="@null"
        android:layout_alignBottom="@id/phonePt"
        android:layout_toRightOf="@id/phonePt"
        android:layout_marginTop="50dp"
        android:layout_marginRight="130dp"
          />
    
    <ImageView
        android:id="@+id/clearPt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_menu_close_clear_cancel"
        android:layout_marginTop="50dp"
        android:layout_toRightOf="@id/phoneId"
        android:onClick="onClick" />
    
    <!-- 第二行 -->
     <View
        android:id="@+id/lineId"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ffafafaf"
        android:layout_below="@id/phoneId"
        android:layout_marginTop="10dp" />
    
    <!-- 第三行 -->
     <ImageView
        android:id="@+id/passwordPt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:src="@android:drawable/ic_menu_sort_by_size"
        android:layout_below="@id/lineId" />
    
    <EditText
        android:id="@+id/pwdId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/passwordPt"
        android:layout_alignBottom="@id/passwordPt"
        android:layout_below="@id/lineId"
        android:layout_marginTop="10dp"
        android:layout_toLeftOf="@+id/clearPt"
        android:layout_toRightOf="@id/passwordPt"
        android:background="@null"
        android:hint="input password"
        android:inputType="textPassword" />
    
    <ImageView
        android:id="@+id/eyePt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/lineId"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_menu_view"
        android:layout_toRightOf="@id/pwdId"
        android:layout_alignParentRight="true"
        android:onClick="onClick" />
    
    <!-- 第四行 -->
     <Button
         android:id="@+id/yesId"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_below="@id/pwdId"
         android:text="登陆"
            android:layout_marginTop="45dp"
            android:layout_marginRight="50dp"
            android:layout_marginLeft="50dp"
            android:background="#ff669900"
            android:textColor="#ffffffff"
            android:padding="20dp"
         android:layout_toLeftOf="@+id/noId"
         android:onClick="onClick" />
     
     <!-- TextView或者其他容器一般不加onClick -->
     <TextView
         android:id="@+id/findPwdId"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="忘记密码？"
         android:layout_below="@+id/yesId"
         android:layout_alignParentRight="true"
         android:layout_marginTop="50dp"
         android:layout_marginRight="20dp"
          />
</RelativeLayout>

效果图如下：

说明：

1）所有的布局对象在应用时，要么在Activity中直接new，要么定义在res/layout目录的xml文件中，而官方文档推荐使用XML的方式
2）在使用所有的布局对象时需重点掌握的是布局方式以及常用属性