Android 第七课 4种基本布局之FrameLayout和百分比布局

FrameLayout（帧布局），她没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。

修改activity_main.xml中的代码，如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.uilayouttest.MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"/>
   <ImageView
       android:id="@+id/image_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@mipmap/ic_launcher"/>


</FrameLayout>

运行程序之后，可以看到文字和图片都是位于布局的左上角，由于ImageView是在TextView之后添加的因此图片压在了文字的上面。这是一种默认效果，除了这种情况之外，我们还可以使用layout_gravity属性来指定控件在布局中的对齐方式，这和LinearLayout中的用法是相似的，修改activity_main.xml中的代码，如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.uilayouttest.MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"/>
   <ImageView
       android:id="@+id/image_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="right"
       android:src="@mipmap/ic_launcher"/>


</FrameLayout>

总的来说，FrameLayout定位方式欠缺，所以应用场景也少。

• 百分百布局

可以发现只有LinearLayout支持使用layout_weight属性来实现按比例指定控件大小的功能，其他两种不支持。

百分百布局中，我们不再使用wrap_content、match_parent等方式来指定控件的大小，而是允许直接指定控件在布局中所占的百分比，这样的话就可以轻松实现评分布局甚至是任意比例分割布局的效果了。

LinearLayout本身已经支持按比例指定控件的大小了，因此百分比布局只为了FrameLayout和RelativeLayout进行了功能扩展，提供了PercentFrameLayout和PercentRelative这两个全新的布局。

不同于前三种，百分比布局属于新增布局，Android 团队将百分比布局定义在了support库当中，我们只需要在项目的build。gradle中添加百分比布局库的依赖。打开app/build.gradle文件，在dependencies闭包中添加了如下内容：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    compile 'com.android.support:percent:24.2.1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

接下来修改activity_main.xml中的代码，如下：

<?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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"
        app:layout_widthPercent = "%50"
        app:layout_heightPercent = "%50"/>

    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_gravity="right|top"
        app:layout_widthPercent = "%50"
        app:layout_heightPercent = "%50"/>

    <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent = "%50"
        app:layout_heightPercent = "%50"/>

    <Button
        android:id="@+id/button4"
        android:text="Button 4"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent = "%50"
        app:layout_heightPercent = "%50"/>



</android.support.percent.PercentFrameLayout>

最外层我们使用了PercentFrameLayout，由于百分比布局并不是内置在系统SDK当中的，所有需要把完整的包路径写出来。然后还必须定义一个app的命名空间，这样才能使用 百分比布局的自定义属性。

在PercentFrameLayout中我们定义了4个按钮，使用app:layout_widthPercent属性将各按钮的宽度指定为布局的50%，

使用app:layout_heightPercent属性将各按钮的高度指定为布局的50%，不过PercentFrameLayout还是会继承FrameLayout的特性，即所有的控件默认摆放在布局的左上角。为了不让布局重叠，我们还是借助了layout_gravity来分别将这4个按钮放置在布局的左上，右上，左下，右下4个位置。

运行程序如图：

（待续。。。）

PercenFrameLayout就介绍到这里，还有一个PercentRelativeLayout的用法也是非常相似的。它继承了RelativeLayout等布局。