美文网首页
Android控件之ViewFlipper视图View复用

Android控件之ViewFlipper视图View复用

作者: 上善若水Ryder | 来源:发表于2021-04-28 22:55 被阅读0次

    ViewFlipper介绍

     1. Android自带控件;
     2. 多页面管理控件,且可自动播放;
    

    与ViewPager区别

      1. ViewPager是一页页的,而ViewFlipper则是一层层的;
      2. ViewPager通常用于类似引导页,ViewFlipper通常用于上下翻滚;
    

    ViewFlipper源码位置

    ~/android-sdk-macosx/sources/android-30/android/widget
    

    ViewFlipper继承结构

    package android.widget;
    ...
    import android.widget.RemoteViews.RemoteView;
    ...
    @RemoteView
    public class ViewFlipper extends ViewAnimator {
        ...
    }
    package android.widget;
    ...
    public class ViewAnimator extends FrameLayout {
        ...
    }
    

    ViewFlipper是ViewAnimator的子类,而ViewAnimator又是继承自FrameLayout,FrameLayout就是平时基本上只显示一个子视图的布局。ViewFlipper调用addView(View view)添加视图组件,一旦向ViewFlipper中添加了多个视图组件之后,ViewFlipper可使用动画控制实现多个视图的切换效果。

    常用函数介绍

    • startFlipping
      开始执行追加的View间的切换
    • stopFlipping
      停止执行追加的View间的切换
    • setFlipInterval
      设置View之间切换的时间间隔,单位是毫秒。
    • isFlipping
      判断是否执行View间的切换
    • setAutoStart
      设置是否自动开启View间的切换
    • isAutoStart
      判断是否为自动开始浏览

    视图View复用

    思考:
    自定义View,或者是ViewFlipper的子类,主要是将ViewFlipper的子视图总数设置为2,这样可以实现翻滚动效。
    如何保持ViewFlipper的子视图的总数为2呢?每次获取下一个子视图之前,将第二个子视图移除掉,重新通过addView(View view)追加到ViewFlipper,并且指定在第一个位置(索引为0),接下来就可以设置期望展示的动效,并直接切换到第一个子视图。

        /**
         * 子视图的总个数
         */
        public static final int COUNT_CHILD_VIEW = 2;
    
        /**
         * 处理ViewFlipper中的视图
         */
        private void next() {
            // 获取子View个数,这里返回是2,因为我们就追加了2个视图
            int childCount = mViewFlipper.getChildCount();
            // 其实这里获取到子视图个数就是2,因为前面我们追加的视图个数最多就是2个
            if (COUNT_CHILD_VIEW == childCount) {
                // 移除最后一个视图,这里返回子View总数还有1个
                mViewFlipper.removeViewAt(childCount - 1);
            }
            // 获取下一个子视图
            View view = getNextView();
            if (view == null) {
                return;
            }
            // 将下一个子视图插入到第一个位置,该子视图的父类就是ViewFlipper
            mViewFlipper.addView(view, 0);
            // 获取子View个数,这里返回是2,因为刚插入了一个子视图
            childCount = mViewFlipper.getChildCount();
            if (0 != childCount) {
                // 进来动画
                mViewFlipper.setInAnimation(getContext(), R.anim.slide_in_vertical);
                // 离开动画
                mViewFlipper.setOutAnimation(getContext(), R.anim.slide_out_vertical);
                // 直接显示刚刚插入第一个位置的子视图
                mViewFlipper.setDisplayedChild(0);
            }
        }
    

    实现ViewFlpper视图复用的关键代码

        private RyderViewFlipper mViewFlipper;
        /**
         * 数据源
         */
        private List<String> mDataSource;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mViewFlipper = findViewById(R.id.container_view_flipper);
            mDataSource = new ArrayList<>();
            for (int i = 0; i < 1000 ; i++) {
                mDataSource.add("第" + i + "张");
            }
            mViewFlipper.setDataSource(mDataSource);
        }
    
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <com.ryderwang.study.viewfliper.view.RyderViewFlipper
            android:id="@+id/container_view_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </RelativeLayout>
    
    /**
     * @ClassName: RyderViewFliper
     * @Author: RyderWang
     * @Date: 2021/4/26 23:05
     * @Description:
     */
    public class RyderViewFlipper extends LinearLayout {
    
        ...
    
        @Override
        public View getNextView() {
            if (mDataSource == null || mDataSource.size() == 0) {
                return null;
            }
            mCurrentIndex++;
            mCurrentIndex = mCurrentIndex % mDataSource.size();
            return getItemView(mDataSource.get(mCurrentIndex));
        }
    
        @Override
        public View getPreviousView() {
            if (mDataSource == null || mDataSource.size() == 0) {
                return null;
            }
            mCurrentIndex--;
            if (mCurrentIndex < 0) {
                mCurrentIndex = mDataSource.size() - 1;
            }
            return getItemView(mDataSource.get(mCurrentIndex));
        }
    
        private Runnable mScrollRunnable = new Runnable() {
            @Override
            public void run() {
                if (isStop) {
                    return;
                }
                next();
                mHandler.postDelayed(mScrollRunnable, SCROLL_DURATION);
            }
        };
        ...
    }
    

    具体用法可见demo,效果图自行运行吧

    源码下载直达点击

    相关文章

      网友评论

          本文标题:Android控件之ViewFlipper视图View复用

          本文链接:https://www.haomeiwen.com/subject/gdemrltx.html