您的位置：首页 > 产品设计 > UI/UE

Android 高级UI设计笔记12：ImageSwitcher图片切换器

2016-04-23 20:02 761 查看
1. ImageSwitcher

ImageSwitcher是Android中控制图片展示效果的一个控件，如：幻灯片效果...，颇有感觉啊。做相册一绝

2. 重要方法

　setImageURI(Uri uri)：设置图片地址

　setImageResource(int resid)：设置图片资源库

　setImageDrawable(Drawable drawable)：绘制图片

3. 设置动画效果

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));

4. 创建ImageSwitcher是通过工厂来实现的，看下面代码：

imageSwicher.setFactory(this);


　　 为了给ViewSwitcher添加多个组件，一般通过调用 ViewSwitcher 的 setFactory(ViewSwitcher.ViewFactory)方法为之设置 ViewFactory, 并由该 ViewFactory 为之创建View即可。

为imageSwitcher设置ViewFactory：

@Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setImageResource(arrayPictures[pictureIndex]);
return imageView;
}


下面再来看看setFactory()方法的具体代码：

public void setFactory(ViewFactory factory) {
mFactory = factory;
obtainView();
obtainView();
}


可以看到在setFactory的同时，调用了两遍obtainView()方法，obtainView()方法就是给ImageSwitcher添加子ImageView的，调用两遍就是添加了两个子ImageView

再来看看obtainView()方法的具体代码：

private View obtainView() {
View child = mFactory.makeView();
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp == null) {
lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
}
addView(child, lp);
return child;
}


可以看到obtainView()方法的的职责就是：通过makeView()方法创建View，然后把创建出来的View添加到ImageSwitcher上

再来看看下面的方法：

public void setImageResource(int resid)
{
ImageView image = (ImageView)this.getNextView();
image.setImageResource(resid);
showNext();
}


此方法就是用来显示下一张图片的，我们可以看到这个方法里面调用了getNextView()方法和showNext()方法，那么我们来看看这两个方法的具体代码：

public View getNextView() {
int which = mWhichChild == 0 ? 1 : 0;
return getChildAt(which);
} 


public void showNext() {
setDisplayedChild(mWhichChild + 1);
}


getNextView()方法是在两个子ImageView之间切换，showNext()方法是负责显示这两个子View中的哪一个

也就是说，现用getNextView()方法得到下一个View，然后重新设置这个View的imageResource，最后通过showNext()方法将下一个View显示出来.

5. 实例：

（1）新建一个Android工程，如下：





（2）来到主布局文件之中activity_main.xml，如下：

 <LinearLayout xmlns:android="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:orientation="vertical"
tools:context="com.himi.galleryimageswitcherdemo.MainActivity" >

<ImageSwitcher
android:id="@+id/imageSwicher"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="@android:color/white"
android:gravity="center" />

</LinearLayout>


（3）来到MainActivity，如下：

 package com.himi.galleryimageswitcherdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements ViewFactory,
OnTouchListener{

private ImageSwitcher imageSwicher;

// 图片数组
private int[] arrayPictures = { R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4 };
// 要显示的图片在图片数组中的Index
private int pictureIndex;
// 左右滑动时手指按下的X坐标
private float touchDownX;
// 左右滑动时手指松开的X坐标
private float touchUpX;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher);

// 为ImageSwicher设置Factory，用来为ImageSwicher制造ImageView
imageSwicher.setFactory(this);
// 设置ImageSwitcher左右滑动事件
imageSwicher.setOnTouchListener(this);
}

public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setImageResource(arrayPictures[pictureIndex]);
return imageView;
}

public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
// 取得左右滑动时手指按下的X坐标
touchDownX = event.getX();
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP) {
// 取得左右滑动时手指松开的X坐标
touchUpX = event.getX();
// 从左往右，看前一张
if (touchUpX - touchDownX > 100) {
// 取得当前要看的图片的index
pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1
: pictureIndex - 1;
// 设置图片切换的动画
imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.slide_in_left));
imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.slide_out_right));
// 设置当前要看的图片
imageSwicher.setImageResource(arrayPictures[pictureIndex]);
// 从右往左，看下一张
} else if (touchDownX - touchUpX > 100) {
// 取得当前要看的图片的index
pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0
: pictureIndex + 1;
// 设置图片切换的动画

imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
// 设置当前要看的图片
imageSwicher.setImageResource(arrayPictures[pictureIndex]);
}
return true;
}
return false;
}

}


布署程序到手机上，如下：





滑动之后跳转到下一张图片，如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航