ImageSwitcher是系统提供的用于切换图片的UI控件,下面将用一个demo演示ImageSwitcher的用法。
ImageSwitcherDEMO简介
该demo使用ImageSwitcher和ImageView控件实现动态的图片切换,demo的效果如下图所示:
demo初始时
点击第九张图片
点击第三张图片
XML布局
由于Gallery已经不被推荐使用,可以用HorizontalScrollView和LinearLayout的组合替代Gallery。
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="${relativePackage}.${activityClass}" >
<ImageSwitcher
android:id="@+id/image_switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/linear_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
该XML布局定义了一个ImageSwitcher和一个HorizontalScrollView,HorizontalScrollView中定义了一个LinearLayout,用于在代码中动态添加图片的略缩图。
需要注意:HorizontalScrollView中的直接子控件只能有一个。
Activity逻辑实现
activity代码如下所示:
public class MainActivity extends Activity {
private ImageSwitcher mImageSwitcher;
private LinearLayout mLinearLayout;
private int[] mImageSmall = new int[] { R.drawable.android_1,
R.drawable.android_2, R.drawable.android_3, R.drawable.android_4,
R.drawable.android_5, R.drawable.android_6, R.drawable.android_7,
R.drawable.android_8, R.drawable.android_9, R.drawable.android_10 };
private int[] mImage = new int[] { R.drawable.android1,
R.drawable.android2, R.drawable.android3, R.drawable.android4,
R.drawable.android5, R.drawable.android6, R.drawable.android7,
R.drawable.android8, R.drawable.android9, R.drawable.android10 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLinearLayout = (LinearLayout) findViewById(R.id.linear_layout);
mImageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);
mImageSwitcher.setFactory(new ViewFactory() {
@Override
public View makeView() {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(MainActivity.this);
return imageView;
}
});
mImageSwitcher.setInAnimation(this, android.R.anim.fade_in);
mImageSwitcher.setOutAnimation(this, android.R.anim.fade_out);
mImageSwitcher.setImageResource(mImage[0]);
for (int i = 0; i < mImageSmall.length; ++i) {
mLinearLayout.addView(getView(i));
}
}
private View getView(final int i) {
// TODO Auto-generated method stub
ImageView _imageView = new ImageView(this);
_imageView.setImageResource(mImageSmall[i]);
_imageView.setId(i);
_imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mImageSwitcher.setImageResource(mImage[i]);
Toast.makeText(MainActivity.this,
"您选择了第" + (v.getId() + 1) + "张图片", Toast.LENGTH_SHORT)
.show();
}
});
return _imageView;
}
}
代码中需注意以下几点:
- 需要为ImageSwitcher控件设置setFactory方法,该方法中需要一个ViewFactory接口对象,在该接口的makeView方法中需要新建一个ImageView。
- 为ImageSwitcher添加淡入的动画切换效果为ImageSwitcher的setInAnimation方法;添加淡出的动画切换效果为ImageSwitcher的setOutAnimation方法。