android 布局的概念,Android布局和控件

一.概述

通过学习本篇文章，你将学会：

1.Android的五大常用布局及其用法

2.shape样式的使用

3.选择器的使用

二.Android五大布局和使用

Android六大布局如下图所示：

image.png

从图中可以看到传统布局包括：线性布局LinearLayout，相对布局RelativeLayout，帧布局FrameLayout，表格布局TableLayout和绝对布局AbsoluteLayout。新型布局也就是约束布局ConstraintLayout，不过，在这篇文章我就想着重讲传统的五大布局，约束布局可见郭霖大神的文章(https://blog.youkuaiyun.com/guolin_blog/article/details/53122387)。

1.线性布局LinearLayout：

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

1.垂直方向

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="线性布局1" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="线性布局1" />

2.水平方向

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="18sp"

android:text="线性布局1" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="8dp"

android:textSize="18sp"

android:text="线性布局1" />

因为很简单，就不挂图了。

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

android:textSize="18sp"

android:text="线性布局1" />

android:layout_width="0dp"

android:layout_weight="2"

android:layout_height="wrap_content"

android:layout_marginLeft="8dp"

android:textSize="18sp"

android:text="线性布局1" />

如上述代码就会使得第一个TextView占三分之一的宽度，第二个占三分之二的宽度

注意：在使用layout_weight属性的时候要注意是水平均分还是垂直均分，水平均分则将layout_width设置为0dp或者match_parent(这两种情况占比刚好相反，可以自己试一下)，垂直均分则将layout_height设置为0dp或者match_parent。

2.相对布局RelativeLayout

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

我们先看一下RelativeLayout之所以这么强大的功能源于其强大的相对性，如下图所示：

image.png

通过以上的属性我们可以放置两个控件的相对位置。

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

android:id="@+id/bt_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="居中" />

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="左侧" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@id/bt_1"

android:layout_toRightOf="@id/bt_1"

android:text="右侧" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@id/bt_2"

android:layout_alignLeft="@id/bt_1"

android:text="上方" />

上述布局如下图：

image.png

注意：在引用其他子元素之前，引用的ID必须已经存在，否则将出现异常。

3.帧布局FrameLayout

将所有的子元素放在整个界面的左上角，后面的子元素直接覆盖前面的子元素。

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#f00" />

android:layout_width="300dp"

android:layout_height="300dp"

android:background="#0f0" />

android:layout_width="100dp"

android:layout_height="100dp"

android:background="#00f" />

上述布局如下图：

image.png

4.表格布局和绝对布局

相信我，这两种几乎不用，所以不讲了。

5.共同的属性的含义

-margin

-padding

-layout_gravity

-gravity

image.png

三.shape样式的使用

shape是用于设置控件背景用的，比如给控件添加背景色，添加描边，添加渐变色，添加圆角。同时，shape本身可以绘制成矩形，椭圆，环形等样式。

1.我们在drawable文件夹下方新建一个shape.xml文件

android:centerColor="#0f0"

android:endColor="#00f"

android:startColor="#f00" />

android:width="5dp"

android:color="#000" />

然后在布局文件给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文件

同时，再新建一个shape2：

android:centerColor="#0f0"

android:endColor="#00f"

android:startColor="#f00" />

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

五.总结

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