Android控件七：视图-图片-文字切换器ViewAnimator

ViewAnimator组件概述
ViewAnimator是一个基类，它继承了 FrameLayout，因此它表现出FrameLayout的特征，可以将多个View组件叠在一起。 ViewAnimator额外增加的功能可以在View切换时表现出动画效果。

ViewAnimator及其子类也是一组非常重要的UI组件，这种组件的主要功能是增加动画效果，从而使界面更加炫。使用ViewAnimator 时可以指定如下常见XML属性。

android:animateFirstView：设置ViewAnimator显示第一个View组件时是否使用动画。
android:inAnimation：     设置ViewAnimator显示组件时所使用的动画。
android:outAnimation：    设置ViewAnimator隐藏组件时所使用的动画。

1，ViewSwitcher使用

ViewSwitcher代表了视图切换组件，它本身继承了 FrameLayout,因此可以将多个View 层叠在一起，每次只显示一个组件。当程序控制从一个View切换到另一个View时， ViewSwitcher支持指定动画效果。
为了给ViewSwitcher添加多个组件，一般通过调用ViewSwitcher的setFactory (ViewSwitcherViewFactory)方法为之设置 ViewFactory，并由该 ViewFactory 为之创建 View 即可。

效果图：
在这里插入图片描述
实现过程：

1 在xml布局文件中添加ViewSwitcher组件，和Button按钮，以控制翻页。
activity_test1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ViewSwitcher
        android:id="@+id/viewSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ViewSwitcher>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="next"
            android:text="下一个"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="prev"
            android:text="上一个"/>
    </LinearLayout>
</LinearLayout>

2 创建一个布局文件，给ViewSwitcher中每一个View设置的布局。（item）
slideimage2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/slideimg">
    </ImageView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是图片"
        android:textSize="20sp"
        android:id="@+id/slidetx">
    </TextView>
</LinearLayout>

3 获取到ViewSwitcher组件，并初始化变量。

private ViewSwitcher viewSwitcher;

viewSwitcher = (ViewSwitcher)findViewById(R.id.viewSwitcher);

4 给ViewSwitcher设置一个Factory，使用LayoutInflater.from(this). inflate(R.layout.slideimage,null)将xml布局文件转化为一个View对象，供makeView()方法使用。

    viewSwitcher.setFactory(new ViewSwitcher.ViewFactory() {

        @Override

        public View makeView() {

            return inflater.inflate(R.layout.slideimage2,null);

        }

    });

5 设置next和prev方法，用于控制上下翻页，这里注意控制边界，然后给ViewSwitcher设置动画，由于自带的动画只有从左淡入，从右淡出，可以用于向前翻页，向后翻页应是相反的，所以需要自定义动画效果。

public void next(View view){
        if(count>=images.length-1)
            count=-1;
        viewSwitcher.setInAnimation(this,R.anim.slide_in_right);
        viewSwitcher.setOutAnimation(this,R.anim.slide_out_left);
        ImageView img = viewSwitcher.getNextView().findViewById(R.id.slideimg);
        img.setImageResource(images[++count]);
        TextView tv = viewSwitcher.getNextView().findViewById(R.id.slidetx);
        tv.setText("我是图片"+(count+1));
        viewSwitcher.showNext();
    }
    public void prev(View view){
        if(count<1)
            count = images.length;
        viewSwitcher.setInAnimation(this,android.R.anim.slide_in_left);
        viewSwitcher.setOutAnimation(this,android.R.anim.slide_out_right);
        ImageView img = viewSwitcher.getNextView().findViewById(R.id.slideimg);
        img.setImageResource(images[--count]);
        TextView tv = viewSwitcher.getNextView().findViewById(R.id.slidetx);
        tv.setText("我是图片"+(count+1));
        viewSwitcher.showPrevious();
    }

2，TextSwitcher使用

TextSwitcher继承了 ViewSwitcher，因此它具有与ViewSwitcher相同的特征：可以在切换 View组件时使用动画效果。与ImageSwitcher相似的是，使用TextSwitcher也需要设置一个 ViewFactory。与 ImageSwitcher 不同的是，TextSwitcher 所需的 ViewFactory 的 makeView()方法必须返回一个TextView组件。
TextSwitcher与TextView的功能有点相似，它们都可用于显示文本内容，区别在于TextSwitcher的效果更炫，它可以指定文本切换时的动画效果。

效果图：
点击TextSwitcher将会切换显示的文本，同时会出现动画效果效果图：（竖向滚动条）
在这里插入图片描述

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextSwitcher
        android:id="@+id/text_switcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"
        android:onClick="next"/>
</LinearLayout>

主程序代码如下：

public class TextSwitcherActivity extends AppCompatActivity {

    private TextSwitcher textSwitcher;
    private String[] strs = new String[]{"疯狂Android讲义","疯狂Java讲义","疯狂Ajax讲义"};
    private int curStr=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_switcher);
        textSwitcher = (TextSwitcher) findViewById(R.id.text_switcher);
        textSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                TextView textView = new TextView(TextSwitcherActivity.this);
                textView.setTextSize(17);
                textView.setTextColor(Color.MAGENTA);
                return textView;
            }
        });
        //调用next()方法显示下一条字符串
        next(null);
    }

    /**
     * 事件处理方法
     * @param view
     */
    public void next(View view){
        textSwitcher.setText(strs[curStr++%strs.length]);
    }
}

3，ImageSwitcher使用

ImageSwitcher继承了 ViewSwitcher，因此它具有与ViewSwitcher相同的特征：可以在切换View组件时使用动画效果。ImageSwitcher继承了 ViewSwitcher，并重写了 ViewSwitcher 的 showNext()、showPrevious()方法，因此 ImageSwitcher 使用起来更加简单。

使用 ImageSwitcher 只要如下两步即可：

1，为 ImageSwitcher 提供一个 ViewFactory，该 ViewFactory 生成的 View 组件必须是 ImageView。
2，需要切换图片时，只要调用 ImageSwitcher 的 setImageDrawable(Drawable drawable)、 setImageResource(int resid)和 setImageURI(Uri uri)方法更换图片即可。

实例：支持动画的图片浏览器

布局文件：

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:gravity="center_horizontal"
     android:orientation="vertical" >

     <!-- 定义一个GridView组件 -->     <GridView
         android:id="@+id/grid01"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:horizontalSpacing="pt"
         android:numColumns="4"
         android:verticalSpacing="2pt" />     
     <!-- 定义一个ImageSwitcher组件 -->     <ImageSwitcher
         android:id="@+id/switcher"
         android:layout_width="300dp"
         android:layout_height="300dp"
         android:layout_gravity="center_horizontal"
         android:inAnimation="@android:anim/fade_in"
         android:outAnimation="@android:anim/fade_out" />
 </LinearLayout>

Java代码中：

public class ImageSwitcherTest extends Activity {

     int[] imageIds = new int[] { R.drawable.bomb5, R.drawable.bomb6,
             R.drawable.bomb7, R.drawable.bomb8, R.drawable.bomb9,
             R.drawable.bomb10, R.drawable.bomb11, R.drawable.bomb12,
             R.drawable.bomb13, R.drawable.bomb14, R.drawable.bomb15,
             R.drawable.bomb16 };
             
     ImageSwitcher switcher;

     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         // 创建一个List对象，List对象的元素是Map         
         List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();
         for (int i = 0; i < imageIds.length; i++) {
             Map<String, Object> listItem = new HashMap<String, Object>();
             listItem.put("image", imageIds[i]);
             listItems.add(listItem);
         }
         // 获取显示图片的ImageSwitcher                  
         switcher = (ImageSwitcher) findViewById(R.id.switcher);
         // 为ImageSwitcher设置图片切换的动画效果         
         switcher.setFactory(new ViewFactory() {
             @Override
             public View makeView() {
                 // 创建ImageView对象                
                  ImageView imageView = new ImageView(ImageSwitcherTest.this);
                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                         LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                 // 返回ImageView对象                 
                 return imageView;
             }
         });
         // 创建一个SimpleAdapter         
         SimpleAdapter simpleAdapter = new SimpleAdapter(this,  listItems , R.layout.cell, new String[] { "image" }, new int[] { R.id.image1 });
         GridView grid = (GridView) findViewById(R.id.grid01);
         // 为GridView设置Adapter        
          grid.setAdapter(simpleAdapter);
         // 添加列表项被选中的监听器         
         grid.setOnItemSelectedListener(new OnItemSelectedListener() {
             @Override
             public void onItemSelected(AdapterView<?> parent, View view,
                     int position, long id) {
                 // 显示当前被选中的图片                
                  switcher.setImageResource(imageIds[position]);
             }
             @Override
             public void onNothingSelected(AdapterView<?> parent) {
             }
         });
         // 添加列表项被单击的监听器         
         grid.setOnItemClickListener(new OnItemClickListener() {
             @Override
             public void onItemClick(AdapterView<?> parent, View view,
                     int position, long id) {
                 // 显示被单击的图片的图片                
                  switcher.setImageResource(imageIds[position]);
             }
         });
     } }