一.概述

通过学习本篇文章，你将学会：
1.Android的五大常用布局及其用法
2.shape样式的使用
3.选择器的使用

二.Android五大布局和使用

Android六大布局如下图所示：

image.png

从图中可以看到传统布局包括：线性布局LinearLayout，相对布局RelativeLayout，帧布局FrameLayout，表格布局TableLayout和绝对布局AbsoluteLayout。新型布局也就是约束布局ConstraintLayout，不过，在这篇文章我就想着重讲传统的五大布局，约束布局可见郭霖大神的文章（https://blog.csdn.net/guolin_blog/article/details/53122387）。
1.线性布局LinearLayout：
线性布局是按照水平或垂直的顺序将子元素(可以是控件或布局)依次按照顺序排列，每一个元素都位于前面一个元素之后。线性布局分为两种：水平方向和垂直方向的布局。分别通过属性android:orientation="vertical" 和 android:orientation="horizontal"来设置。
1.垂直方向

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="线性布局1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="线性布局1" />
    </LinearLayout>

2.水平方向

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="线性布局1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:textSize="18sp"
            android:text="线性布局1" />
    </LinearLayout>

因为很简单，就不挂图了。
3.LinearLayout还有一个特别特殊的属性就是layout_weight，我们可以把它理解为在水平或者垂直方向上控件均分多少

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="线性布局1" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:textSize="18sp"
            android:text="线性布局1" />
    </LinearLayout>

如上述代码就会使得第一个TextView占三分之一的宽度，第二个占三分之二的宽度
注意：在使用layout_weight属性的时候要注意是水平均分还是垂直均分，水平均分则将layout_width设置为0dp或者match_parent（这两种情况占比刚好相反，可以自己试一下），垂直均分则将layout_height设置为0dp或者match_parent。
2.相对布局RelativeLayout
RelativeLayout继承于android.widget.ViewGroup，其按照子元素之间的位置关系完成布局的，作为Android系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。
我们先看一下RelativeLayout之所以这么强大的功能源于其强大的相对性，如下图所示：

image.png

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.linkbasic.retrofittest.MainActivity">

    <Button
        android:id="@+id/bt_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="居中" />

    <Button
        android:id="@+id/bt_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bt_1"
        android:layout_toLeftOf="@id/bt_1"
        android:text="左侧" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bt_1"
        android:layout_toRightOf="@id/bt_1"
        android:text="右侧" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bt_2"
        android:layout_alignLeft="@id/bt_1"
        android:text="上方" />
</RelativeLayout>

上述布局如下图：

image.png

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.linkbasic.retrofittest.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#f00" />

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#0f0" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00f" />
</FrameLayout>

上述布局如下图：

image.png

image.png

三.shape样式的使用

shape是用于设置控件背景用的，比如给控件添加背景色，添加描边，添加渐变色，添加圆角。同时，shape本身可以绘制成矩形，椭圆，环形等样式。
1.我们在drawable文件夹下方新建一个shape.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
    <stroke
        android:width="5dp"
        android:color="#000" />
</shape>

然后在布局文件给Textview控件添加背景android:background="@drawable/shape"就会出现：

image.png

其中：

• corners:表示圆角，可以单独定义左上，右上，左下，右下四个角的圆角大小
• gradient:表示渐变色，还可以定义角度angle，45的倍数，让整个渐变色改变一定的角度
• stroke:表示描边，可以定义描边的宽度，颜色，虚实线等。width定义实线的宽度，dashWidth和dashGap定义虚线宽度和间隔，color定义描边的颜色

四.选择器的使用

选择器就是让空间在不同的状态使用不同的shape样式，单独一个shape只有一种状态，选择器Selector可以在不同状态表现不同选择器，常用的状态有：
android:state_pressed：按下状态
android:state_selected：选中状态
android:state_checked：被checked了，如：一个RadioButton可以被check了
同样在drawable文件夹下方新建一个selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape"/>
    <item android:state_pressed="false" android:drawable="@drawable/shape2"/>
</selector>

同时，再新建一个shape2：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
</shape>

然后运行就会发现，未按下状态的时候没有描边，按下就有了描边。自己动手试试。

五.总结

以上就是关于布局和控件的知识点，如有不足或者错误的地方请指正。不管怎样，代码不只是需要多看，更需要通过自己动手去写去熟悉才能有更深的印象，更好更全面的了解。