ViewFlipper的滚动效果

1、先看看效果图

2、MainActivity

public class MainActivity extends AppCompatActivity {

    List<String> data = new ArrayList<>();
    List<View> views = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final MyViewFlipper myViewFlipper = (MyViewFlipper) findViewById(R.id.my_viewflipper);
        //初始化数据
        final int DATA_NUM = 3;//如果设置为1，就不会滚动
        for (int i = 0; i < DATA_NUM; i++) {
            data.add("数据：" + (i + 1));
        }

        for (int i = 0; i < data.size(); i++) {
            LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_viewflipper_layout, null);
            ImageView imageView = (ImageView) moreView.findViewById(R.id.image);
            TextView text = (TextView) moreView.findViewById(R.id.text);
            //赋值
            text.setText(data.get(i).toString());
            //添加
            views.add(moreView);
        }

        myViewFlipper.setViews(views);
        //每个item的点击事件
        myViewFlipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //myViewFlipper.getDisplayedChild(),是从0开始的
                Toast.makeText(MainActivity.this, "myViewFlipper.getDisplayedChild() = " + myViewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
            }
        });

    }

}

3、activity_main 很简单，就一个控件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.epet.mytestapplication.MyViewFlipper
        android:id="@+id/my_viewflipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"/>

</LinearLayout>

4、MyViewFlipper

public class MyViewFlipper extends ViewFlipper {

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

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        int interval = 2500;
        int animDuration = 1000;
        //View之间切换的时间间隔
        setFlipInterval(interval);

        Animation animIn = AnimationUtils.loadAnimation(context, R.anim.anim_marquee_in);
        animIn.setDuration(animDuration);
        setInAnimation(animIn);
        Animation animOut = AnimationUtils.loadAnimation(context, R.anim.anim_marquee_out);
        animOut.setDuration(animDuration);
        setOutAnimation(animOut);
    }

    /**
     * 设置循环滚动的View数组
     * @param views
     */
    public void setViews(List<View> views) {
        removeAllViews();
        int size = views.size();
        if (size == 0)
            return;
        for (int i = 0; i < size; i++) {
            addView(views.get(i));
        }
        if (size == 1) {//如果只有一个，不滚动;多个数据，才滚动
            stopFlipping();
        } else {
            startFlipping();
        }
    }

}

5、item_viewflipper_layout，这个布局，根据自己的要求来。我这里就简单的一个图片和文字

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:textSize="28sp"/>

</LinearLayout>

6、好了，可以达到最上面的效果了