Android仿淘宝头条滚动广告条

之前我使用TextView+Handler+动画，实现了一个简单的仿淘宝广告条的滚动， https://download.csdn.net/download/qq_35605213/9660825；无意中发现ViewFlipper这个控件，拿来一试；很轻松的就实现了文字的替换功能；

下载地址：点击打开链接

源码：https://github.com/CuiChenbo/UpRollView

代码：

private ViewFlipper vf;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    vf = findViewById(R.id.vf);    vf.setFlipInterval(2000);//设置时间间隔    setData();}String datas[] = {"对Kotlin的第一印象"        ,"Android.Kotlin的杀手锏"        ,"Kotlin很简洁"        ,"Kotlin很擅长“拿来主义"        ,"其实我也就是走马观花"};private void setData() {    for (int i = 0; i < datas.length; i++) {        TextView tv = new TextView(this);        tv.setText(datas[i]);        vf.addView(tv); //把需要滚动布局添加到ViewFlipper    }    vf.startFlipping(); //开始滚动}

XML布局:

<?xml version="1.0" encoding="utf-8"?>

只不过没有动画的效果，下面我再给它加上从下面滑进来和向上滑出去的动画；

<?xml version="1.0" encoding="utf-8"?>            <?xml version="1.0" encoding="utf-8"?>            vf.setInAnimation(this,R.anim.in); //设置动画效果vf.setOutAnimation(this,R.anim.out);

哈哈，这下效果就很像了；

不过淘宝是双条的，这个怎么实现呢？

private ViewFlipper vf;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    vf = findViewById(R.id.vf);    vf.setFlipInterval(2000);//设置时间间隔    vf.setInAnimation(this,R.anim.in);    vf.setOutAnimation(this,R.anim.out);    setData();}String datas[] = {"鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"        ,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"        ,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"        ,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"        ,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"        ,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"        ,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"        ,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮","2鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"};private void setData() {    for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据        View v = View.inflate(this,R.layout.item,null);        TextView tv1 = v.findViewById(R.id.tv1);        TextView tv2 = v.findViewById(R.id.tv2);        tv1.setText(datas[i]);        if (datas.length > i+1){            tv2.setText(datas[i+1]);        }else {            tv2.setVisibility(View.GONE);        }        vf.addView(v); //把需要滚动布局添加到ViewFlipper    }    vf.startFlipping(); //开始滚动}

布局文件：

<?xml version="1.0" encoding="utf-8"?>

很容易看懂的，轻松完成；

属性介绍:
android:autoStart：设置自动加载下一个View
android:flipInterval：设置View之间切换的时间间隔
android:inAnimation：设置切换View的进入动画
android:outAnimation：设置切换View的退出动画

方法介绍：
isFlipping：判断View切换是否正在进行
setFilpInterval：设置View之间切换的时间间隔
startFlipping：开始View的切换，而且会循环进行
stopFlipping：停止View的切换
setOutAnimation：设置切换View的退出动画
setInAnimation：设置切换View的进入动画
showNext：显示ViewFlipper里的下一个View

showPrevious：显示ViewFlipper里的上一个View

随便抽取一下，方便使用：

public class UpView extends ViewFlipper { private Context content;    public UpView(Context context) {        super(context);        init(context);    }    private int Interval = 3000;    public UpView(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    private void init(Context context) {        this.content = context;        setFlipInterval(Interval);//设置时间间隔        setInAnimation(context,R.anim.in);        setOutAnimation(context,R.anim.out);    }    public void setInterval(int i){        Interval = i;    }    /**     * 设置循环滚动的View数组     */    public void setViews(final List views) {        if (views == null || views.size() == 0) return;        removeAllViews();        for ( int i = 0; i < views.size(); i++) {            final int finalposition=i;            //设置监听回调            views.get(i).setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    if (onItemClickListener != null) {                        onItemClickListener.onItemClick(finalposition, views.get(finalposition));                    }                }            });            addView(views.get(i));        }        startFlipping();    }        private OnItemClickListener onItemClickListener;    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {        this.onItemClickListener = onItemClickListener;    }    public interface OnItemClickListener {        void onItemClick(int position, View view);    }}

使用：

public class MainActivity extends AppCompatActivity implements UpView.OnItemClickListener {    private UpView vf;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        vf = findViewById(R.id.vf);        setData();        vf.setOnItemClickListener(this);    }    String datas[] = {            "鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"            ,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"            ,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"            ,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"            ,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"            ,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"            ,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"            ,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮"};    private void setData() {        List views = new ArrayList<>();        for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据            View v = View.inflate(this,R.layout.item,null);            TextView tv1 = v.findViewById(R.id.tv1);            TextView tv2 = v.findViewById(R.id.tv2);            tv1.setText(datas[i]);            if (datas.length > i+1){                tv2.setText(datas[i+1]);            }else {                tv2.setVisibility(View.GONE);            }            views.add(v);        }        vf.setViews(views);    }    @Override    public void onItemClick(int position, View view) {        Log.i("TAG",position+"");    }}

更多相关文章

随机推荐