[置顶] Android回部古剑之ViewFlipper之仙人指路

传送门 ☞ 翻来覆去

回部古剑
        霍青桐一定神，说道：“我性命承公子相救，族中圣物，又蒙公子夺回。不论公子如何待我，都决不怨你。”说到这里，伸手解下腰间短剑，说道：“这短剑是我爹爹所赐，据说剑里藏着一个极大秘密，几百年来辗转相传，始终无人参详得出。今日一别，后会无期，此剑请公子收下。公子慧人，或能解得剑中奥妙。”
        今天我们学习如何利用Android平台"回部古剑"ViewFlipper配合点击按钮的操作来实现左右滑动浏览图片的功能，像我们平日里在手机上查看电子相册、浏览电子书时所使用滑动翻页操作，都可以用它来实现。跟上一篇讲到利用ViewFlipper配合手势操作来实现该功能相比，可以说是各有千秋。按钮是有渐变效果的，也就是说点击图片时按钮会立即显示，松开后按钮会慢慢消失。下面给出该情景的案例：

一、案例技术要点

1.创建一个ViewFlipper控件，并且为它增加用于显示图片内容的视图。

2.使用WindowManager窗口管理器及其LayoutParams布局参数来设置导航按钮的布局和参数。改变Window设置需要添加如下权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

3.创建导航按钮，并且为它们分别设置进出屏幕的动画效果。

4.通过Handler异步消息处理机制来改变导航按钮显示的透明度，从而达到渐变显示的效果。

5.重写当前Activity的触摸事件回调方法onTouchEvent()：当手指按住移动图片或点击图片时显示导航按钮；当手指离开图片时逐渐消失导航按钮。

二、案例代码陈列

工程包目录

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="cn.lynn.viewflipper"

    android:versionCode="1"

    android:versionName="1.0" >



    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="15" />

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name" >

        <activity

            android:name=".ViewFlipperMainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />



                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>



</manifest>

strings.xml

<resources>



    <string name="app_name">android图片水平滑动ViewFlipper</string>



</resources>

main.xml

<?xml version="1.0" encoding="utf-8" ?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    

    <ViewFlipper 

        android:id="@+id/viewFlipper"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

            <ImageView 

                android:layout_width="160dp"

                android:layout_height="160dp"

                android:src="@drawable/item1"/>

        </LinearLayout>

        

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

            <ImageView 

                android:layout_width="160dp"

                android:layout_height="160dp"

                android:src="@drawable/item2"/>

        </LinearLayout>

        

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

            <ImageView 

                android:layout_width="160dp"

                android:layout_height="160dp"

                android:src="@drawable/item3"/>

        </LinearLayout>

        

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

            <ImageView 

                android:layout_width="160dp"

                android:layout_height="160dp"

                android:src="@drawable/item4"/>

        </LinearLayout>

        

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

            <ImageView 

                android:layout_width="160dp"

                android:layout_height="160dp"

                android:src="@drawable/item5"/>

        </LinearLayout>

        

    </ViewFlipper>



</LinearLayout>

图片左进动画：left_in.xml

<?xml version="1.0" encoding="utf-8"?>  

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="100%p" android:toXDelta="0"

        android:duration="500" />

    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"

        android:duration="500" />

</set>

图片左出动画：left_out.xml

<?xml version="1.0" encoding="utf-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="0" android:toXDelta="-100%p"

        android:duration="500" />

    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"

        android:duration="500" />

</set>

图片右进动画：right_in.xml

<?xml version="1.0" encoding="utf-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="-100%p" android:toXDelta="0"

        android:duration="500" />

    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"

        android:duration="500" />

</set>

图片右出动画：right_out.xml

<?xml version="1.0" encoding="utf-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="0" android:toXDelta="100%p"

        android:duration="500" />

    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"

        android:duration="500" />

</set>

ViewFlipperMainActivity.java

package cn.lynn.viewflipper;



import android.app.Activity;

import android.content.Context;

import android.graphics.PixelFormat;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.Gravity;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.WindowManager;

import android.view.WindowManager.LayoutParams;

import android.widget.ImageView;

import android.widget.ViewFlipper;



/**

 * ViewFlipper实现水平滑动图片，需要点击按钮指引滑动

 * 

 * @author lynnli1229

 */

public class ViewFlipperMainActivity extends Activity {



    private static final int SHOW = 0x29;

    private static final int HIDE = 0x31;



    private ImageView leftBtnView;

    private ImageView rightBtnView;



    // 设置窗口管理器

    private WindowManager winMgr;

    // 设置窗口管理器布局参数

    private WindowManager.LayoutParams winMgrParams;



    // 设置按钮视图alpha的初始值

    private int alpha;

    // 设置按钮是否隐藏

    private boolean isHide;



    private ViewFlipper viewFlipper;



    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);



        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);



        initBtnView();

    }



    /**

     * 初始化按钮视图

     */

    private void initBtnView() {

        winMgr = (WindowManager) getSystemService(Context.WINDOW_SERVICE);

        winMgrParams = new WindowManager.LayoutParams();

        winMgrParams.type = LayoutParams.TYPE_PHONE;

        // 设置图片背景为透明

        winMgrParams.format = PixelFormat.RGBA_8888;

        winMgrParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL

                | LayoutParams.FLAG_NOT_FOCUSABLE;



        winMgrParams.x = 0;

        winMgrParams.y = 0;



        winMgrParams.width = 48;

        winMgrParams.height = 48;



        createLeftBtnView();

        createRightBtnView();

    }



    /**

     * 创建向左（前）按钮

     */

    private void createLeftBtnView() {

        leftBtnView = new ImageView(this);

        leftBtnView.setImageResource(R.drawable.left);

        leftBtnView.setAlpha(0);



        leftBtnView.setOnClickListener(new OnClickListener() {

            public void onClick(View view) {

                // 上一个图像

                viewFlipper.setInAnimation(ViewFlipperMainActivity.this,

                        R.anim.left_in);

                viewFlipper.setOutAnimation(ViewFlipperMainActivity.this,

                        R.anim.left_out);

                viewFlipper.showPrevious();

            }

        });



        // 调整窗口

        winMgrParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;

        // 显示图像

        winMgr.addView(leftBtnView, winMgrParams);

    }



    /**

     * 创建向右（后）按钮

     */

    private void createRightBtnView() {

        rightBtnView = new ImageView(this);

        rightBtnView.setImageResource(R.drawable.right);

        rightBtnView.setAlpha(0);



        rightBtnView.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View view) {

                // 下一个图像

                viewFlipper.setInAnimation(ViewFlipperMainActivity.this,

                        R.anim.right_in);

                viewFlipper.setOutAnimation(ViewFlipperMainActivity.this,

                        R.anim.right_out);

                viewFlipper.showNext();

            }

        });



        // 调整窗口

        winMgrParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;

        // 显示图像

        winMgr.addView(rightBtnView, winMgrParams);

    }



    /**

     * 设置按钮渐变显示效果

     */

    private final Handler handler = new Handler() {

        @Override

        public void handleMessage(Message msg) {

            if (msg.what == SHOW && alpha < 255) {

                // 增加按钮的不透明度

                alpha += 50;

                // 溢出则重置

                if (alpha > 255) {

                    alpha = 255;

                }

                leftBtnView.setAlpha(alpha);

                leftBtnView.invalidate(); // 在主线程中刷新视图

                rightBtnView.setAlpha(alpha);

                rightBtnView.invalidate();



                if (!isHide && alpha < 255)

                    handler.sendEmptyMessageDelayed(SHOW, 100);

            } else if (msg.what == HIDE && alpha > 0) {

                // 增加按钮的透明度

                alpha -= 25;

                // 溢出则重置

                if (alpha < 0) {

                    alpha = 0;

                }

                leftBtnView.setAlpha(alpha);

                leftBtnView.invalidate();

                rightBtnView.setAlpha(alpha);

                rightBtnView.invalidate();



                if (isHide && alpha > 0)

                    handler.sendEmptyMessageDelayed(HIDE, 500);

            }

        }

    };



    private void showBtnView() {

        isHide = false;

        handler.sendEmptyMessage(SHOW);

    }



    private void hideBtnView() {

        new Thread() {

            public void run() {

                try {

                    Thread.sleep(1000); // 休眠1秒，为了达到更好的演示效果

                    isHide = true;

                    handler.sendEmptyMessage(HIDE);

                } catch (Exception e) {

                }

            }

        }.start();

    }



    @Override

    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {

        case MotionEvent.ACTION_MOVE: // 手指按住移动图片

        case MotionEvent.ACTION_DOWN: // 手指点击图片

            showBtnView();

            break;

        case MotionEvent.ACTION_UP:

            hideBtnView();

            break;

        }



        return true;

    }



    @Override

    public void onDestroy() {

        super.onDestroy();

        // 销毁导航按钮视图

        winMgr.removeView(leftBtnView);

        winMgr.removeView(rightBtnView);

    }

}

三、案例效果展示