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

于 2021-04-22 10:32:39 发布
阅读量566 收藏
点赞数 1
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45519487/article/details/115917503
版权

一 用户界面相关的概念

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

1 View

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

XML属性方法描述
Android:backgroundsetBackGroundResource（int）设置背景，其属性为Drawable资源或者颜色值
Android:elevationsetelevation(float)Android API 21新添加的属性，用于设置Z轴的深度，其属性为带单位的有效浮点数。
Android:clickablesetclickable（Boolean）设置是否响应单击事件，其属性为Boolean类型的true或false
Android:focusablesetFocusable设置是否可以获取焦点，其属性为Boolean类型的true或false
Android：idsetID (int)设置组件的唯一标识ID，可以通过find View ById()方法获取
Android：LongclickablesetLongclickable（Boolean）设置是否响应长击事件，其属性为Boolean类型的true或false
Android：minHeightsetMiniumHeight(int)设置最小高度，其属性为带单位的整数。
Android：minWidthsetMiniumWidth(int)

设置最小宽度，其属性为带单位的整数。

Android：onclick 设置单击触发事件的方法
Android：paddingsetPaddingRelative(int,int,int,int)设置4个边的内边距
Android：paddingBottomsetPaddingRelative(int,int,int,int)设置底边的内边距
Android：paddingEndsetPaddingRelative(int,int,int,int)设置右边的内边距
Android：paddingLeftsetPadding(int,int,int,int)设置左边的内边距
Android：paddingRightsetPadding(int,int,int,int)设置右边的内边距
Android：paddingStartsetPaddingRelative(int,int,int,int)设置左边的内边距
Android：paddingTopsetPaddingRelative(int,int,int,int)设置顶边的内边距
Android：visibilitysetVisility(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的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="16dp"
    android:paddingTop="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:background="@mipmap/bg"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="18sp"
        android:textColor="#FFEB1C0D"
        android:text="开始游戏"/>

</FrameLayout>

       在布局文件中，可以使用  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值，用于指定该组件是否位于布局管理器垂直居中的位置

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

         

     

<?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"
    android:paddingRight="16dp"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/name1"/>
    <Button
    android:id="@+id/b2"
    android:layout_toRightOf="@+id/b1"
    android:layout_centerVertical="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/name2"/>
    <Button
        android:id="@+id/b3"
        android:layout_toLeftOf="@+id/b1"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name2"/>

    <Button
        android:id="@+id/b4"
        android:layout_above="@+id/b1"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name4"/>
    <Button
        android:id="@+id/b5"
        android:layout_below="@+id/b1"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name5"/>
    
</RelativeLayout>

     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的属性值。

例:设实现以下布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingTop="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:text="账号"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:text="密码"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:text="登录"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="忘记密码"/>
</LinearLayout>

3 帧布局管理器 (FrameLayout)

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

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

例：实现下图

     

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="16dp"
    android:paddingRight="16dp"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:foreground="@mipmap/unnamed"
    android:foregroundGravity="right|bottom"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:layout_gravity="center"
        android:background="#FF0000FF"
        android:textColor="#FFFFFF"
        android:text="蓝色的"
         />
    <TextView
        android:layout_width="230dp"
        android:layout_height="230dp"
        android:layout_gravity="center"
        android:background="#FF0077FF"
        android:textColor="#FFFFFF"
        android:text="天蓝色的"
        />
    <TextView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"
    android:background="#FF00B4FF"
    android:textColor="#FFFFFF"
    android:text="水蓝色的"
    />

    </FrameLayout>

4 表格布局管理器 （TableLayout）

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

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

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

例：实现

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:background="@mipmap/bb"
    android:stretchColumns="0，3"
    tools:context=".MainActivity">
    <!--第1行-->
   <TableRow
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:paddingTop="200dp">
       <TextView/>
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="18sp"
           android:text="账号"
           android:gravity="center_horizontal"
           />
       <EditText
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="邮箱或者手机号"
           />
   </TableRow>
    <!--第2行-->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="20dp">
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="密码"
            android:gravity="center_horizontal"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="16位密码"
            />
    </TableRow>
    <!--第3行-->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView/>
        <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>
    <!--第4行-->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="20dp">
        <TextView/>
        <TextView />
        <TextView
            android:text="忘记密码"
            android:gravity="right"/>
        <TextView />
    </TableRow>

</TableLayout>

  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，表示该组件填满跨越的行或者列。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:paddingTop="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    android:background="@mipmap/bb"
    android:columnCount="6"
    tools:context=".MainActivity">

     <ImageView
         android:id="@+id/image1"
         android:src="@mipmap/tq"
         android:layout_gravity="end"
         android:layout_columnSpan="4"
         android:layout_column="1"
         android:layout_row="0"
         android:layout_marginRight="5dp"
         android:layout_marginBottom="20dp"
         />
    <ImageView
        android:id="@+id/image2"
        android:src="@mipmap/bg"
        android:layout_column="5"
        android:layout_row="0"/>

    <ImageView
        android:id="@+id/image3"
        android:src="@mipmap/bg"
        android:layout_column="0"
        android:layout_row="1"/>
    <ImageView
        android:id="@+id/image4"
        android:src="@mipmap/tq"
        android:layout_row="1"/>
</GridLayout>

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值