Android ViewFlipper控件使用之——滑动轮播公告的实现

使用ViewFlipper控件实现轮播公告

前言

ViewFlipper是一个切换控件
1、一般用于图片的切换
2、也可以用来添加View，不限定只用于ImageView，也可以是自定义View；只是我们经常利用ViewFlipper来实现ImageView的切换，如果切换自定义的View，使用ViewPager做更方便吧。

一、使用ViewFlipper实现轮播公告demo案例

1、布局文件配置：

ViewFlipper布局：

<ViewFlipper
        android:id="@+id/vf_notice"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:autoStart="true"
        android:background="@mipmap/new_home_bubble"
        android:flipInterval="3000"
        android:inAnimation="@anim/home_notice_in"
        android:outAnimation="@anim/home_notice_out" />

进入动画home_notice_in：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromYDelta="100.0%p"
        android:toYDelta="0.0"/>

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>

</set>

滑出动画home_notice_out:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromYDelta="0.0"
        android:toYDelta="-100.0%p"/>

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>

</set>

new_notice_item布局
自定义view填充ViewFlipper
「这里demo使用的是ViewFlipper.add(view)方式」

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:gravity="center_vertical"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="测试测试"
        android:textColor="#256470"
        android:textSize="20dp"/>

</LinearLayout>

2、代码逻辑实现

public class MainActivity extends Activity {

    private ViewFlipper mViewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
    }

    private void initView() {
        mViewFlipper = (ViewFlipper) findViewById(R.id.vf_notice);
    }

    private void initData() {
        List<String> list = new ArrayList<>();
        list.add("这是公告111");
        list.add("这是公告222");
        list.add("这是公告333");
        initNotice(list);
    }

    //设置滑动轮播list
    private void initNotice(final List<String> list) {
        mViewFlipper.removeAllViews();//先移除之前的所有view
        for (int i = 0; i < list.size(); i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.new_notice_item, null);
            TextView tvValue = (TextView) view.findViewById(R.id.tv_value);
            tvValue.setText(list.get(i));
            final int finalI = i;
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, list.get(finalI), Toast.LENGTH_SHORT).show();
                }
            });
            mViewFlipper.addView(view);//add方式进行添加
        }
        if (mViewFlipper.getChildCount() > 1) {
            mViewFlipper.startFlipping();//开启动画
        } else {
            mViewFlipper.stopFlipping();//关闭动画
        }
    }
}

二、ViewFlipper使用介绍

1、在xml布局中的方法介绍:

android:autoStart： 设置自动加载下一个View

android:flipInterval：设置View之间切换的时间间隔

android:inAnimation： 设置切换View的进入动画

android:outAnimation：设置切换View的退出动画

2、在代码中设置的方法介绍：

isFlipping： 判断View切换是否正在进行

setFilpInterval：设置View之间切换的时间间隔

startFlipping： 开始View的切换，而且会循环进行

stopFlipping： 停止View的切换

setOutAnimation：设置切换View的退出动画

setInAnimation： 设置切换View的进入动画

showNext： 显示ViewFlipper里的下一个View

showPrevious： 显示ViewFlipper里的上一个View

demo

viewflipper.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.home_notice_in));         

viewflipper.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.home_notice_out));
 
viewflipper.showNext();