android学习笔记“四种基本布局”

UI界面是一个App使用者每天面对最多的，如果界面不美观那么软件会很失败，试想谁愿意每天面对一个不喜欢的影响心情的软件。一个好的布局决定了用户的很大程度上的对一款App的喜欢程度。向一些基本的android控件比如说Button、TextView、EditText、ImageView等我就不介绍了，他们是android自带的基本控件很好理解。我从四种基本布局开始说起。

线性布局

LinearLayout又称为线性布局，是android开发中最常用的一种布局。线性布局中 android:orientation控制着其中控件及布局的方向，分为水平方向和竖直方向，长宽是布局布局中必须要设置的属性。线性布局还有一个常用属性就是对齐方式属性 android:layout_gravity，需要注意的是当LinearLayout为horizontal时垂直方向上的对齐方式才会生效，当为vertical时水平方向的对齐方式才会生效。在线性布局中 android:layout_weight也十分重要，通过这个属性我们可以按比例控制其中的控件、布局大小，它在手机屏幕适配方面起到非常重要的作用，在使用这一属性时，我们需要控制在什么方向上按比例就设置在那一方向上的长或者宽设置为0dp，然后设置layout_weight的值。

相对布局 

RelativeLayout（相对布局），相对布局也很常用，它可以通过相对定位的方式让控件出现在布局的任何位置。通过这些android:lauout_alignParentLeft、android:layout_alignParentTop、android:layout_centerInParent等属性的设置来控制控件显示的位置，这些十分好理解，从字面上我们解能知道他们的作用。其中android:layout_above属性和android:layout_below属性是控制一个控件位于另一个控件的上方还是下方的，它们可以和android:layout_toLeftOf、android:layout_toRightOf属性一起使用，达到控制位置的效果。下面是一个简单的例子。

<?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/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button3"
        />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_toLeftOf="@+id/button3"
        android:text="Button1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="Button2"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button3"
        android:layout_toLeftOf="@+id/button3"
        android:text="Button4"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="Button5"
        />
</RelativeLayout>

效果如下所示

帧布局

FrameLayout（帧布局），帧布局的应用相对来说比较少，也更好理解，FrameLayout中的所有控件都默认摆放在布局的左上角，但是我们也可以通过layout_gravity来指定控件的对齐方式。

百分比布局

前面讲的三种布局只有LinearLayout支持layout_weight属性来按比例控制控件的大小，其他两种都不支持，为解决这种问题，android引入了全新的布局方式来解决此问题——百分百布局。由于LinearLayout已经支持了按比例布局，因此百分百布局只为FrameLayout和RelativeLayout进行了功能扩展，产生出了PercentFrameLayout和PercentRelativeLayout。

要使用百分百布局需要修改build.gradle文件，在dependencies闭包中添加如下代码：

dependencies{

......

compile 'com.android.support:percent:24.2.1'

......

}

布局代码上，我们不在使用wrap_content和match_parent，而是使用app:layout_widthPercent和app:layout_heightPercent,布局的宽高设置也变为使用百分百比。下面举一个使用PercentFrameLayout的例子

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
</android.support.percent.PercentFrameLayout>

图示如下

以上就是对布局的简单学习总结，对于普通的开发是够了的。