【XMarqueeView】类似淘宝头条、京东头条的跑马灯效果

最近公司的项目中有个模块需要用到类似淘宝头条、京东头条这种上下循环滚动的跑马灯效果,在GitHub搜索了一番,没找到自己比较满意的,索性自己封装了一个,并且提交到开源库中,方便各位使用。

XMarqueeView

类似淘宝头条、京东头条的跑马灯效果,上下轮播,支持单行/双行显示

主要功能:

  • 支持自定义轮播布局
  • 支持自定义轮播效果
  • 支持单/多行轮播显示,随意定制显示条目

效果图

效果图

基本使用

1.添加Gradle依赖

dependencies {
   compile 'com.xhb:xmarqueeview:2.0.0'
}

2.在布局文件中添加

   

3.创建MarqueeView适配器


public class MarqueeViewAdapter extends XMarqueeViewAdapter {

    private Context mContext;
    public MarqueeViewAdapter(List datas, Context context) {
        super(datas);
        mContext = context;
    }

    @Override
    public View onCreateView(XMarqueeView parent) {
        //跑马灯单个显示条目布局,自定义
        return LayoutInflater.from(parent.getContext()).inflate(R.layout.marqueeview_item, null);
    }

    @Override
    public void onBindView(View parent, View view, final int position) {
        //布局内容填充
        TextView tvOne = (TextView) view.findViewById(R.id.marquee_tv_one);
        tvOne.setText(mDatas.get(position));
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "position" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

4.数据设置

        List data = new ArrayList<>();
        data.add("神奇宝贝(精灵宝可梦)有哪些著名的梗?");
        data.add("我翻开自我保护的书,上面只写了两个大字:证据");
        data.add("接纳自己,是无条件地爱,包括爱所有的痛苦");
        data.add("3 岁前,世界对待孩子的一切,都会给他们留下深刻的第一印象");
        data.add("担心今天没锻炼,现在站起来,做一组完美深蹲");

        XMarqueeView xMarqueeView = (XMarqueeView) findViewById(R.id.marquee3);
        xMarqueeView.setAdapter(new MarqueeViewAdapter(data, this));
        //刷新数据
        //marqueeViewAdapter.setData(data);

5.重影问题可参考以下解决方案

@Override
public void onStart() {
    super.onStart(); 
    marqueeView.startFlipping();
}

@Override
public void onStop() {
    super.onStop();
    marqueeView.stopFlipping();
}

自定义属性说明

属性名 属性说明 属性值
isSetAnimDuration 是否设置动画时间间隔 boolean,默认为false
isSingleLine 是否单行显示 boolean ,默认true 单行显示
marquee_interval 轮播间隔 ,轮播间隔 int类型,默认3000ms
marquee_animDuration 轮播动画执行时间 int类型,默认为1000ms
marquee_textSize 轮播字体大小 dimension,默认为14sp
marquee_textColor 轮播字体颜色 color,默认为 #888888
marquee_count 轮播显示条目数量 int类型,默认为 1,单行显示

关于我

  • Email: [email protected]
  • Home: http://www.jxnk25.club
  • 掘金: https://juejin.im/user/56fcba0a71cfe4005ca1a57b
  • : http://www.jianshu.com/users/42aed90cf5af/latest_articles

如果觉得文章帮到你,不求打赏,喜欢我的文章可以关注我和朋友一起运营的微信公众号,将会定期推送优质技术文章,求关注~~~

欢迎关注“大话安卓”微信公众号

欢迎加入“大话安卓”技术交流群,一起分享,共同进步

欢迎加入“大话安卓”技术交流群,互相学习提升

你可能感兴趣的:(【XMarqueeView】类似淘宝头条、京东头条的跑马灯效果)