Android 常用布局 介绍与使用

最新推荐文章于 2024-03-24 05:13:37 发布
最新推荐文章于 2024-03-24 05:13:37 发布
阅读量111 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5caec612e51d456e4514f524
版权

读前思考

学习一门技术或者看一篇文章最好的方式就是带着问题去学习，这样才能在过程中有茅塞顿开、灯火阑珊的感觉，记忆也会更深刻。

  1. 有哪些常用的布局？
  2. 每一种布局有何特点与不同？
  3. 布局上如何优化？

1. 约束布局 ConstraintLayout

ConstraintLayout 是 Android Studio 2.2 中主要的新增功能之一，ConstraintLayout 使用约束的方式来指定各个控件的位置和关系的，它有点类似于 RelativeLayout，但远比 RelativeLayout 要更强大，它可以有效地解决布局嵌套过多的问题。

本文主要讲解通过 xml 的编写实现 ConstraintLayout，如果想要了解拖拽方式，可参考 Android新特性介绍，ConstraintLayout完全解析

1. 首先用 ConstraintLayout 实现置顶，高自适应，宽 match_parent
<TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="姓名"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
    />
复制代码

实现效果图

2. 实现一个控件在另一个控件下方
<TextView
        android:id="@+id/tv_mobile"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:text="手机号"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_name"
    />
复制代码

实现效果图

3. 实现控件上下左右居中显示
<TextView
        android:id="@+id/tv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="年龄"
        android:gravity="center"
        android:textSize="30sp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
    />
复制代码

实现效果

  1. 通过布局权重，实现百分比布局
<TextView
        android:id="@+id/tab0"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="tab1"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab1" />

    <TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab2"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab0"
        app:layout_constraintRight_toLeftOf="@+id/tab2"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintHorizontal_weight="1"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab1"
        app:layout_constraintRight_toLeftOf="@id/tab3"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab4"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab2"
        app:layout_constraintRight_toLeftOf="@+id/tab4"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/tab4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="tab5"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tab0" />
复制代码

实现效果图

2. 线性布局 LinearLayout

线性布局是按照水平或垂直的顺序将子元素(可以是控件或布局)依次按照顺序排列，每一个元素都位于前面一个元素之后。线性布局分为两种：水平方向和垂直方向的布局。分别通过属性 android:orientation="vertical" 和 android:orientation="horizontal" 来设置。 android:layout_weight 表示子元素占据的空间大小的比例。

接下来我们来实现如下效果

具体代码实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <EditText
            android:id="@+id/msg"
            android:inputType="number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="">
        </EditText>
    </LinearLayout>

    // 第二行为 mc m+ m- mr 四个Button构成一个水平布局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mc" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="m+" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="m-" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mr" android:layout_weight="1">
        </Button>
    </LinearLayout>

</LinearLayout>
复制代码

3. 相对布局 RelativeLayout

RelativeLayout 继承于 android.widget.ViewGroup，其按照子元素之间的位置关系完成布局的，作为 Android 系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。

接下来我们来实现如下效果

具体代码如下

<?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">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:text="Button1"
    />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn1"
        android:layout_toLeftOf="@id/btn1"
        android:text="Button2"
    />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn1"
        android:layout_toRightOf="@id/btn1"
        android:text="Button3"
    />
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn2"
        android:layout_toLeftOf="@id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button4"
    />

</RelativeLayout>
复制代码

由于我在项目中很少使用下面的布局，就不过多介绍了

4. 表格布局 TableLayout

表格布局，适用于多行多列的布局格式，每个 TableLayout 是由多个 TableRow 组成，一个 TableRow 就表示 TableLayout 中的每一行，这一行可以由多个子元素组成。实际上 TableLayout 和 TableRow 都是 LineLayout 线性布局的子类。但是 TableRow 的参数 android:orientation 属性值固定为 horizontal，且 android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT。所以 TableRow 实际是一个横向的线性布局，且所以子元素宽度和高度一致。

5. 框架布局 FrameLayout

FrameLayout 是最简单的布局了。所有放在布局里的控件，都按照层次堆叠在屏幕的左上角。后加进来的控件覆盖前面的控件。 在 FrameLayout 布局里，定义任何空间的位置相关的属性都毫无意义。控件自动的堆放在左上角，根本不听你的控制。但是控件本身是可以控制自己内部的布局的。

6. AbsoluteLayou 绝对布局

绝对布局中将所有的子元素通过设置 android:layout_x 和 android:layout_y 属性，将子元素的坐标位置固定下来，即坐标 (android:layout_x, android:layout_y) ，layout_x 用来表示横坐标，layout_y 用来表示纵坐标。屏幕左上角为坐标 (0,0)，横向往右为正方，纵向往下为正方。实际应用中，这种布局用的比较少，因为 Android 终端一般机型比较多，各自的屏幕大小。分辨率等可能都不一样，如果用绝对布局，可能导致在有的终端上显示不全等。

布局优化

  1. 使用 include 标签加载重复布局
  2. 使用 merge 标签减少布局嵌套
  3. 使用 ViewStub 动态控制布局显示

由于篇幅问题就不对上述做具体实例，自己可以尝试着实现。

文章已经读到末尾了，不知道最初的几个问题你都会了吗？如果不会的话？可以再针对不会的问题进行精读哦！答案都在文中，相信你肯定可以解决的！

转载于:https://juejin.im/post/5caec612e51d456e4514f524

Android 常用布局介绍
陈Sir的博客
08-04 3829
Android 常用布局简单介绍
Android系统常用五大布局及使用
tianlijuan111的博客
10-11 452
我们都知道一个丰富的界面是要有很多控件组成的，那么我们如何让各个控件都有条不紊地摆放在界面上呢？而不是乱糟糟的呢？这就需要借助于布局来实现了。布局就是对界面结构的全面规划与安排，从而编写出精美的界面。 那么本篇文章，我们自然要将重点放在布局的种类、属性、添加布局的方式以及如何使用上面了，那我们就开始吧！ 添加布局的方式 利用XML文件设计 使用Java代码添加 五大常用布局...
Android中两种常用布局
qq_41588244的博客
01-14 353
安卓虽然不止这两大布局，但是其他的不如这两大布局用的多，目前安卓常用的两种布局分别为：线性布局（LinearLayout）和 相对布局 （RelativeLayout），下面给大家介绍下 线性布局 ：LinearLayout 相对布局，顾名思义就是里面的组件是按照各个组件的相对位置来确定的。如A在B的上、下、左、右等方向显示。相对布局中的控件如果不设置好，是会出现控件的重叠的。
android布局及常见布局属性
houhj168的专栏
02-01 363
android布局方式 Android对用五大布局对象 FrameLayout  LinearLayout  RelativeLayout  TableLayout  AbsoluteLayout FrameLayout FrameLayout是最简单的一个布局对象。 它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象  比如，一张你要发布的图片。所有的子元素将
Android中常见的五种布局及特点
12november的博客
03-28 8571
android常用布局介绍
06-07
关于安卓常用布局的介绍，在其他网站上找到的，自己也没看懂，当然你们会有人懂得
android常用布局的使用
05-29
本文将深入探讨Android中常见的几种布局及其使用方法，以帮助开发者更好地构建美观且功能丰富的应用程序。 一、线性布局（LinearLayout） 线性布局是最基础的布局类型，它按照垂直或水平方向将子视图排列。通过设置...
基于android布局中的常用占位符介绍
01-05
大家在做布局文件是肯定会遇到过下面的这种情况 填充出现问题，所以需要用到占位符规范填充 汉字常用占位符： <TextView nandroid:layout_width=wrap_content android:layout_height wrap_content android:text=...
基于Android代码实现常用布局
09-03
本文将详细介绍如何使用Java代码实现Android的常用布局。 1. **线性布局（LinearLayout）** 线性布局按照垂直或水平方向排列子视图。在代码中创建线性布局，我们需要创建`LinearLayout`对象，并设置其方向、添加子...
分享五种Android常用布局方式
09-03
Android布局是应用界面开发的重要一环，在Android中，共有五种布局方式，分别是：FrameLayout（框架布局），LinearLayout （线性布局），AbsoluteLayout（绝对布局），RelativeLayout（相对布局），TableLayout...
android常用布局的介绍源码
05-07
包括线性布局（LinearLayout）、相对布局（RelativeLayout）、帧布局（FrameLayout）、网格布局（GridLayout）以及约束布局（ConstraintLayout），并结合"老罗android视频-android常用布局的介绍源码"提供的实践示例...
Android六大基本布局详解
热门推荐
wenzhi的博客
09-27 3万+
本文对Android的六大基本布局做详细的介绍和代码的示例。
自定义View(三)--实现一个简单地流式布局
weixin_30678821的博客
09-06 73
　　Android中的流式布局也就是常说的瀑布流很是常见，不仅在很多项目中都能见到，而且面试中也有很多面试官问道，那么什么是流式布局呢？简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候，则自动将控件填充到下一行中，如一些关键字的标签，热搜词列表等位置出现的比较多。而且控件的类型可以摆放不同的，如一行中可以放置TextView，或者是ImageView，布局应该根据行中最大宽度来自动确定自...
Android基础篇（一）屏幕，文本，图形，控件
时光老了好少年丶
05-28 2455
关于显示单位白话解释： 所谓的屏幕大小 是指屏幕对角线长度，单位英寸，如：5英寸 屏幕的宽/高（px像素） dpi Dots Per Inch（每英寸所打印的点数），也就是当设备的dpi为160的时候1px=1dp； ppi 每英寸的像素数（也被称为图像的采样率）。关于颜色Android中颜色值的定义是由透明度alpha和RGB(红绿蓝)三原色来定义的，有八位(依次为透明度红黄蓝)十六进
Android中几种常用布局方式的说明
02-26 535
下面链接中的文章说的很详细，值得参考。 http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html http://www.cnblogs.com/wisekingokok/archive/2011/08/24/2152004.html
Android开发 - 掌握ConstraintLayout（十）按比例设置视图大小
weixin_33755557的博客
12-04 805
有时候在布局界面的时候，UI要求某个View或者某张图片按比例显示，以适应不同的屏幕分辨率。 通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout，它本身就支持这样的按比例设置View大小的功能。 下面我们来介绍如何使用： 首先我们在布局中添加一个View： 此时，没有添加任何约束，显示的比例就是原始图片的比例。 添加水平方向的约束：...
android常用布局详解
最新发布
2401_83641533的博客
03-24 1017
现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！绝对布局也叫坐标布局，指定控件的绝对位置，简单直接，直观性强，但是手机屏幕尺寸差别较大，适应性差，Android 1.5已弃用，可以用RelativeLayout替代。权重，用来分配当前控件在剩余空间的大小，如果你不设置，所有的视图都有一个layout_weight值，默认为零，意思是需要显示多大的视图就占据多大的屏幕空间。
Android 线性布局介绍和使用
2201_75440944的博客
03-18 1079
线性布局（LinearLayout）是 Android 中最基本的布局之一，用于在界面上按照水平或垂直方向依次排列子视图。它是一种简单而灵活的布局方式，适用于许多应用场景，如列表项、工具栏、表单等等。在 Android 开发中，了解和熟练运用线性布局是至关重要的。通过合理地组织和设计线性布局，可以实现清晰、易读、美观的用户界面，并且在不同屏幕尺寸和设备方向下保持良好的适配性。本文将介绍线性布局的基本概念、属性和常见用法，帮助开发者快速上手并灵活运用线性布局来构建 Android 应用界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值