VIewAnimator及其子类

最新推荐文章于 2019-08-14 16:39:16 发布

Lu'Blog

最新推荐文章于 2019-08-14 16:39:16 发布

阅读量330

点赞数

分类专栏： Android 动画文章标签： VIewAnimator ImageSwitcher TextSwitcher ViewFlipper

本文链接：https://blog.csdn.net/lu1024188315/article/details/76545867

版权

Android 动画专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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