• 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,新的开始,加油!^_^


    附:参考《第一行代码》

  • 相关阅读:
    drf-通过drf-extensions扩展来实现缓存
    social_django第三方登录 没有token解决方法
    python-项目日志配置使用
    drf-支付宝支付
    git 相关命令
    django第三方登录与邮箱验证流程
    django项目部署
    数组中的方法
    滚动到页面底部,更新数据
    图片卷边
  • 原文地址:https://www.cnblogs.com/wuyida/p/6299966.html
Copyright © 2020-2023  润新知