VIewAnimator及其子类

一 ViewAnimator的继承关系

        --FrameLayout 

           --ViewAnimator

                 --ViewSwitcher

                              --imageSwitcher

                              --TextSwitcher

                 --ViewFlipper

说明，ViewAnimator继承FrameLayout，可见它可以将多个View重叠在一起，每次只能显示一个View，当程序控制一个View切换到另一个view，ViewSwitcher支持指定动画效果。

二 仿Launcher界面

       仿Launcher界面使用多个GirdView组合而成，在这里使用ViewSwitcher进行组合GirdView，点击左右按钮实现GridView替换。

1 布局xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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/view_Switcher"        android:layout_width="match_parent"        android:layout_height="match_parent"/>    <Button        android:id="@+id/btn_pre"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="60sp"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:background="@android:color/transparent"        android:text="&lt;"/>    <Button        android:id="@+id/btn_next"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="60sp"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:background="@android:color/transparent"        android:text="&gt;"/></RelativeLayout>

2 需要组合的GridView布局

item_vswitcher.xml:

<?xml version="1.0" encoding="utf-8"?><GridView xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:numColumns="3"    android:layout_width="match_parent"    android:layout_height="match_parent"></GridView>

3 GridView的item布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:gravity="center_horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:id="@+id/item_img_vs"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/item_txt_vs"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

4 GridView的适配器

public class GridBaseAdapter extends BaseAdapter {    private int screenNo;    private Context context;    private ArrayList<DataItem> items;    /** 屏幕总数*/    private int screenCount = 0;    public GridBaseAdapter(int screenNo, Context context, ArrayList<DataItem> items,int screenCount) {        this.screenNo = screenNo;        this.context = context;        this.items = items;        this.screenCount = screenCount;    }    @Override    public int getCount() {        if (items == null){            return  0;//到最后一屏，且不能整除        }else if (items.size() % ViewSwitcherActivity.NUMBER_PER_SCREEN != 0                &&  screenNo == screenCount -1 ){            return items.size() % ViewSwitcherActivity.NUMBER_PER_SCREEN;        }else {// 否则返回 NUMBER_PER_SCREEN            return ViewSwitcherActivity.NUMBER_PER_SCREEN;        }    }    @Override    public Object getItem(int position) {        return items.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder holder = null;        if (convertView == null){            convertView = LayoutInflater.from(context).inflate(R.layout.item_grid,parent,false);            holder = new ViewHolder();            holder.img = (ImageView) convertView.findViewById(R.id.item_img_vs);            holder.txt = (TextView) convertView.findViewById(R.id.item_txt_vs);            convertView.setTag(holder);        }else {            holder = (ViewHolder) convertView.getTag();        }        holder.img.setImageDrawable(items.get(position).drawable);        holder.txt.setText(items.get(position).dataName);        return convertView;    }    static class ViewHolder{        public ImageView img;        public TextView txt;    }}

5 动画XML文件

left_enter.xml：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:fromXDelta="-100%"    android:toXDelta="0"    android:duration="600"></translate>

left_exit.xml：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:fromXDelta="0"    android:toXDelta="100%"    android:duration="600"> 

</translate>   

right_enter.xml：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:fromXDelta="100%"    android:toXDelta="0"    android:duration="600"></translate>

right_exit.xml：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:fromXDelta="0"    android:toXDelta="-100%"    android:duration="600"></translate>

6 使用ViewFactory添加GridView

viewSwitcher = (ViewSwitcher) findViewById(R.id.view_Switcher);viewSwitcher.setFactory(new ViewSwitcher.ViewFactory() {            @Override            public View makeView() {                return LayoutInflater.from(ViewSwitcherActivity.this).inflate(R.layout.item_vswitcher,null);            }        });

7 显示第一个屏幕

 //显示第一页        screenNo ++;        viewSwitcher.setInAnimation(this,R.anim.left_enter);        viewSwitcher.setOutAnimation(this,R.anim.left_exit);        ( (GridView)viewSwitcher.getNextView()).setAdapter(adapter);        viewSwitcher.showNext();

8 处理btn_pre、btn_next按钮实现GridView切换

    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.btn_pre:                if (screenNo >0){                    screenNo --;//记录当前屏幕                    //添加XML动画，右进左出                    viewSwitcher.setInAnimation(this,R.anim.right_enter);                    viewSwitcher.setOutAnimation(this,R.anim.right_exit);                    ( (GridView)viewSwitcher.getNextView()).setAdapter(adapter);                    viewSwitcher.showPrevious();                }                break;            case R.id.btn_next:                if (screenNo <= screenCount){                    screenNo ++;//记录当前屏幕                    //添加XML动画，左进右出                    viewSwitcher.setInAnimation(this,R.anim.left_enter);                    viewSwitcher.setOutAnimation(this,R.anim.left_exit);                    ( (GridView)viewSwitcher.getNextView()).setAdapter(adapter);                    viewSwitcher.showNext();                }                break;        }    }

完整源码点击查看。

效果图：

三 imageSwitcher

  imageSwitcher继承了ViewSwitcher，也继承了相应的功能，在View切换时添加动画效果，它重写了ViewSwitcher的showNext、showPrevious的方法，唯一的区别就是在使用ViewFactory创建View时，要求返回的必须是ImageView，如下：

imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {            @Override            public View makeView() {                ImageView img = new ImageView(ImageSwitcherActivity.this);                ImageSwitcher.LayoutParams layoutParams = new ImageSwitcher.LayoutParams(600,600);                img.setLayoutParams(layoutParams);                img.setScaleType(ImageView.ScaleType.FIT_XY);                return img;            }        });

      使用示例点击查看。

效果图：

四 TextSwitcher

   TextSwitcher类似于ImageSwitcher，继承ViewSwitcher，区别ViewFactory返回的必须是TextView，如下：

 textSwitcher.setFactory(new ViewSwitcher.ViewFactory() {            @Override            public View makeView() {                TextView img = new TextView(ImageSwitcherActivity.this);                ImageSwitcher.LayoutParams layoutParams = new ImageSwitcher.LayoutParams(                        ImageSwitcher.LayoutParams.WRAP_CONTENT,ImageSwitcher.LayoutParams.WRAP_CONTENT);                img.setLayoutParams(layoutParams);                img.setText("疯狂的小石头");                return img;            }        });

五 ViewFlipper

     ViewFlipper继承了ViewAnimator，它是通过addView添加view，可以实现图片的自动播放，它与AdapterViewFlipper非常相似，不同的地方就是ViewFlipper通过addView添加图片，而AdapterViewFlipper需要通过适配器Adapter添加多个View，直接使用一个简单示例说明下：

1 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">    <ViewFlipper        android:id="@+id/view_flipper"        android:layout_width="match_parent"        android:layout_weight="1"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/img1"            android:src="@mipmap/pic_2"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <ImageView            android:id="@+id/img2"            android:src="@mipmap/pic_3"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <ImageView            android:id="@+id/img3"            android:src="@mipmap/pic_4"            android:layout_width="match_parent"            android:layout_height="match_parent" />    </ViewFlipper>    <LinearLayout        android:layout_width="match_parent"        android:layout_marginTop="20dp"        android:gravity="center"        android:layout_height="wrap_content"        android:layout_marginBottom="10dp"        android:orientation="horizontal">        <Button            android:text="下一个"            android:onClick="next"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <Button            android:text="上一个"            android:onClick="previous"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <Button            android:text="自动播放"            android:onClick="auto"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>    </LinearLayout></LinearLayout>

2 实现播放

public class ViewFlipperActivity extends Activity  {    private ViewFlipper flipper;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_view_flipper);        flipper = (ViewFlipper) findViewById(R.id.view_flipper);    }    public void next(View view){        flipper.setInAnimation(this,R.anim.left_enter);        flipper.setOutAnimation(this,R.anim.left_exit);        flipper.showNext();        flipper.stopFlipping();    }    public void previous(View view){        flipper.setInAnimation(this,R.anim.right_enter);        flipper.setOutAnimation(this,R.anim.right_exit);        flipper.showPrevious();        flipper.stopFlipping();    }    public void auto(View view){        flipper.startFlipping();    }} 

效果图：