正文

用户向导左右滑动页面实现之ImageSwitcher

IP云
IP云V管理员/4 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

当第一次打开一个app时，通常有一个使用向导介绍本APK的基本功能和用法，这个向导是很重要的，方便用户能高速知道和适应该app如何用。

实现此使用向导有非常多种方法，比方用ImageSwitcher，ViewPager。当然要用ViewSwitcher或是ViewGroup去实现也是能够的，仅仅只是有点大材小用了。

用ImageSwitcher和ViewPager的差别就在于ImageSwitcher能轻松地指定页面切换的动画！这里先总结下ImageSwitcher的实现。

首先，定义布局文件activity_main.xml 

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <ImageSwitcher

        android:id="@+id/switcher"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        >

    </ImageSwitcher>

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/dots"

        android:layout_alignParentBottom="true"

        android:layout_marginBottom="50dp"

        android:gravity="center_horizontal"

        ></LinearLayout>

</RelativeLayout>

布局文件里有一个id为dots的LinearLayout就是一会儿能够切换显示的小圆点。

让你的Activity实现ViewFactory接口，做为imageSwitcher.setFactory的參数，小圆点的实现是依据可切换图片的张数动态加入到dots中的。详细的代码例如以下： 

package com.example.imageswitcher;

import android.annotation.SuppressLint;

import android.app.ActionBar.LayoutParams;

import android.app.Activity;

import android.os.Bundle;

import android.view.KeyEvent;

import android.view.View;

import android.widget.ImageSwitcher;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements  ViewFactory {

	private ImageSwitcher mSwitcher ;

	private LinearLayout mLinearLayout ;

	private ImageView[] mImageViewDots ;

	private int mIndex = 0 ;

	private int mImageRes[] = new int[]{

			R.drawable.a,

			R.drawable.b,

			R.drawable.c,

			R.drawable.d,

			R.drawable.e,

			R.drawable.g

	};

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		mLinearLayout = (LinearLayout)findViewById(R.id.dots);

		mSwitcher = (ImageSwitcher)findViewById(R.id.switcher);

		initDots();

		mSwitcher.setFactory(this);

		mSwitcher.setImageResource(mImageRes[0]);

		mImageViewDots[0].setBackgroundResource(R.drawable.dot_focus);

	}

	@SuppressLint("NewApi")

	public void initDots(){

		mLinearLayout.removeAllViews() ;

		mImageViewDots = new ImageView[mImageRes.length] ;

		for(int i=0 ;i<mImageRes.length ;i++){

			ImageView dot = new ImageView(this);

			dot.setBackgroundResource(R.drawable.dot_nomal);

			dot.setLayoutParams(new LayoutParams(30,30)) ;

			TextView tv = new TextView(this);

			tv.setLayoutParams(new LayoutParams(30,30));

			mImageViewDots[i] = dot ;

			mLinearLayout.addView(dot);

			mLinearLayout.addView(tv);

		}

	}

	@Override

	public View makeView() {

		return new ImageView(this);

	}

	@Override

	public boolean onKeyDown(int keyCode, KeyEvent event) {

		if(keyCode == KeyEvent.KEYCODE_DPAD_LEFT){

			if(mIndex == 0){

				mIndex = mImageRes.length -1 ;

			}else{

				--mIndex ;

			}

			mSwitcher.setInAnimation(MainActivity.this, R.anim.left_in) ;

			mSwitcher.setOutAnimation(MainActivity.this, R.anim.right_out) ;

			mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);

		}else if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT){

			if(mIndex == mImageRes.length - 1){

				mIndex = 0 ;

			}else{

				++mIndex ;

			}

			mSwitcher.setInAnimation(MainActivity.this, R.anim.rigth_in) ;

			mSwitcher.setOutAnimation(MainActivity.this, R.anim.left_out) ;

			mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);

		}

		for(int i=0 ;i<mImageViewDots.length ;i++){

			if(i == mIndex%mImageRes.length){

				mImageViewDots[i].setBackgroundResource(R.drawable.dot_focus);

			}else{

				mImageViewDots[i].setBackgroundResource(R.drawable.dot_nomal);

			}

		}

		return super.onKeyDown(keyCode, event);

	}

}

这里可切换的图片可任意制定。这里来说一下切换动画，这里总有4个动画，分为两组。第一组是当ImageSwitcher向左切换图片的时候，首先setInAnimation是设置即将出现的那张图片的动画，setOutAnimation是设置即将消息的那张图片的动画，各自是left_in,rigth_out。第二组则是与之相反的。四个动画分别例如以下（放在res/anim文件夹下）：

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="1000" />

</set>

rigth_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="1000" />

</set>

rigth_in.xml 

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

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

    <translate

        android:fromXDelta="100%"

        android:toXDelta="0"

        android:duration="1000" />

</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="1000" />

</set>

针对小圆点，我是用drawable.xml文件去画的，在程序中能够指定它的大小。这里设置了两种颜色，用于差别当前在第几个页面。

dot_focus.xml 

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

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

      android:shape="oval"

      >

      <corners android:radius="5dip" />

      <solid android:color="#33FF00" />

</shape>

dot_nomal.xml 

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

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

      android:shape="oval"

      >

      <corners android:radius="5dip" />

      <solid android:color="#FFFF99" />

</shape>

我是在Android机顶盒上开发的此Demo，全部捕捉的是左键和右键。假设是手机端的话，能够捕捉手势。上一张大概的图：





接下来将用ViewPager实现此效果。

相关阅读

目录[+]