Android UI——布局介绍

最新推荐文章于 2024-08-27 14:24:50 发布

bugyinyin

最新推荐文章于 2024-08-27 14:24:50 发布

阅读量246

点赞数

分类专栏： Android开发 Android Android Jetpack 文章标签： android ui java

本文链接：https://blog.csdn.net/bugyinyin/article/details/129422574

版权

Android 同时被 3 个专栏收录

210 篇文章 14 订阅

订阅专栏

Android开发

110 篇文章 13 订阅

订阅专栏

Android Jetpack

9 篇文章 4 订阅

订阅专栏

首先介绍常用布局类

FrameLayout 最简单的布局管理器。

这个布局管理类有几个特性：

添加组件默认在左上角的。
如果添加多个组件会叠加到一起，并且都在左上角。（可以通过一gravity属性改变叠加情况）
后添加的组件在上层。

LinearLayout LinearLayout通过垂直方向和水平方面进行布局的，LinearLayout允许每一个视图都有一个weight属性。
RelativeLayout RelativeLayout是相对于其他的组件和屏幕边缘布局的管理类。
GridLayout GridLayout是Android4.0引入的概念，网格的布局方式，及其灵活，可以减少嵌套布局方式。

1.定义布局

定义一个简单的XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android\="http://schemas.android.com/apk/res/android"
    xmlns:tools\="http://schemas.android.com/tools"
    android:orientation\="vertical"
    android:layout\_width\="fill\_parent"
    android:layout\_height\="fill\_parent"
    \>
<Button
    android:text\="xxx"
    android:layout\_width\="match\_parent"
    android:layout\_height\="wrap\_content"/>
</LinearLayout\>

定义了一个线性布局方式，方向是垂直方向的（通过android:orientation="vertical"属性控制）

这里有三个常量我们将进行详细讲解fill_parent,match_parent,wrap_content。

fill_parent 填满父类的View,Fragment,Activity的空间。
wrap_content 把视图大小设置为显示内容的最小尺寸。
match_parent 从Android 2.2开始fill_parent改名为match_parent。

用java代码实现布局

  LinearLayout layout = new LinearLayout(this);
  layout.setOrientation(LinearLayout.VERTICAL);

  Button button \= new Button(this);
  button.setText("xxx");
        
  int height = LinearLayout.LayoutParams.MATCH\_PARENT;
  int weight = LinearLayout.LayoutParams.WRAP\_CONTENT;
        
  layout.addView(button, new LinearLayout.LayoutParams(height, weight));
  setContentView(layout);

这个代码也比较简单，不做详细介绍了。

2.使用布局创建和设备无关的UI

1.LinearLayout(线性布局)

线性布局是最简单的布局之一，简单但是缺少了灵活性。

<LinearLayout xmlns:android\="http://schemas.android.com/apk/res/android"
                android:orientation\="horizontal"
                android:layout\_width\="match\_parent"
                android:layout\_height\="match\_parent"\>
    
    <Button
        android:layout\_width\="wrap\_content"
        android:layout\_height\="wrap\_content"
        android:text\="xx1"
        />
    <Button
        android:layout\_width\="wrap\_content"
        android:layout\_height\="wrap\_content"
        android:text\="xx2"
        />
  
　　<!--被嵌套的垂直LinearLayout布局-->
    <LinearLayout
        android:orientation\="vertical"
        android:layout\_width\="match\_parent"
        android:layout\_height\="match\_parent"\>
        <Button
            android:layout\_width\="wrap\_content"
            android:layout\_height\="wrap\_content"
            android:text\="xx3"/>
        <Button
            android:layout\_width\="wrap\_content"
            android:layout\_height\="wrap\_content"
            android:text\="xx4"/>
    </LinearLayout\>
</LinearLayout\>

效果下如图，这里有嵌套布局，一个水平布局的LinearLayout里面嵌套了一个竖直的LinearLayout布局方式。

请添加图片描述

2.RelativeLayout(相对布局)

RelativeLayout布局非常的灵活，主要针对边框和其他组件进行布局。

<RelativeLayout xmlns:android\="http://schemas.android.com/apk/res/android"
                android:layout\_width\="match\_parent"
                android:layout\_height\="match\_parent"\>
    <LinearLayout
        android:id\="@+id/buttonBar"
        android:layout\_alignParentBottom\="true"
        android:orientation\="horizontal"
        android:layout\_width\="match\_parent"
        android:layout\_height\="wrap\_content"\>

        <Button
            android:text\="xx1"
            android:layout\_width\="wrap\_content"
            android:layout\_height\="wrap\_content"/>
        <Button
            android:text\="xx2"
            android:layout\_width\="wrap\_content"
            android:layout\_height\="wrap\_content"/>
    </LinearLayout\>

    <Button
        android:text\="xx3"
        android:layout\_above\="@+id/buttonBar"
        android:layout\_alignParentLeft\="true"
        android:layout\_width\="wrap\_content"
        android:layout\_height\="wrap\_content"\>
    </Button\>
</RelativeLayout\>

效果图如下

讲几个属性，这个属性对相对布局非常重要

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_centerInparent 相当于layout_centerHrizontal和layout_centerVertical一起用是一个效果，如果同时设置android:layout_alignParentBottom和android:layout_alignParentTop会把控件拉长和父类一样，同样道理android:layout_alignParentLeft和android:layout_alignParentRight也一样拉长控件。

android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边

来个小总结

如果同时设置了android:layout_below和android:layout_above并且id指向的是同一个控件，这是控件会消失不见。如果同时设置了android:layout_below和android:layout_above指定不同的控件会把控件拉长。

android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

来个小总结

同样这样的布局方式也会有拉长的情况。

android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离

3.GridLayout(网格布局)

网格布局在Android3.0（API level 11）导入，是所有布局管理器中最灵活的一种。

<?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:alignmentMode\="alignMargins"
            android:orientation\="horizontal"
            android:columnOrderPreserved\="true"
            android:rowCount\="3"
            android:rowOrderPreserved\="true"
            android:columnCount\="4"\>

    <Button android:id\="@+id/xx1" android:text\="1" />
    <Button android:text\="2" android:layout\_column\="0" android:layout\_row\="2"/>
    <Button android:text\="3" android:layout\_rowSpan\="3" android:layout\_gravity\="fill"/>
    <Button android:text\="4"/>
    <Button android:text\="5"/>
    <Button android:text\="6"/>
    <Button android:text\="7"/>
    <Button android:text\="8"/>
    <Button android:text\="9"/>
    <Button android:text\="10"/>

</GridLayout\>

GridLayout下的属性

android:orientation 在GridLayout的根目录下，有两个属性horizontal和vertical顾名思义就是水平和竖直布局。
android:rowCount 网格的行数
android:columnCount 网格的列数

包含控件属性

android:layout_columnSpan 水平合并单元格
android:layout_rowSpan 竖直合并单元格
android:layout_gravity 有很多属性：fill,bottom 等等。

学习分享

在当下这个信息共享的时代，很多资源都可以在网络上找到，只取决于你愿不愿意找或是找的方法对不对了

很多朋友不是没有资料，大多都是有几十上百个G，但是杂乱无章，不知道怎么看从哪看起，甚至是看后就忘

如果大家觉得自己在网上找的资料非常杂乱、不成体系的话，我也分享一套给大家，比较系统，我平常自己也会经常研读。

七大模块学习资料：如NDK模块开发、Android框架体系架构…

只有系统，有方向的学习，才能在段时间内迅速提高自己的技术。

这份体系学习笔记，适应人群：
第一，学习知识比较碎片化，没有合理的学习路线与进阶方向。
第二，开发几年，不知道如何进阶更进一步，比较迷茫。
第三，到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。如果你有需要，我这里恰好有为什么，不来领取！说不定能改变你现在的状态呢！
由于文章内容比较多，篇幅不允许，部分未展示内容以截图方式展示。如有需要获取完整的资料文档的朋友扫描下方二维码免费获取。