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>

表格布局(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>

网格布局(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>

帧布局(FrameLayout):

帧布局是最简单的布局方式,所有添加到这个布局中的视图都是以层叠的方式显示,并且后声明的遮挡先声明的控件。

帧布局容器为每个加入其中的组件创建一个空白的区域(称为一帧),所有每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。

帧布局方式,说帧不太容易理解,可以说成是层布局方式,也就是说,在它内部的元素,是一层一层的叠加在一起的。如果用过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>


绝对布局(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>


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

posted on 2015-07-27 09:29  王老大-  阅读(232)  评论(0编辑  收藏  举报

导航