第一天----用户界面设计基础

一 用户界面相关的概念

        用户界面，也就是User Interface  简称UI。在进行UI设计的时候，经常使用View 与Viewfroup，以下对这两种概念进行介绍。

1 View

       View在android中可以理解成视图，占据着屏幕中的一块矩形区域，是负责提供组件绘制和事件处理的方法，如果把Android界面看成一个窗户，那么View就相当于每块玻璃，View类位于Android.view包中。view类及其相关属性可以在XML布局文件中进行设置。view类支持的常用XML属性及其对应的方法如下：

XML属性	方法	描述
Android:background	setBackGroundResource（int）	设置背景，其属性为Drawable资源或者颜色值
Android:elevation	setelevation(float)	Android API 21新添加的属性，用于设置Z轴的深度，其属性为带单位的有效浮点数。
Android:clickable	setclickable（Boolean）	设置是否响应单击事件，其属性为Boolean类型的true或false
Android:focusable	setFocusable	设置是否可以获取焦点，其属性为Boolean类型的true或false
Android：id	setID (int)	设置组件的唯一标识ID，可以通过find View ById()方法获取
Android：Longclickable	setLongclickable（Boolean）	设置是否响应长击事件，其属性为Boolean类型的true或false
Android：minHeight	setMiniumHeight(int)	设置最小高度，其属性为带单位的整数。
Android：minWidth	setMiniumWidth(int)	设置最小宽度，其属性为带单位的整数。
Android：onclick		设置单击触发事件的方法
Android：padding	setPaddingRelative(int,int,int,int)	设置4个边的内边距
Android：paddingBottom	setPaddingRelative(int,int,int,int)	设置底边的内边距
Android：paddingEnd	setPaddingRelative(int,int,int,int)	设置右边的内边距
Android：paddingLeft	setPadding(int,int,int,int)	设置左边的内边距
Android：paddingRight	setPadding(int,int,int,int)	设置右边的内边距
Android：paddingStart	setPaddingRelative(int,int,int,int)	设置左边的内边距
Android：paddingTop	setPaddingRelative(int,int,int,int)	设置顶边的内边距
Android：visibility	setVisility(int)	设置View的可见性

2 ViewGroup

       ViewGroup在Android中代表容器，还是之前窗户的比喻，ViewGroup就相当于窗户框，用户控制玻璃的安放，ViewGroup类继承自view类，它是View类的扩展，是用来容纳其他组件的容器。但是ViewGroup是一个抽象的类，因此，实际通常用ViewGroup的子类作为容器。 

       ViewGroup控制其子组件的分布时，还经常依赖ViewGroup.LayoutParams和ViewGroup.MarginLayoutParams两个内部类。

       ViewGroup.LayoutParams类封装了布局的位置、高和宽等信息，它支持Android：layout_height和Android：layout_Width两个XML属性，他们的属性值，可以用精确的数值，也可以用FILL_MATCH_PARENT(表示与父容器相同）、MATCH_PARENT（表示与父容器相同）、WRAP_CONTENT(表示包裹其自身的内容）指定。

     ViewGroup.MarginLayoutParams类用于控制其子组件的外边距，常见的属性如下：

XML属性	描述
Android：layout_marginBotton	设置底外边距
Android：layout_marginEnd	设置右外边距
Android：layout_marginleft	设置左外边距
Android：layout_marginRight	设置右外边距
Android：layout_marginStart	设置左外边距
Android：layout_marginTop	设置顶外边距

         在Android中，所有的UI界面都是View类、VieGroup类及其子类组合而成，在 VieGroup类中，除了包括普通的View类外，还可以再次包含VieGroup类 。实际上使用了composite（组合）的设计模式。

二  使用XML布局文件控制UI界面

          采用XM了文件进行界面布局，可以将布局文件代码和逻辑Java代码分离开，程序结构更加清晰，具体的步骤如下：

   （1）在Android应用的res/layout目录下创建XML布局文件，该布局文件可以采用任何符合Java命名规则的文件名。

   （2）在Activity中使用  setContentView（R.layout.activity_main）代码显示XML文件的文件名。   activity_main是XM了布局文件的文件名。

     例：使用XML布局文件实现游戏的开始界面。

布局文件activity_main的代码如下：

       在布局文件中，可以使用  android:background="@mipmap/bg"  来控窗体的背景图片；使用  android:layout_gravity="center"   控制Button组件在帧布局器中居中显示；android:textSize="18sp"控制字体的大小。android:textColor="#FFEB1C0D"控制字体颜色。在主活动中，也就是MainActivity中，应用setContentView()方法指定活动应用的布局文件，不过，Android studio 会自动在主活动的onCreate()方法中自动生成。

三 布局管理器

        在Android中，每个组件在窗体都有相应的位置和大小，在窗体中拜访各种组件时，很难进行判断。但是，布局管理器可以很方便的控制各个组件的位置和大小。布局管理器都均直接或者间接的继承ViewGroup。所有的布局管理器都可以当作容器使用，可以向布局管理器中添加多个UI组件，当然也可以将一个或者多个布局管理器嵌套到其他的布局管理器中。

1 相对布局管理器（RelativeLayout）

     相对布局管理器通过相对定位的方式让组件出现在布局的任何位置。Relativelayout支持的常见XML属性。

XML属性	描述
Android：gravity	用于设置布局管理中各个组件的对其方式
Android：ignoreGravity	用于指定哪个组件不受gravity属性的影响

    在相对布局管理器中，只有上面两个属性是不够的，为了更好的该布局管理器中各个子组件的布局分布，RelativeLayout提供了一个内部类 RelativeLayout.LayoutParams，通过该类提供了大量的XML属性，可以很好的控制相对布局管理器中哥组件的分布方式。

RelativeLayout.LayoutParams支持的XML属性如下：

XML属性	描述
Android：layout_above	其属性为其他UI组件的Id属性，用于指定该组件位于哪个组件的上方
Android：layout_below	其属性为其他UI组件的Id属性，用于指定该组件位于哪个组件的下方
Android：layout_toLeftOf	其属性为其他UI组件的Id属性，用于指定该组件位于哪个组件的左侧
Android：layout_toRightOf	其属性为其他UI组件的Id属性，用于指定该组件位于哪个组件的右侧
Android：layout_alignBottom	其属性为其他UI组件的Id属性，用于指定该组件与哪个组件的下边界对齐
Android：layout_alignLeft	其属性为其他UI组件的Id属性，用于指定该组件与哪个组件的左边界对齐
Android：layout_alignRighet	其属性为其他UI组件的Id属性，用于指定该组件与哪个组件的右边界对齐
Android：layout_alignTop	其属性为其他UI组件的Id属性，用于指定该组件与哪个组件的上边界对齐
Android：layout_alignParentBottom	其属性值为Boolean值，用于指定该组件是否与布局管理器底端对齐
Android：layout_alignParentLeft	其属性值为Boolean值，用于指定该组件是否与布局管理器左端对齐
Android：layout_alignParentRight	其属性值为Boolean值，用于指定该组件是否与布局管理器右端对齐
Android：layout_alignParentTop	其属性值为Boolean值，用于指定该组件是否与布局管理器顶端对齐
Android：layout_centerHorizontal	其属性值为Boolean值，用于指定该组件是否位于布局管理器水平居中的位置。
Android：layout_centerInParent	其属性值为Boolean值，用于指定该组件是否位于布局管理器的中央位置
Android：layout_centerVertical	其属性值为Boolean值，用于指定该组件是否位于布局管理器垂直居中的位置

    例：实现以下按钮的分布：

         

     

     2 线性布局管理器 (LinearLayout)

      线性布局管理器是将其放入的组件按照垂直或者水平方向来布局，也就是将放入其中的组件横向或者纵向排列，纵向排列为垂直线性管理器，横向排列为水平线性管理器。

   

XML属性	描述
Android：orientation	用于设置布局管理器内组件的排列方式，默认为Vertical，其中horizontal表示水平排列，vertical表示垂直排列。
Android：gravity	用于设置布局管理器内组件的显示位置，其中可选值为top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip_horizontal。这些属性可以同时指定，各属性之间用竖线隔开（竖线前后不能右空格）。
Android：Layout_width	用于设置该组件的基本宽度，其可选值有fill_parent  、match_parent ，都表示为与父容器相同。warp_content表示包裹其自身的内容。
Android：Layout_Height	用于设置该组件的基本高度，其可选值有fill_parent  、match_parent ，都表示为与父容器相同。warp_content表示包裹其自身的内容。
Android：Id	用于为当前组件指定一个Id属性，在Java代码中可以应用该属性单独引用该组件。为组件指定id属性后，在R.Java文件中，会自动派生一个对应的属性，在Java代码中可以使用findViewById()来获取他。
Android：background	为该组件设置背景，可以是颜色，也可以是图片，图片就是将其复制到drawable目录下。

     子组件在Linearlayout中的常用属性 。

XML属性	描述
Android：layout_gravity	用于设置组件在其父容器中的位置，其中可选值为top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip_horizontal。这些属性可以同时指定，各属性之间用竖线隔开（竖线前后不能右空格）。
Android：layout_weight	用于设置组件所占的权重，即用于设置组件占父容器剩余空间的比例，该属性的默认值为0，表示需要显示多大的视图就占多大的屏幕空间。但设置一个大于零的值时，则将父容器的剩余空间分割，分割大小取决与每个组件layout_weight的属性值。

例:设实现以下布局

 

3 帧布局管理器 (FrameLayout)

 在帧布局管理器中，每加入一个组件，都将创建一个空白的区域，通常称为一帧，这些帧都会放置到屏幕的左上角，即帧布局是从平米的左上角（0，0）坐标点开始布局，多个组件层叠排序，后面的组件会覆盖前面的组件。

XML属性	描述
Android：foreground	设置该帧布局容器的前景图片
Android：foregroundGravity	设置前景图片的gravity属性，即前景图片显示的位置

例：实现下图

     

4 表格布局管理器 （TableLayout）

       表格布局管理器与常见的表格类似，它以行、列的形式来管理放入的UI组件。在表格和布局管理器中可以添加多个标记，每个标记占用一行。由于标记也是容器，所以在该容器中还可以添加其他组件，在标记中，每添加以恶搞组件，表格就会增加一列。在布局管理器中，列可以被隐藏，也可以设置为可以伸展的，从而可以充分利用屏幕的空间，还可以强制收缩，直到表格匹配屏幕大小。

      如果在表格布局管理器中，直接向中添加UI组件，那么这个组件将独占一行。表格布局管理器继承与线性布局管理器，因此，他完全支持LinearLayout所支持的全部XML属性，除此之外：

XML属性	描述
Android：collapseColumns	设置需要被隐藏的列的列序号（序号从0开始），多个列序号之间用“，”分割
Android：shrinkColumns	设置允许被收缩的列的列序号（序号从0开始），多个列序号之间用“，”分割
Android：stretchColumns	设置允许被拉伸的列的列序号（序号从0开始），多个列序号之间用“，”分割

例：实现

  5  网络布局管理器（GridLayout）

       网络布局管理器，屏幕被虚拟的细线划分为行、列、单元格，每个单元格放置一个组件，并且这个组件可以跨行或者跨列摆放。网络布局管理器和表格布局管理器有些类似，都可以以行或者列的形式管理放入其中的组件，但是他们之间最大的不同就是网络布局管理器可以跨行显示组件，表格布局管理器不行。网格布局管理器支持的常用XML属性。

XML属性	描述
Android：columnCount	用于指定网格的最大列数
Android：orientation	用于没有为放入其中的组件分配行和列时，指定器排列方式，其属性值为horizotal表示水平排列，vertical为垂直排列。
Android：rowCount	用于指定网格的最大行数
Android：UseDefaultMargins	用于指定是否使用默认的边距，属性值为true或者false
Android：alignmentMode	用于指定该布局管理器采用的对齐模式。其属性为align Bounds时，表示对齐边界，值为alignmargins表示对齐边距。
Android：rowOrderPreserved	用于设置行边界显示的顺序和行索引的顺序是否相同，属性值为Boolean
Android：columnOrderPreserved	用于设置列边界显示的顺序和列索引的顺序是否相同，属性值为Boolean

    为了控制网格布局管理器中各个子组件的布局分布，网格布局管理器提供了Grid Layout.layoutParams内部类，在该类中提供了XML属性，来控制网络布局管理器中哥组件的布局分布。

    

XML属性	描述
Android：layout_culumn	用于指定该子组件位于网格的第几列
Android：layout_culumnSpan	用于指定该子组件横向跨几列（索引从0开始）
Android：layout_culumnWeight	用于指定该子组件在水平方向上的权重，即该子组件分配水平剩余空间的比例
Android：layout_gravity	用于指定该子组件采用什么方式占据该网格的空间，其中有top、bottom、left、right、center_vertical  fill_vertical  center_horizontal    fill_horizontal  centre、fill、end、start、clip_vertical
Android：layout_row	用于指定该子组件位于网格的第几行（索引从0开始）
Android：layout_rowSpan	用于指定该子组件纵向跨几行（索引从0开始）
Android：layout_rowWeight	用于指定该子组件在垂直方向上的权重，即该子组件分配水平剩余空间的比例

    在网络布局管理器中，如果想让某个组件跨行或者跨列，那么需要先通过Android：layout_culumnSpan、Android：layout_rowSpan设置跨越的行或者列数，然后设置其Android：layout_gravity属性为fill，表示该组件填满跨越的行或者列。