码迷,mamicode.com
首页 > 移动开发 > 详细

Android应用的界面编程(二)

时间:2016-04-26 22:01:08      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

第一组UI组件——以viewGroup为基类的布局管理器

Android的布局管理器本身就是一个UI组件,继承了View类,是ViewGroup的一个子类。
技术分享
从图可以看出来,所有布局都可以作为容器类使用,因此可以调用多个重载的方法addView()向布局容器添加组件。

1.线性布局

线性布局即LinearLayout,能将容器的组件一个挨着一个排列起来,可以控制横向排列还是纵向排列。当然,线性布局不会换行,当组件一个挨着一个排列到头之后,剩下的组件不会被显示出来

1.1LinearLayout常用XML属性及方法

XML属性 相关方法 说明
android:baselineAligned setBaselineAligned(boolean) 该属性值为fasle,将会阻止该布局管理器与它的子元素的基线对齐
android:divider setDividerDrawable(Drawable) 设置垂直布局时两个按钮之间的分隔条
android:gravity setGravity(int) 设置布局管理器内组件的对其方式
android:orientation setOrientation(int) 设置布局管理器内组件的排列方式

备注:

android:gravity——该属性值支持top、left、right、center_vertical、fill_vertivla、center_horizontal、fill_horizontal、fill,clip_vertical、clip_horizontal几个属性值。也可以同时制定多种对齐方式的组合,例如:left|center_vertical代表出现在屏幕的左边而且垂直居中

android:orientation——属性可以设置为horizontal(水平排列)、vertical(垂直排列)

1.2LinearLayout子组件支持的XML属性及方法

XML属性 相关方法 说明
android:layout_gravity 设置该元素在LinearLayout中的对齐方式
android:layout_weight 设置该元素在LinearLayout中所占的权重

1.3线性布局实例

技术分享

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<Button 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮1"
    />

<Button 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮2"
    />
<Button 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮3"
    />
<Button 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮4"
    />
</LinearLayout>

2.表格布局

表格布局继承了线性布局,所以本质上还是线性布局。TableLayout不需要明确的说出有多少行多少列,而是通过添加TableRow、其他组件来控制行数和列数。

每次向TableLayout添加一个TableRow,即添加一行,TableRow也是容器,可以在里面添加其他组件,每添加一个组件该表格就增加一列。如果直接在TableLayout中添加组件,这个组件就直接占一行。

2.1TableLayout常用的XML属性及相关方法

XML属性 相关方法 说明
android:collapsColumns setColumnCollapsd(int,boolean) 设置需要被隐藏的列的序号,多个序号之间用逗号隔开
android:shrinkColumns setColumnCollapsd(int,boolean) 设置需要被收缩的列的序号,多个序号之间用逗号隔开
android:stretchColumns setColumnCollapsd(int,boolean) 设置需要被拉伸的列的序号,多个序号之间用逗号隔开

2.2表格布局实例

技术分享

<?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">
    <!--定义表格文件,指定第二例允许收缩,,第三列循序拉伸-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="占一行的按钮"/>

        <TableRow>
            <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="收缩的按钮"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
        </TableRow>
    </TableLayout>
    <!--定义第二个表格文件,制定第二列隐藏-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="占一行的按钮"/>
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通的按钮1"/> <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="隐藏的按钮2"/> <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="普通的按钮3"/>
        </TableRow>

    </TableLayout>
    <!--定义第三个表格文件,指定第二列和第三列可以被拉伸-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="占一行的按钮"/>
        <TableRow>
            <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="拉伸的按钮"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
        </TableRow>
        <TableRow>
            <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>
    </TableLayout>
</LinearLayout>

3.相对布局

相对布局(RelativeLayout)中,所有组件的位置总是相对兄弟组件、容器来决定。

3.1RelativeLayout常用XML属性及方法

XML属性 相关方法 说明
android:gravity setGravity(int) 设置布局容器内子组件的对其方式
android:ignoreGravity setIgnoreGravity(int) 设置哪个组件不受gravity属性的影响

3.2RelativeLayout子组件支持的XML属性及方法

XML属性 说明
android:layout_centerHorizontal 控制该子组件是否位于布局容器的水平居中
android:layout_centerVertical 控制该子组件是否位于布局容器的垂直居中
android:layout_centerInParent 控制该子组件是否位于布局容器的中央位置
android:layout_alignParentBottom 控制该子组件是否与布局容器的底端对齐
android:layout_alignParentLeft 控制该子组件是否与布局容器的左端对齐
android:layout_alignParentRight 控制该子组件是否与布局容器的右端对齐
android:layout_alignParentTop 控制该子组件是否与布局容器的顶端对齐
android:layout_toRightOf 控制该子组件位于给出ID组件的右侧
android:layout_toLeftOf 控制该子组件位于给出ID组件的左侧
android:layout_above 控制该子组件位于给出ID组件的上方
android:layout_below 控制该子组件位于给出ID组件的下方
android:layout_alignTop 控制该子组件位于给出ID组件的上边界对齐
android:layout_alignBottom 控制该子组件位于给出ID组件的下边界对齐
android:layout_alignLeft 控制该子组件位于给出ID组件的左边界对齐
android:layout_alignRight 控制该子组件位于给出ID组件的右边界对齐

3.3相对布局实例

技术分享

<?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">
<TextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/view01"
    android:background="@drawable/feiji"
    android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/view02"
        android:background="@drawable/feiji"
        android:layout_above="@id/view01"
        android:layout_alignLeft="@id/view01"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/view03"
        android:background="@drawable/feiji"
        android:layout_below="@id/view01"
        android:layout_alignLeft="@id/view01"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/view04"
        android:background="@drawable/feiji"
        android:layout_toLeftOf="@id/view01"
        android:layout_alignBottom="@id/view01"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/view05"
        android:background="@drawable/feiji"
        android:layout_toRightOf="@id/view01"
        android:layout_alignTop="@id/view01"/>
</RelativeLayout>

4.帧布局

帧布局(FrameLayout)中,为每个加入其中的组件创建一个空白的区域(称为一帧),每个子组件占一帧,这些帧会根据gravity属性自动对齐。帧布局中,每个组件是一个个的叠加在一起的。

4.1FrameLayout常用的属性及方法

XML属性 相关方法 说明
android:foreground setForeGround(Drawable) 设置该帧布局的前景图
android:foregroundGravity setForeGroundGravity(int) 设置前景图的gravity属性

4.2帧布局实例

技术分享

<?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">
<TextView
    android:id="@+id/view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="320dp"
    android:height="320dp"
    android:background="#f00"
    />
    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="280dp"
        android:height="280dp"
        android:background="#0f0"
        />
    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="240dp"
        android:height="240dp"
        android:background="#00f"
        />
    <TextView
        android:id="@+id/view4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="200dp"
        android:height="200dp"
        android:background="#ff0"
        />
    <TextView
        android:id="@+id/view5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="160dp"
        android:height="160dp"
        android:background="#f0f"
        />
    <TextView
        android:id="@+id/view6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="120dp"
        android:height="120dp"
        android:background="#0ff"
        />
</FrameLayout>

5.网格布局

网格布局(GridLayout)是Android4.0后新增的布局管理器,类似于HTML里面的table标签,他可以把整个布局划分n*m的网格。也可以设置一个组件横跨多少行多少列。

5.1FrameLayout常用的属性及方法

XML属性 相关方法 说明
android:alignmentMode setAlignmentMode(int) 设置该布局管理器采用的对齐模式
android:columnCount setColumnCount(int) 设置该网格的列数
android:columnOderPreserved setColumnOderPreserved(boolean) 设置该网格容器是否保留列序号
android:rowCount setRowCount(int) 设置该网格的行数
android:rowOderPreserved setRowOderPreserved(boolean) 设置该网格容器是否保留行序号
android:useDefaultMargins setUseDefaultMargins(boolean) 设置该网格布局是否使用默认的页边距

5.2GridLayout子组件支持的XML属性及方法

XML属性 相关方法 说明
android:layout_column 设置该子组件在GridLayout的第几列
android:layout_columnSpan 设置该子组件在GridLayout横向跨几列
android:layout_gravity setGravity(int) 设置该子组件以什么方式占据网格空间
android:layout_row 设置该子组件在GridLayout的第几行
android:layout_rowSpan 设置该子组件在GridLayout纵向跨几行

5.3网格布局实例


6.绝对布局

绝对布局(AbsoluteLayout)在大多数不赞成使用,因为支持Android应用的手机千差万别,屏幕大小分辨率都不一样,使用绝对布局很难控制组件的位置。这里只做一个简单的介绍

layout_x:指定该组件的X坐标
layout_y:指定该组件的Y坐标

Android应用的界面编程(二)

标签:

原文地址:http://blog.csdn.net/sinnamm/article/details/51226147

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!