Android ViewFlipper简单示例

jxnk

2013-01-28

ViewFlipper简单示例，详情请参考：http://developer.android.com/reference/android/widget/ViewFlipper.html

main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:background="#ffffff">

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:gravity="center">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1"
                android:textSize="60dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:textSize="60dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3"
                android:textSize="60dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4"
                android:textSize="60dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5"
                android:textSize="60dip" />
        </LinearLayout>
    </ViewFlipper>

    <Button
        android:id="@+id/left_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="5dip"
        android:text="左" />

    <Button
        android:id="@+id/right_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_margin="5dip"
        android:text="右" />

</RelativeLayout>

说明：

使用RelativeLayout做父容器，添加按钮在ViewFlipper顶部；
ViewFlipper的每个子页面并列于该View内；
ViewFlipper的每个子页面显示一个TextView；

main.xml效果：

Android ViewFlipper简单示例
main.xml布局结构：

Android ViewFlipper简单示例
运行效果图：

Android ViewFlipper简单示例

说明：

点击顶部按钮，可以完成页面切换；
点击底部按钮，可以实现页面切换；
滑动页面，可以实现页面的切换；

切换动画/res/anim/目录下的动画文件分别如下：

push_left_in.xml：

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

    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />

</set>

push_left_out.xml：

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

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />

</set>

push_right_in.xml：

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

    <translate
        android:duration="500"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />

</set>

push_right_out.xml：

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

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />

</set>

主要代码：

import android.app.Activity;
import android.graphics.PixelFormat;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.view.WindowManager.LayoutParams;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnClickListener {
	
	private WindowManager windowManager;
	
	private Button leftButton;
	private Button rightButton;
	
	private ViewFlipper viewFlipper;
	
	private float xDown;
	private float yDown;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		getWindow().requestFeature(Window.FEATURE_NO_TITLE);
		
		setContentView(R.layout.main);

		viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
		
		windowManager = (WindowManager) getApplicationContext().getSystemService("window");
		LayoutParams windowManagerParams = new WindowManager.LayoutParams();
		windowManagerParams.type = LayoutParams.TYPE_PHONE;
		windowManagerParams.format = PixelFormat.RGBA_8888;
		windowManagerParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
				| LayoutParams.FLAG_NOT_FOCUSABLE;
		windowManagerParams.x = 0;
		windowManagerParams.y = 0;
		windowManagerParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
		windowManagerParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
		
		leftButton = new Button(this);
		leftButton.setBackgroundResource(android.R.drawable.alert_light_frame);
		leftButton.setText("<");
		leftButton.setOnClickListener(this);
		windowManagerParams.gravity = Gravity.LEFT | Gravity.BOTTOM;
		windowManager.addView(leftButton, windowManagerParams);
		
		rightButton = new Button(this);
		rightButton.setBackgroundResource(android.R.drawable.alert_light_frame);
		rightButton.setText(">");
		rightButton.setOnClickListener(this);
		windowManagerParams.gravity = Gravity.RIGHT | Gravity.BOTTOM;
		windowManager.addView(rightButton, windowManagerParams);
		
		findViewById(R.id.left_button).setOnClickListener(this);
		findViewById(R.id.right_button).setOnClickListener(this);
		
	}

	private void showPrevious() {
		viewFlipper.setInAnimation(this, R.anim.push_left_in);
		viewFlipper.setOutAnimation(this, R.anim.push_left_out);
		viewFlipper.showPrevious();
	}

	private void showNext() {
		viewFlipper.setInAnimation(this, R.anim.push_right_in);
		viewFlipper.setOutAnimation(this, R.anim.push_right_out);
		viewFlipper.showNext();
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			xDown = event.getX();
			yDown = event.getY();
			break;
		case MotionEvent.ACTION_MOVE:
			break;
		case MotionEvent.ACTION_UP:
			float dx = event.getX() - xDown;
			float dy = event.getY() - yDown;
			// 简单定义：当x方向变化量的绝对值大于y方向时，为水平方向滑动
			if (Math.abs(dx) > Math.abs(dy)) {
				// 水平方向变化量大于0时，为向右运动
				if (dx > 0) {
					showNext();
				}
				// 水平方向变化量小于0时，为向左运动
				else if (dx < 0) {
					showPrevious();
				}
			}
			break;
		}
		return true;
	}

	@Override
	protected void onStop() {
		super.onStop();
		windowManager.removeView(leftButton);
		windowManager.removeView(rightButton);
	}

	@Override
	public void onClick(View v) {
		if (v == leftButton) {
			showPrevious();
			return;
		}
		if (v == rightButton) {
			showNext();
			return;
		}
		switch (v.getId()) {
		case R.id.left_button:
			showPrevious();
			break;
		case R.id.right_button:
			showNext();
			break;
		default:
			break;
		}
	}
}

说明：

底部两个白色背景的按钮是通过WindowManager添加的，是系统级别的窗口，故需要添加对应的权限；
添加<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />权限；
通过viewFlipper.setInAnimation和viewFlipper.setOutAnimation方法设置动画效果；
在onStop时，需要remove添加的系统级别的窗口，否则点击Home后，那两个系统级别的按钮还存在于桌面；
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);请求全屏；
getWindow().requestFeature(Window.FEATURE_NO_TITLE);请求没有标题栏；

多说一句：就个人而言，不喜欢总是要各种权限的应用！除非操作需要，尽量不要随意添加权限！：）

android