Android基于ViewFlipper 实现代办事项的上下循环滚动

目标：一个页面实现两个代办事项的上下轮播，并且一个一个往上滚动，当滚动到最后一个的时候，第一个在下面衔接继续滚动。

实现方式：ViewFlipper自带的轮播方案+数据源切换方式

代码实现：

假数据：

        List flipperBeans = new ArrayList<>();
        FlipperBean bean = new FlipperBean();
        bean.setId("1");
        bean.setTime("刚刚");
        bean.setTitle("编程实践：基于支持向量机SVM进行二分类_ev");
        flipperBeans.add(bean);


        FlipperBean bean1 = new FlipperBean();
        bean1.setId("2");
        bean1.setTime("1小时前");
        bean1.setTitle("基于朴素贝叶斯和拉普拉斯平滑预测乳腺癌");
        flipperBeans.add(bean1);

        FlipperBean bean2 = new FlipperBean();
        bean2.setId("3");
        bean2.setTime("2021年10月");
        bean2.setTitle("【编程实践】基于决策树和C4.5算法进行二分类");
        flipperBeans.add(bean2);


        FlipperBean bean3 = new FlipperBean();
        bean3.setId("4");
        bean3.setTime("刚刚");
        bean3.setTitle("【课件】编程实践：BP算法及其应用——波士顿房价预测.pdf");
        flipperBeans.add(bean3);

item布局  flipper_item.xml

自定义的ViewFlipper:

因为需要修改数据源，所以需要再view滚动的时候切换数据，我们需要重写setDisplayedChild方法

MyViewFlipper.java


public class MyViewFlipper extends ViewFlipper {
    List flipperBeans;
    private List orders = new ArrayList<>();

    public MyViewFlipper(Context context) {
        this(context, null);
    }

    public MyViewFlipper(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private FlipperClick click;
    public void setOnFlipperClick(FlipperClick click){
        this.click = click;
    }
    @Override
    public void setDisplayedChild(int whichChild) {
        FlipperBean bean1 = flipperBeans.get(orders.remove(0));
        Integer integer = orders.get(0);
        FlipperBean bean2 = flipperBeans.get(integer);
        flipperBeans.get(integer);
        if (integer >= flipperBeans.size() - 1) {
            orders.add(0);
        } else {
            orders.add(integer + 1);
        }
        View view = getChildAt(whichChild - 1);

        ConstraintLayout top = view.findViewById(R.id.top);
        top.setTag(bean1);
        TextView tv_top_title = view.findViewById(R.id.tv_top_title);
        TextView tv_top_des = view.findViewById(R.id.tv_top_des);
        tv_top_title.setText(bean1.getTitle());
        tv_top_des.setText(bean1.getTime());
        top.setOnClickListener(view12 -> click.onItemClick(0, (FlipperBean) top.getTag()));

        ConstraintLayout bottom = view.findViewById(R.id.bottom);
        bottom.setTag(bean2);
        TextView tv_title = view.findViewById(R.id.tv_title);
        TextView tv_des = view.findViewById(R.id.tv_des);
        tv_title.setText(bean2.getTitle());
        tv_des.setText(bean2.getTime());
            bottom.setOnClickListener(view1 -> click.onItemClick(1, (FlipperBean) bottom.getTag()));

        super.setDisplayedChild(whichChild);
    }

    public void setData(List flipperBeans) {
        this.flipperBeans = flipperBeans;
        orders.add(1);
        orders.add(2);
    }
}

里面的判断都不严谨，需要根据自己的业务逻辑来写判断。

public interface FlipperClick {
    void onItemClick(int item, T t);
}

页面的逻辑

public class TestFlipActivity extends AppCompatActivity {
    private MyViewFlipper viewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_flip);
        viewFlipper = findViewById(R.id.viewFlipper);
        List flipperBeans = new ArrayList<>();
        FlipperBean bean = new FlipperBean();
        bean.setId("1");
        bean.setTime("刚刚");
        bean.setTitle("十一大会议顺利召开，党中央国务院对经济发展做出了指示");
        flipperBeans.add(bean);


        FlipperBean bean1 = new FlipperBean();
        bean1.setId("2");
        bean1.setTime("1小时前");
        bean1.setTitle("基于朴素贝叶斯和拉普拉斯平滑预测乳腺癌");
        flipperBeans.add(bean1);

        FlipperBean bean2 = new FlipperBean();
        bean2.setId("3");
        bean2.setTime("2021年10月");
        bean2.setTitle("【编程实践】基于决策树和C4.5算法进行二分类");
        flipperBeans.add(bean2);


        FlipperBean bean3 = new FlipperBean();
        bean3.setId("4");
        bean3.setTime("刚刚");
        bean3.setTitle("【课件】编程实践：BP算法及其应用——波士顿房价预测.pdf");
        flipperBeans.add(bean3);
        for (int i = 0; i < 1; i++) {
            //初始的时候点击事件也要自己写
            View view = LayoutInflater.from(this).inflate(R.layout.flipper_item, null, false);
            TextView tv_top_title = view.findViewById(R.id.tv_top_title);
            TextView tv_top_des = view.findViewById(R.id.tv_top_des);
            tv_top_title.setText(bean.getTitle());
            tv_top_des.setText(bean.getTime());
            TextView tv_title = view.findViewById(R.id.tv_title);
            TextView tv_des = view.findViewById(R.id.tv_des);
            tv_title.setText(bean1.getTitle());
            tv_des.setText(bean1.getTime());
            viewFlipper.addView(view);
        }
        viewFlipper.setData(flipperBeans);
        //是否自动开始滚动
        viewFlipper.setAutoStart(true);
        //滚动时间
        viewFlipper.setFlipInterval(5000);
        //开始滚动
        viewFlipper.startFlipping();
        //出入动画
        viewFlipper.setOutAnimation(this, R.anim.flipper_out);
        viewFlipper.setInAnimation(this, R.anim.flipper_in);
        viewFlipper.setOnFlipperClick((item, flipperBean) -> {
            Toast.makeText(this, flipperBean.getTitle(), Toast.LENGTH_SHORT).show();
        });
    }
}

最后就是动画阶段

flipper_in.xml  flipper_out.xml

设置50%的移动，一个面有两个View。

这种方式只能说是很粗糙的解决方案，想要完美解决的话只能自定义view自己写动画实现。