ImageSwitcher的应用

在android的开发中很多时候都会用到图片的切换，我相信大家在安装完apk后，都会遇到弹出用户向导，介绍本版本apk的新功能，如果你用的是平板电脑或手机的话，可以左右滑动以切换视图，如果你用的是android机顶盒的话，可以按遥控器的左右键以切换视图。那么这种用户向导切换图片是怎么做的呢？当然答案有很多种，应该android中有太多方式可以实现了,比如ViewFilper ，ViewPager。这里我就介绍一种最简单的方式，那就是采用ImageSwitcher 图片切换器！

首先看一下ImageSwitcher的类继承结构：

java.lang.Object    ↳ android.view.View      ↳ android.view.ViewGroup        ↳ android.widget.FrameLayout          ↳ android.widget.ViewAnimator            ↳ android.widget.ViewSwitcher              ↳ android.widget.ImageSwitcher

比较复杂！和这个类等同继续结构的还有一个叫做TextSwitcher。他们两个是ViewSwitcher的唯一的两个子类，在ViewSwitcher中定义了一个接口叫做ViewFactory，所以在使用ImageSwitcher和TextSwitcher时必须要实现这个接口，其实在这个接口中，就只有一个方法，如下：

public abstract View makeView ()     Function：Creates a new View to be added in a ViewSwitcher.    Returns： a View

好了，到这里介绍ImageSwitcher就差不多了，咋门先来看看最后的实现结果

最下面的4个小点可以理解为位置指示吧，当前在那一页，最明显的小点，就会留在那个位置。这是通过LinearLayout加入TextView来实现的，其实这些小点都是TextView，只是背景颜色不一样而已，这里后面会具体介绍。

我们先来看看布局文件：act_guide.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ImageSwitcher        android:id="@+id/guide_content"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@android:color/white" />    <LinearLayout        android:id="@+id/guide_indicator"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom|center_horizontal"                android:gravity="center_horizontal"        android:orientation="horizontal" /></FrameLayout>

由于美观，要实现图片滑动效果，所有这里添加了2个动画，在res下新建anim文件夹，添加如下文件

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <translate        android:duration="500"        android:fromXDelta="50%p"        android:toXDelta="0" />    <alpha        android:duration="700"        android:fromAlpha="0.0"        android:toAlpha="1.0" /></set>

slide_out_left.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="-50%p" />    <alpha        android:duration="700"        android:fromAlpha="1.0"        android:toAlpha="0.0" /></set>

好，之前提过的个4个小圆点，是怎么画上去的呢？这里就需要在res下新建一个drawable文件夹，在里面添加两个绘图的配置文件：

indicator_n.xml 即没有选中的颜色

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:innerRadius="0dp"    android:shape="ring"    android:thickness="10dp"    android:useLevel="false" >    <size        android:height="40dp"        android:width="40dp" />    <solid android:color="#88666666" /></shape>

indicator_s.xml 即选中了的颜色

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:innerRadius="0dp"    android:shape="ring"    android:thickness="10dp"    android:useLevel="false" >    <size        android:height="40dp"        android:width="40dp" />    <solid android:color="#ff0b7fe4" /></shape>

好，接下来，我们来看看主activity是怎样调用的：

Act_guide.java

package dxd.android.imageswitcher;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.FrameLayout.LayoutParams;import android.widget.ImageSwitcher;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.ViewSwitcher.ViewFactory;public class ActGuide extends Activity implements ViewFactory {protected LayoutInflater mInflater;protected ImageSwitcher switcher;protected int[] itemIDs;protected int pos;protected int last;protected LinearLayout indicator;protected ViewGroup mParent;protected boolean intercept = false;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mInflater = LayoutInflater.from(this);setContentView(R.layout.act_help);addViews() ;}protected void addViews() {itemIDs = new int[] { R.drawable.s1, R.drawable.s2, R.drawable.s3,R.drawable.s4};switcher = (ImageSwitcher)findViewById(R.id.guide_content);switcher.setFactory(this);switcher.setImageResource(itemIDs[pos]);indicator = (LinearLayout) findViewById(R.id.guide_indicator);for (int i = 0; i < itemIDs.length; i++) {TextView item = new TextView(this);item.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));if (i == 0) {item.setBackgroundResource(R.drawable.indicator_s);} else {item.setBackgroundResource(R.drawable.indicator_n);}indicator.addView(item);}    // 响应 触摸事件    switcher.setOnTouchListener(new OnTouchListener() {private float x;private boolean lock;@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:x = event.getX();lock = true;break;case MotionEvent.ACTION_MOVE:if (lock) {float dltaX = x - event.getX();if (dltaX > 100) {showNext();lock = false;} else if (dltaX < -100) {showPre();lock = false;}     } break;}return true;}});}@Overridepublic View makeView() {ImageView imageView = new ImageView(this);imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));imageView.setScaleType(ScaleType.FIT_XY);return imageView;}        // 响应左右按键@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {switch (keyCode) {case KeyEvent.KEYCODE_DPAD_LEFT:showPre();return true;case KeyEvent.KEYCODE_DPAD_RIGHT:showNext();return true;}return super.onKeyDown(keyCode, event);}protected void showNext() {last = pos++;if (pos == itemIDs.length) {pos = itemIDs.length - 1;return;}switcher.setInAnimation(this, R.anim.slide_in_right);switcher.setOutAnimation(this, R.anim.slide_out_left);switcher.setImageResource(itemIDs[pos]);indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);}protected void showPre() {last = pos--;if (pos < 0) {pos = 0;return;}switcher.setInAnimation(this, android.R.anim.slide_in_left);switcher.setOutAnimation(this, android.R.anim.slide_out_right);switcher.setImageResource(itemIDs[pos]);indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);}}

主要的代码就是这样的了。当然，之前说了，这不是唯一能实现的方式，还有很多方式都可以实现这样的效果。但是，如果这个用户向导或其他什么向导，只要是以图片切换为主，那么就选用这个ImageSwitcher吧！方便快捷地就能够搭建好应用程序的外观。当然如果是需要View中有控件的切换的话，用ViewPager也是很好的选择。这里就不多介绍了，以后专门写出专题。

更多相关文章

随机推荐