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="<"/>

<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=">"/>

</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();
}
}

效果图：