用ImageSwitcher实现图片动态切换

来源:互联网 发布:机油加盟代理淘宝 编辑:程序博客网 时间:2024/06/07 20:08

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;    }}

代码中需注意以下几点:

  1. 需要为ImageSwitcher控件设置setFactory方法,该方法中需要一个ViewFactory接口对象,在该接口的makeView方法中需要新建一个ImageView。
  2. 为ImageSwitcher添加淡入的动画切换效果为ImageSwitcher的setInAnimation方法;添加淡出的动画切换效果为ImageSwitcher的setOutAnimation方法。
0 0
原创粉丝点击