Android开发学习之路--UI之基本布局

    上一篇文章中主要介绍了ui的控件,这里就学习下布局吧。android的基本布局在layout下主要如图:


    从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),TableLayout(表格布局),RelativeLayout(相对布局),GridLayout(网格布局)等。具体的布局样式,在上图中也可以简单地看出来。

    这里先介绍下android的View,ViewGroup,Layout。

    1、View:代表了用户界面的一块可绘制区域。每个View在屏幕上占据一个矩形区域。在这个区域内,View对象负责图形绘制和事件处理。View是小控件widgets和ViewGroup的父类。

    2、ViewGroup:ViewGroup是一个特殊的View对象,其功能是装载和管理一组View和ViewGroup。它是一组容器,允许控件放置其中,并提供对控件的管理。

    3、Layout:即使上面讲的布局,它是ViewGroup的子类。

    如下图,一个容器可以放置和管理多个容器和控件,其中可以把VIewGroup看作布局,View看作控件即可。


    基本上了解了布局和控件的关系,那么就来一个一个地学习下了。

    1、LinearLayout(线性布局):控件成线性排列,水平或者垂直方向上。还是来个例子吧,新建LayoutTest工程,并且修改代码如下:


    其中android:orientation表示的就是水平还是垂直排列,这里是垂直:vertical,那么水平就是:horizontal了。如下图:


    接着看一下android:layout_gravity属性,不过只有在horizontal的时候才可以在垂直方向上有效,同样vertical的时候在水平方向上有效,修改各个button的这个属性,分别为top,center,和bottom,运行效果如下:

 

    接着学习android:layout_weight属性,这个主要是控制控件比例大小的,比如有一个EditText用来输入内容,一个button用来发送,那么一般button包含了Send内容后,其余的都是由EditText来填充了,修改代码如下: 

    这里是比例1:0,也就是button在send这个字被包含了除外的地方都是edit_text的,如果比例为1:1,那么如下图所示,平分width:


    

    2、RelativeLayout(相对布局):通过相对定位的方式让控件出现在布局的任何位置。也就是前面我们学习的所有都是基于相对布局的。相信有些属性也有所了解了,这里再讲解下。这里编写5个button,分别位于左上,右上,中间,左下,右下,代码如下:

<?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"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" />

    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" />

    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/>

    <Button
        android:id="@+id/button5"
        android:text="Button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>
    效果如下:

    由上述代码可知,android:layout_alignParentLeft,android:layout_alignParentRight,android:layout_alignParentBottom,android:layout_centerInParent这么几个属性,其实也很好理解,就是在父view的左边,右边,下面,中间,当然还有Top了,这里默认是Top的。

    当然这些都是相对于父view的,那么控件也是可以相对于控件的,这里都相对于center的button,代码如下:

<?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"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"/>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button
        android:id="@+id/button5"
        android:text="Button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"/>

</RelativeLayout>

    效果如下所示:


    其实相对的布局还是比较容易理解的,就是相对于一个控件或者View的位置,有左,右,上,下之分,只要ui设计好了,就可以充分利用了。


    3、FrameLayout(单帧布局):这个用得比较少,是后面的控件覆盖前面的空间。


    4、TableLayout(表格布局):用表格的方式来排列控件,表格当然有行列之分,应该尽量让每一行拥有相同的列数,这样比较简单,下面看一个登陆界面的例子:

<?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:orientation="horizontal">

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="用户名"/>
        <EditText
            android:id="@+id/Account"
            android:layout_height="wrap_content"
            android:hint="请输入用户名"/>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="密码"/>
        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:hint="请输入密码"/>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/login"
            android:text="登陆"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>


</TableLayout>

    效果如下:


    从代码可以得之,TableLayout是由很多的TableRow组成,每一个TableRow表示一行,这一行可以有许多的子元素控件组成,从上图可知,这里分了3行,两列。其中android:layout_span表示登陆按钮占了两列,所以可以和1、2两行对齐。这里明显看出来右边还有很多的空余空间,显得格格不入,所以这里可以使用android:stretchColumns 属性,该属性表示的是如果表格不能占满控件,那么指定的那列拉伸到占满表格为止。修改代码添加android:stretchColumns=1,表示把第2列拉伸,代码如下:

<?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="1">

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="用户名"/>
        <EditText
            android:id="@+id/Account"
            android:layout_height="wrap_content"
            android:hint="请输入用户名"/>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="密码"/>
        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:hint="请输入密码"/>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/login"
            android:text="登陆"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>


</TableLayout>
效果如下所示:


    这样,基本上登陆界面就很漂亮了。

    关于布局基本上就这些了,匆匆写完这篇文章,然后整理东西,准备回家了。明天就是年三十了,新的一年希望可以把android学习完,然后再写几个app,多钻研设计模式,架构,android源码,以及linux。好了,今年的博客基本上到此结束了。

    2016,新的开始,加油!^_^


附:参考《第一行代码》

原文地址:https://www.cnblogs.com/wuyida/p/6299966.html