Android布局之FrameLayout

FrameLayout介绍

所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的组件放到最底层，最后添加到框架中的视图显示在最上面。上一层的会覆盖下一层的组件。默认组件都在靠左上角放置，但是我们可以通过 “layout_gravity”和 "layout_margin..."结合来设置控件的摆放位置

 

使用场景

FrameLayout看起来比较简单，但对于初学的人来说不是很好理解，显的比较神秘，能用好的话必需得多实践下。

使用场景：当应用的界面上有层叠的控件时，这时我们需要用到FrameLayout。

 

简单示例

 

 

代码实现：

---

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#FF33ffff" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center"
        android:background="#FF33ccff" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"
        android:background="#FF3399ff" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="#FF3366ff" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="#FF3300ff" />
</FrameLayout>

 

 

---

 

复杂示例

比如下面这个界面，可以看到整个界面是一个大的轮播图(ViewPager实现)，可以左右滑动功换广告图片，在这个轮播图上面有“微信登录”、“注册”、“登录”等按扭。

 

代码实现：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_lightblue"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vpContainer"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true" />

        <LinearLayout
            android:id="@+id/ll_dot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="350px"
            android:orientation="horizontal" >
        </LinearLayout>
    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:orientation="vertical"
        android:padding="60px" >

        <LinearLayout
            android:id="@+id/ll_wechatlogin"
            android:layout_width="fill_parent"
            android:layout_height="138px"
            android:layout_centerInParent="true"
            android:background="@drawable/button_white_bg"
            android:drawableLeft="@drawable/wechatlogo_xh"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:paddingBottom="38px"
            android:paddingTop="38px" >

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

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/wechatlogo_xh" />

                <TextView
                    android:id="@+id/tv_wechatlogin"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="10px"
                    android:background="@drawable/button_white_bg"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:text="微信登录"
                    android:textColor="@color/color_black"
                    android:textSize="40px" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50px"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_register"
                android:layout_width="0dp"
                android:layout_height="138px"
                android:layout_weight="5"
                android:background="@drawable/button_transparent_bg"
                android:paddingBottom="38px"
                android:paddingTop="38px"
                android:text="注册"
                android:textSize="40px" />

            <View
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/btn_login"
                android:layout_width="0dp"
                android:layout_height="138px"
                android:layout_weight="5"
                android:background="@drawable/button_transparent_bg"
                android:paddingBottom="38px"
                android:paddingTop="38px"
                android:text="登录"
                android:textSize="40px" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/login_vistor_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|top"
        android:layout_marginLeft="30.0px"
        android:layout_marginTop="30.0px"
        android:text="@string/login_vistor_view"
        android:textSize="@dimen/font_size_medium_50"
        android:textColor="@color/white" />

</FrameLayout>