Android 暑期巩固与进阶——布局篇

2 布局

*经常用的那几个就较为详细展开

2.1 约束布局ConstraintLayout

2.1.1 介绍

约束布局很方便灵活地去调整控件的位置，是俺很喜欢的一种布局。从 Android Studio 2.3 起，官方的模板默认使用约束布局。

2.1.2 基本属性

推荐博客：(14条消息) android ConstraintLayout 约束布局笔记这一篇就够了layout_constraintwidth_percent朱良浩的博客-CSDN博客

1. layout_constraintLeft_toLeftOf
   当前View的右侧和另一个View的右侧位置对齐
   与RelativeLayout的alignLeft属性相似
2. layout_constraintLeft_toRightOf 
   当前view的左侧会在另一个View的右侧位置
   与RelativeLayout的toRightOf属性相似
3. layout_constraintRight_toLeftOf 
   当前view的右侧会在另一个View的左侧位置 
   与RelativeLayout的toLeftOf属性相似
4. layout_constraintRight_toRightOf 
   当前View的右侧和另一个View的右侧位置对其
   与RelativeLayout的alignRight属性相似
5. layout_constraintTop_toTopOf 
   头部对齐，与alignTop相似
6. layout_constraintTop_toBottomOf 
   当前View在另一个View的下侧 与below相似
7. layout_constraintBottom_toTopOf 
   当前View在另一个View的上方 与above相似
8. layout_constraintBottom_toBottomOf 
   底部对齐，与alignBottom属性相似
9. layout_constraintBaseline_toBaselineOf 
   文字底部对齐,与alignBaseLine属性相似
10. layout_constraintStart_toEndOf 
   同left_toRightOf
11. layout_constraintStart_toStartOf 
   同left_toLeftOf
12. layout_constraintEnd_toStartOf 
   同right_toLeftOf
13. layout_constraintEnd_toEndOf 
   同right_toRightOf

之前没有使用过的角度定位：

<!--必要的这三个属性-->
app:layout_constraintCircle="@id/tv_littlePanda"
app:layout_constraintCircleAngle="315"
app:layout_constraintCircleRadius="80dp"

第一个是设置该控件对应的圆心

第二个设置相对偏移角度

第三个设置距圆心距离，半径    示例：（0 45 90 135 180 225 20 315 半径80dp）

 

2.1.3 调整控件

约束布局首先要给控件加约束的边界，做好约束之后，你可以直接在design那里去拖动（这就是我为啥很喜欢约束布局的原因，少写很多代码）。控件之间的相对定位也可以通过这里，不用代码也行

 

我们可以设置辅助线（Guideline）来帮助约束，帮助定位控件，并不会显示在界面上

 

然后点击辅助线旁边那个有三角形的图标，可以切换辅助性的相对性，就是可以切换成距离底部多少具体数值(layout_constraintGuide_end)，或者屏幕的占比多少(layout_constraintGuide_percent)，距离顶部多少具体数值(layout_constraintGuide_begin)，我们一般看根据设计图来确定。

2.2 线性布局LinearLayout

2.2.1 介绍

LinearLayout又称作线性布局，是一种常用的布局。正如它的名字所描述的一样，这个布局会将它所包含的控件在线性方向上依次排列。

2.2.2 常用属性

2.2.2.1 orientation 设置线性布局是水平排列或是垂直排列

android:orientation=""

orientatio设置成为horizontal控件将从左往右排列，设置成为vertical控件将从上往下排列。

2.2.2.2 padding设置边距

类似的还有paddingTop, paddingBottom, paddingLeft, paddingRight

貌似padding的优先度高于其他几个，其他几个以智能针对一个方向设置边距

使用padding时，要在布局中写，不要再控件写

2.2.2.3 gravity对齐

几种对齐：

• 右上对齐 - right|top

• 左上对齐 - left|top

• 左下对齐 - left|bottom

• 右下对齐 - right|bottom

• 居中对齐 - center

示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="left|bottom"
    android:padding="10dp"
    tools:context=".Linear_test">
​
    <LinearLayout
        android:gravity="right|bottom"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:padding="20dp"
        android:orientation="vertical">
​
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/animal"/>
​
        <Button
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击"/>
​
    </LinearLayout>
​
​
</LinearLayout>

效果图：

我们需要注意的是，如果你在每个控件设置layout_gravity的属性值，则线性布局中的gravity无法影响这些控件，控件的layout_gravity优先级大于布局的gravity。

2.2.2.4 layout_gravity按占比分配剩余空间

推荐博客：(15条消息) Android系列之一：android:layout_weight和android:weightSum总结android weightsum倚剑天客的博客-CSDN博客

就很简单很简单的说，我们就大致可以这么认为就是按照比例瓜分就行了

比如我们在上面的那个代码在imageview添加android:layout_weight="2"，在button添加android:layout_weight="1"，布局则如下

不过咱们现在深入理解一下

剩余空间如果为负数呢，情况还是一样吗？首先我们得解释一下为什么会出现剩余空间为什么会出现负数的问题

剩余空间 = 父布局大小 - Σ子布局大小

就比如你的父布局（vertical）的layout_height 是300dp , 里面的几个控件的layout_height的大小之和大于300dp，则会出现负数的情况

我们进行下面的测试，将imageview的权重值从1变成100

    <LinearLayout
        android:gravity="right|bottom"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:padding="20dp"
        android:orientation="vertical">
​
        <!--将imageview的权重值从1变成100试试看-->
        <ImageView
            android:layout_weight="100"
            android:layout_width="50dp"
            android:layout_height="300dp"
            android:src="@drawable/animal"/>
​
        <Button
            android:layout_weight="2"
            android:layout_marginTop="50dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击"/>
​
    </LinearLayout>

两个效果

（权值为1）

（权值为100）

在权值为1时甚至把button顶出外面，二设为100时，则变小了。这是因为我们是按照占比划分剩余空间，剩余空间为负数时，权值大的反而更小了。得出结论：当剩余空间为负值时，layout_weight值越大的控件所占的空间越小 。

（尽管搞懂了，但不知道为负数有什么用？做应用时候需要这个吗？留疑）

2.3 相对布局RelativeLayout

2.3.1 介绍

RelativeLayout又称作相对布局，也是一种常用的布局。和LinearLayout的排列规则不同，RelatveLayout显得更加随意一些，它可以通过相对定位的方式让控件出现在布局的任何位置。

2.3.2 属性

RelatveLayout中的属性非常多，不过这些属性都是有规律可循的，其实并不难理解

推荐博客：(15条消息) 【Android】相对布局（RelativeLayout）最全解析_Teacher.Hu的博客-CSDN博客

相对于父布局使用（这个我之前没有用过）：

android:layout_centerHorizontal=""
android:layout_centerVertical=""
android:layout_centerInParent=""
android:layout_alignParentLeft=""
android:layout_alignParentRight=""
android:layout_alignParentTop=""
android:layout_alignParentBottom=""

可以两两结合使用，放在父布局如左下角，右上角之类的这是可以的（如下图）

 

相对于其他控件使用

android:layout_above="@+id/"
android:layout_toLeftOf="@+id/" 
android:layout_toRightOf="@+id/"
android:layout_below="@+id/" 
android:layout_alignTop="@+id/"
android:layout_alignBottom="@+id/"
android:layout_alignLeft="@+id/"
android:layout_alignRight="@+id/"

2.4 百分比布局

2.4.1 介绍

在这种布局中，我们可以不再使用wrap_content、match_parent等方式来指定控件的大小，而是允许直接指

定控件在布局中所占的百分比，可以轻松实现平分布局甚至是任意比例分割布局的效果。

不过在使用时，需要添加依赖

implementation 'androidx.percentlayout:percentlayout:1.0.0'

百分比布局只为Frame-Layout和RelativeLayout进行了功能扩展，提供了PercentFrameLayout和PercentRelativeLayout

app:layout_widthPercent="__%"
app:layout_heightPercent="__%" 

这两个属性替代了原来的layout_width和layout_height

2.5 帧布局FrameLayout

额，碎片再说吧