• Android之布局


    Android中的布局分为六种,分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局,良好的布局设计对UI界面至关重要,下面先来看看先相对布局。

    相对布局(RelativeLayout):

    在Eclipse中开发Android程序时,默认采用的就是相对布局。相对布局通常有两种形式,一种是相对于容器而言的,一种是相对于控件而言的,为了能准确定位布局中的控件,相对布局提供了很多属性。

    android:layout_centerHrizontal  水平居中
    android:layout_centerVertical    垂直居中
    android:layout_centerInparent  相对于父元素完全居中
      
    android:layout_alignParentBottom   贴紧父元素的下边缘
    android:layout_alignParentLeft        贴紧父元素的左边缘
    android:layout_alignParentRight      贴紧父元素的右边缘
    android:layout_alignParentTop        贴紧父元素的上边缘
    android:layout_alignWithParentIfMissing     如果对应的兄弟元素找不到的话就以父元素做参照物
    android:layout_below        在某元素的下方
    android:layout_above        在某元素的的上方
    android:layout_toLeftOf     在某元素的左边
    android:layout_toRightOf   在某元素的右边
      
    android:layout_alignTop       本元素的上边缘和某元素的的上边缘对齐
    android:layout_alignLeft       本元素的左边缘和某元素的的左边缘对齐
    android:layout_alignBottom  本元素的下边缘和某元素的的下边缘对齐
    android:layout_alignRight     本元素的右边缘和某元素的的右边缘对齐
      
    android:layout_marginBottom   离某元素底边缘的距离
    android:layout_marginLeft        离某元素左边缘的距离
    android:layout_marginRight      离某元素右边缘的距离
    android:layout_marginTop        离某元素上边缘的距离
    

      

    介绍的这些布局属性,我们经常会用到,下面来看看一个布局界面图感受数形结合感受一下:

    线性布局(LinearLayout):

    线性布局是Android中较为常用的布局方式,它使用<LinearLayout>标签表示。线性布局主要有两种形式,一种是水平线性布局,一种是垂直线性布局。

           

    表格布局(TableLayout):

    在表格布局TableLayout中,行数由TableRow对象控制的,即布局中有多少TableRow对象,就有多少行。每个TableRow中可以放置多个组件。列数由最宽的单元格决定,假如第一个TableRow有两个控件,第二个TableRow有三个控件,那这个TableLayout就有三列。在控件中通过android:layout_column属性指定具体的列数,该属性的值从“0”开始,表示第一列。下面看一个表格布局:

    布局中有一个三行三列的表格,也就是有三个TableRow对象。下面看一下表格布局对应的代码:

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

    网格布局(GirdLayout):

    网格布局是Android4.0新增的布局,它实现了控件的交错显示,能够避免因布局嵌套对设备性能的影响,更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元,并指定控件的显示区域和控件在该区域的显示方式,如图所示:

     网格布局中的控件可以很整齐的排列,并且可以控制每个控件所占的行数和列数。下面看一下网格布局对应的代码:

    <?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>

    上述代码中,可以看到有很多个Button,个别的Button按钮中包含一些属性,如android:layout_column表示该按钮在第几列,android:layout_rowSpan表示该控件占用几行,android:layout_columnSpan表示该控件占用几列。

    在这里要特别注意的是:由于GridLayout是Android4.0之后有的新功能,如果要在项目中使用这种布局,需要把SDK的最低版本指定为Android4.0(API14)以上,所以我们需要配置好SDK版本:

    <uses-sdk
         android:minSdkVersion="14"
         android:targetSdkVersion="17" />

    帧布局(FrameLayout):

    帧布局是Android布局中最简单的一种,帧布局为每个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧)。采用帧布局方式设计界面时,只能在屏幕左上角显示一个控件,如果添加多个控件,这些控件会按照顺序在屏幕的左上角重叠显示,且会透明显示之前控件的文本,如图所示:

    从图中可以看出,界面中添加了3个Button控件,Button1是最先添加的大按钮,Button2是接着添加的较小按钮,Button3是最后添加的小按钮,这三个控件叠加显示在屏幕的左上角。

    下面看一下帧布局对应的代码,具体如下:

    <?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):

    绝对布局需要通过指定x、y坐标来控制每一个组件的位置,放入该布局的组件需要通过android:layout_x和android:layout_y两个属性指定其准确的坐标值,并显示在屏幕上,布局如图所示:

    从图我们就可以看出,组件是以屏幕左上角为坐标原点,将Button1的坐标设置为(50,50),Button2的坐标设置为(200,150),根据这个坐标精确定位组件在屏幕中的位置,相对应的代码如下:

    <?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>

    上述代码中,Button控件的android:layout_x属性表示该控件在X坐标的第50dp像素上,android:layout_y属性表示控件在Y坐标的第50dp象素上,Button2也是通过这两个属性设置的控件位置。

    而我们需要注意的是,理论上绝对布局可以完成任何的布局设计,且灵活性很大,但是实际的工程应用中不提倡使用这种布局。因为使用这种布局不但需要精确计算每个组件的大小,而且当应用程序运行在不用屏幕的手机上产生的效果也不相同,因此,一般不推荐使用绝对布局。

    不努力,还要青春干什么?
  • 相关阅读:
    2-3 vue配置介绍
    2-2 vue环境搭建以及vue-cli使用
    2-1 nodejs和npm的安装和环境搭建
    Babel
    vue-resource使用 (vue仿百度搜索)
    Google浏览器清除缓存快捷键
    browsersync即时刷新页面
    【高可用HA】Apache (2) —— Mac下安装多个Apache Tomcat实例
    【高可用HA】Apache (1) —— Mac下安装Apache Httpd到自定义路径(非/etc/apache2)
    Apache CXF实现Web Service(5)—— GZIP使用
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/5532036.html
Copyright © 2020-2023  润新知