安卓开发学习之008 FrameLayout应用之扑克牌的动静态显示

1.FrameLayout(框架布局)

框架布局又叫帧布局是android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域,。所有添加到这个布局中的视图都以层叠的方式显示，所有的组件默认都会放置于这块区域的左上角。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。
如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！
当然我们也可以为组件添加layout_gravity属性,从而制定组件的对其方式
帧布局在游戏开发方面用的比较多。

2.相关属性概念

前景图像:
永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片

常用属性:
android:foreground:设置该帧布局容器的前景图像
android:foregroundGravity:设置前景图像显示的位置
android:layout_marginXXX: 设置子控件与父视图的间隔距离

3.实例1——静态扑克牌

3.1效果图如下：

3.2布局代码如下：

res/fragment_frame_layout.xml

"http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:paddingBottom="@dimen/activity_vertical_margin"
             android:paddingLeft="@dimen/activity_horizontal_margin"
             android:paddingRight="@dimen/activity_horizontal_margin"
             android:paddingTop="@dimen/activity_vertical_margin"
             tools:context=".FrameLayoutActivityFragment"
             tools:showIn="@layout/activity_frame_layout">

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:src="@mipmap/a"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:src="@mipmap/b"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:src="@mipmap/a1"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:src="@mipmap/b1"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:src="@mipmap/c1"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:src="@mipmap/d1"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:src="@mipmap/a2"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:src="@mipmap/b2"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="90dp"
        android:src="@mipmap/c2"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:src="@mipmap/d2"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="110dp"
        android:src="@mipmap/a3"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="120dp"
        android:src="@mipmap/b3"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="130dp"
        android:src="@mipmap/c3"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="140dp"
        android:src="@mipmap/d3"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="150dp"
        android:src="@mipmap/a4"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="160dp"
        android:src="@mipmap/b4"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="170dp"
        android:src="@mipmap/c4"/>

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="180dp"
        android:src="@mipmap/d4"/>


</FrameLayout>

3.3代码解释

FrameLayout下放置若干张照片，水平放置，照片离父视图左边距依次递增10dp

4.实例2——动态扑克牌

4.1效果图如下：

4.2布局代码

res/fragment_dynamic__frame_layout.xml

"@+id/frameLayout"
             xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingBottom="@dimen/activity_vertical_margin"
             android:paddingLeft="@dimen/activity_horizontal_margin"
             android:paddingRight="@dimen/activity_horizontal_margin"
             android:paddingTop="@dimen/activity_vertical_margin"
             tools:context="com.antex.framelayout.Dynamic_FrameLayoutActivityFragment"
             tools:showIn="@layout/activity_dynamic__frame_layout">


</FrameLayout>

就是一个空的FrameLayout

4.3实现流程:

step 1:获取FrameLayout布局
step 2:新建一个Handler对象,重写handlerMessage()方法,更新图像
step 3:新建一个计时器对象Timer,重写run方法,每隔1秒向handler发送空信息

4.4Java代码

package com.antex.framelayout;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import java.lang.ref.WeakReference;
import java.util.Timer;
import java.util.TimerTask;

/**
 * A placeholder fragment containing a simple view.
 */
public class Dynamic_FrameLayoutActivityFragment extends Fragment {
    //框架布局
    private FrameLayout frameLayout;
    //待显示图像数组
     private static final int[] drawable = {R.mipmap.a, R.mipmap.b, R.mipmap.a1, R.mipmap.a2,
            R.mipmap.a3, R.mipmap.a4, R.mipmap.b1, R.mipmap.b2, R.mipmap.b3, R.mipmap.b4,
            R.mipmap.c1, R.mipmap.c2, R.mipmap.c3, R.mipmap.c4, R.mipmap.d1, R.mipmap.d2,
            R.mipmap.d3, R.mipmap.d4};
    //定时器
    private Timer timer;
    //定时器循环执行时间间隔
    private long period=1000L;

    //用来更新图像的Handler
    private MyHandler handler;

    /**
     * 自定义Handler
     * 采用静态 弱引用
     * */
    static private class MyHandler extends Handler {
        //递增量,用来控制显示第几个图像
        private int i=0;
        WeakReference mFragment;

        public MyHandler(Dynamic_FrameLayoutActivityFragment fragment) {
            mFragment = new WeakReference<>(fragment);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            Dynamic_FrameLayoutActivityFragment fragement = mFragment.get();
            if (null == fragement)
                return;
            switch (msg.what) {
                case 0:
                    //设置frameLayout的前景图像
                    fragement.frameLayout.setForeground(fragement.getResources().getDrawable
                            (drawable[i++ % 16]));
                    break;
            }
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
            savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_dynamic__frame_layout, container, false);
        frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);
        frameLayout.setForegroundGravity(Gravity.CENTER);
        handler= new MyHandler(this);

        //创建定时器
        timer = new Timer();
        //创建定时器任务
        TimerTask timerTask = new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0);
            }
        };
        //将定时器任务添加到定时器中
        timer.schedule(timerTask, 0, period);

        return view;
    }

    @Override
    public void onPause() {
        super.onPause();
        timer.cancel();
    }
}

开发工具：Android Studio1.4
SDK: Android 6.0
API 23

代码下载：FrameLayout.zip