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

【ALearning】第四章 Android Layout组件布局(二)

时间:2017-07-13 21:57:47      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:absolute   wrap   pbm   center   bsp   odi   nts   art   androi   

       前面我们分别介绍和学习了LinearLayout(线性布局)、FrameLayout(单帧布局)和AbsoluteLayout(绝对布局)。这次我们要进行RelativeLayout(相对布局)和TableLayout(表格布局)的学习。

这部分是非常重要的知识点。RelativeLayout是开发过程中强烈建议使用的,而TableLayout是满足一些特定需求时(常见表格显示,但不局限于此)须要使用。

【博客专栏:http://blog.csdn.net/column/details/alearning.html

RelativeLayout(相对布局)

       前面介绍的LinearLayout(现象布局)与即将介绍的RelativeLayout(相对布局)。是实际开发中较常使用的,也是开发过程中强烈建议的使用。以下我们来開始了解RelativeLayout布局。
       相对布局。顾名思义就是以“相对”位置/对齐为基础的布局方式。


本例拓展的属性配置是:

  • android:id   指定该控件唯一标志的ID值;
  • android:layout_above    指定该控件的底部置于给定ID的控件之上;
  • android:layout_below    指定该控件的底部置于给定ID的控件之下;
  • android:layout_toLeftOf  指定该控件的右边缘与给定ID的控件左边缘对齐;
  • android:layout_toRightOf 指定该控件的左边缘与给定ID的控件右边缘对齐;
  • android:layout_alignBaseline 指定该控件的baseline与给定ID的baseline对齐;
  • android:layout_alignTop     指定该控件的顶部边缘与给定ID的顶部边缘对齐;
  • android:layout_alignBottom  指定该控件的底部边缘与给定ID的底部边缘对齐;
  • android:layout_alignLeft     指定该控件的左边缘与给定ID的左边缘对齐;
  • android:layout_alignRight    指定该控件的右边缘与给定ID的右边缘对齐;
  • android:layout_alignParentTop指定该控件的顶部与其父控件的顶部对齐;
  • android:layout_alignParentBottom 指定该控件的底部与其父控件的底部对齐;
  • android:layout_alignParentLeft    指定该控件的左部与其父控件的左部对齐;
  • android:layout_alignParentRight   指定该控件的右部与其父控件的右部对齐;
注:相对布局的属相设置较多,在实际的开发中须要不断的补充与拓展。
【布局文件】activity_relativelayout.xml
<?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:id="@+id/red" android:layout_width="70dp" android:layout_height="70dp" android:layout_centerInParent="true" android:background="#CD2E57" android:gravity="center" android:text="Red" /> <!-- 该控件的左边缘与给定id为red控件的左边缘对齐 --> <TextView android:layout_width="80dp" android:layout_height="80dp" android:layout_alignLeft="@id/red" android:background="#64DB99" android:gravity="center" android:text="Green" /> <!-- 该控件位于界面底部 同一时候 位于给定id为red控件的下边/右边(即右下位置) --> <TextView android:layout_width="50dp" android:layout_height="50dp" android:layout_below="@id/red" android:layout_centerInParent="true" android:layout_marginTop="20dp" android:layout_toRightOf="@id/red" android:background="#FFFA78" android:gravity="center" android:text="Yellow" /> <!-- 该控件位于给定id为red控件的左边 --> <TextView android:layout_width="60dp" android:layout_height="60dp" android:layout_alignParentBottom="true" android:layout_toLeftOf="@id/red" android:background="#148CFF" android:gravity="center" android:text="Blue" /> </RelativeLayout>


效果截图:
技术分享

TableLayout(表格布局)

       TableLayout表格布局,表格布局类似Html里面的Table。每个TableLayout里面有表格行TableRow(类似于Html中Table里的tr)。TableRow里面能够详细定义每个元素,比如TextView。设定他的对齐方式android:gravity="center"。


本例拓展的属性配置是:
  • android:stretchColumns    指定可伸展的列。该列能够向行方向伸展,最多可占领一整行。
  • android:shrinkColumns     指定可收缩的列。当该列子控件的内容太多。已经挤满所在行,那么该子控件的内容将往列方向显示。

  • android:collapseColumns  指定要隐藏的列。

演示样例:
android:stretchColumns="0"           第0列可伸展
android:shrinkColumns="1,2"         第1,2列皆可收缩
android:collapseColumns="*"         隐藏全部行
注:列能够同一时候具备stretchColumns及shrinkColumns属性。若此,那么当该列的内容N多时,将“多行”显示其内容。(这里不是真正的多行,而是系统依据须要自己主动调节该行的layout_height)。

  • android:layout_column    指定该单元格在第几列显示
  • android:layout_span      指定该单元格占领的列数(未指定时,为1)
演示样例:
android:layout_column="1"    该控件显示在第1列
android:layout_span="2"        该控件占领2列
说明:一个控件也能够同一时候具备这两个特性。

【布局文件】activity_relativelayout.xml。
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,1,2" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#6495ED"
            android:padding="2dp"
            android:text="文本1-1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#B0C4DE"
            android:padding="2dp"
            android:text="文本1-2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#32CD32"
            android:padding="2dp"
            android:text="文本1-3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#FFD700"
            android:padding="2dp"
            android:text="文本1-4" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_height="40dp"
            android:layout_column="1"
            android:layout_span="2"
            android:background="#FF8C00"
            android:text="跨列文本2-2,3跨2到3列" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_height="40dp"
            android:layout_column="0"
            android:layout_span="2"
            android:background="#FF69B4"
            android:text="跨列文本3-1,2跨1到2列" />
    </TableRow>

    <!--  -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="2" 
        android:shrinkColumns="1"
        android:stretchColumns="0" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:background="#696969" 
                android:textColor="@android:color/white"
                android:text="行方向伸展文本,可自行增长文本查看效果!" />

            <TextView 
                android:textColor="@android:color/white"
                android:background="#800000"
                android:text="列方向伸展文本,可自行增长文本查看效果!" />
        </TableRow>
    </TableLayout>

</TableLayout>

效果截图:
技术分享
        到此,基于XML配置的五种经常使用的布局。已经所有解说完毕。可是布局的设计方式不止一种,另一种是基于Java(Android)开发语言的设置。

这部分。将会在接下来的不断的学习中了解与使用。

敬请各位看官的继续关注。


參考资料

4、http://blog.sina.com.cn/s/blog_63c66eb60100u29p.html
5、http://blog.csdn.net/beyond0525/article/details/8841139

【ALearning】第四章 Android Layout组件布局(二)

标签:absolute   wrap   pbm   center   bsp   odi   nts   art   androi   

原文地址:http://www.cnblogs.com/llguanli/p/7162354.html

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