android 滚动播报效果的实现

使用ViewFlipper来实现滚动播报效果

先来一个简单的示例，直接滚动播放几张图片：

代码其实很简单，就是先设置需要循环播放的内容，设置几个播放的动画；

package com.example.admin.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;


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

        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        viewFlipper.setInAnimation(getApplicationContext(),R.anim.in_viewpflipper);
        viewFlipper.setOutAnimation(getApplicationContext(),R.anim.out_viewflipper);
        viewFlipper.startFlipping();
    }
}

activity_main.xml

动画文件：

in_viewflipper.xml

out_viewflipper.xml

接下来实现一下用自定义布局作为每一个item布局，并且根据数据的多少动态显示item个数

package com.example.admin.example;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;

    private int[] icons = new int[]{R.mipmap.bg_01_selected, R.mipmap.bg_01_selected_newyear, R.mipmap.bg_beauty_program};

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


        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        addViews(viewFlipper, getDatas());
        viewFlipper.setInAnimation(getApplicationContext(), R.anim.in_viewpflipper);
        viewFlipper.setOutAnimation(getApplicationContext(), R.anim.out_viewflipper);
        viewFlipper.startFlipping();
    }

    /**
     * 获取自定义布局视图
     *
     * @return
     */
    private View getView() {
        View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_main, null);
        return view;
    }

    /**
     * 将每一个布局视图添加到ViewFlipper
     *
     * @param viewFlipper
     * @param datas
     */
    private void addViews(ViewFlipper viewFlipper, final List datas) {
        if (viewFlipper == null || datas == null || datas.size() == 0) {
            return;
        }
        for (int i = 0; i < datas.size(); i++) {
            View view = getView();
            ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
            TextView textView = (TextView) view.findViewById(R.id.textview);
            imageView.setImageResource(datas.get(i).getIcon());
            textView.setText(datas.get(i).getText());
            final int position = i;
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(getApplicationContext(), position + datas.get(position).getText(), Toast.LENGTH_SHORT).show();
                }
            });
            viewFlipper.addView(view);
        }

    }

    private List getDatas() {
        List datas = new ArrayList();
        Data data = null;
        for (int i = 0; i < icons.length; i++) {
            data = new Data();
            data.setIcon(icons[i]);
            data.setText(i + "庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。\n" +
                    "雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。");
            datas.add(data);
        }
        return datas;
    }

    class Data {
        private int icon;
        private String text;

        public int getIcon() {
            return icon;
        }

        public void setIcon(int icon) {
            this.icon = icon;
        }

        public String getText() {
            return text;
        }

        public void setText(String text) {
            this.text = text;
        }
    }
}

activity_main.xml

item_main.xml

效果：