跑马灯效果的MarqueeViewLibrary自定义布局

最新推荐文章于 2024-05-14 03:32:29 发布

Ycocol

最新推荐文章于 2024-05-14 03:32:29 发布

阅读量1.8k

点赞数

分类专栏： Android技术点文章标签： MarqueeViewLibrary MarqueeView转换异常 MarqueeView自定义布局

本文链接：https://blog.csdn.net/Ycocol/article/details/78732639

版权

Android技术点专栏收录该内容

26 篇文章 0 订阅

订阅专栏

跑马灯效果我们应该在很多app都见过，效果看起来也很棒棒哒，昨天用了gongwen的MarqueeViewLibrary，效果还不错，但是踩了些坑，不过正常也是踩坑了才会想到来写篇博客来提醒自己，也给初次使用者一点帮助。

老规矩给出github地址:https://github.com/gongwen/MarqueeViewLibrary

gradle集成方便简单

给出下MarqueeView属性

Attribute 属性	Description 描述
flipInterval	翻页时间间隔
marqueeAnimDuration	动画执行时间
inAnimation	marquee in动画
outAnimation	marquee out动画
autoStart	动画是否自动开始
animateFirstView	当前ChildView第一次是否动画展示

SimpleMarqueeView属性(支持MarqueeView所有属性及以下属性)

Attribute 属性	Description 描述
smvTextSize	文字大小
smvTextColor	文字颜色
smvTextGravity	文字位置

SimpleMarqueeView是一个简单的跑马灯，就一段text,可以写demo看效果，真正酷炫的效果还得你自己来自定义，先上简单的属性

<com.gongwen.marqueen.SimpleMarqueeView
                android:id="@+id/marqueeView1"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:flipInterval="2500"
                android:inAnimation="@anim/in_top"
                android:outAnimation="@anim/out_right"
                app:marqueeAnimDuration="2000"
                app:smvTextColor="@color/btnColor"
                app:smvTextGravity="center"
                app:smvTextSize="16sp" />

代码设置.很简洁

//数据集合
        List<String> datas = Arrays.asList("《赋得古原草送别》", "离离原上草，一岁一枯荣。", "野火烧不尽，春风吹又生。", "远芳侵古道，晴翠接荒城。", "又送王孙去，萋萋满别情。");
        //获取SimpleMF 跑马灯工厂
        SimpleMF<String> marqueeFactory = new SimpleMF(getActivity());
        //添加数据到工厂
        marqueeFactory.setData(datas);
        //MarqueeView设置工厂
        simpleMarqueeView1.setMarqueeFactory(marqueeFactory);
        //开启跑马灯
        simpleMarqueeView1.startFlipping();

效果图，上面2个是自带的跑马灯，下面的是自定义的跑马灯，实现起来其实也很简单，这里我主要想说些我踩的坑。

还是先介绍下自定义跑马灯，上代码最直接
xml布局

<?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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <RelativeLayout
        android:id="@+id/rr1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#F8EDED"
        android:visibility="visible">
        <com.coorchice.library.SuperTextView
            android:id="@+id/tv_top1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/img_tip1"
            android:text="自定义跑马灯上层"
            android:textColor="@color/redColor"
            android:textSize="14sp" />

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/img_tip1"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/xygame_float_menu_notice_icon"
            android:gravity="center" />
        <com.coorchice.library.SuperTextView
            android:id="@+id/tv_bottom1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/img_tip1"
            android:text="自定义跑马灯下层"
            android:textColor="@color/btnColor"
            android:textSize="14sp" />
        <com.coorchice.library.SuperTextView
            android:id="@+id/tv_much1"
            android:layout_width="30dp"
            android:layout_height="15dp"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_toLeftOf="@+id/tv_tip1"
            android:background="@drawable/marquee_view_dicount_bg"
            android:gravity="center"
            android:text="1人"
            app:stroke_color="@color/redColor"
            app:text_stroke_width="2dp"
            android:textColor="@color/btnColor"
            android:textSize="12sp" />
        <com.facebook.drawee.view.SimpleDraweeView
            xmlns:fresco="http://schemas.android.com/apk/res-auto"
            fresco:roundAsCircle="true"
            android:id="@+id/tv_tip1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            fresco:placeholderImageScaleType="centerCrop"
            fresco:failureImage="@drawable/loading_07"
            fresco:placeholderImage="@mipmap/ic_launcher"
            fresco:progressBarImage="@drawable/loading_05"
            fresco:progressBarImageScaleType="centerCrop"
            fresco:pressedStateOverlayImage="@mipmap/ic_launcher"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/arrow_right1"
            android:gravity="center" />
        <ImageView
            android:id="@+id/arrow_right1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="@drawable/xygame_user_arrow_right" />
    </RelativeLayout>

自定义跑马灯工厂CurtomMarqueeViewMF 继承于MarqueeFactory<LinearLayout, DownOrderBean>
先来看下MarqueeFactory<T extends View, E>本身的两个参数都是泛型可以看到源码里是有对T做空判断的，所以

SimpleMF<String>可以只传一个参数，自然如果我们定制的跑马灯有其他view的话这个参数肯定不能为空，而且T必须是你自定义的

CurtomMarqueeViewMF布局的最外层嵌套布局，二E则就是我们的数据，具体是传实体类还是集合还是其他的看情况而定。

SimpleMF<String>可以只传一个参数，自然如果我们定制的跑马灯有其他view的话这个参数肯定不能为空，而且T必须是你自定义的
CurtomMarqueeViewMF布局的最外层嵌套布局，二E则就是我们的数据，具体是传实体类还是集合还是其他的看情况而定。

protected List<T> getMarqueeViews() {
return mViews != null ? mViews : Collections.EMPTY_LIST;
}

丢代码上来

public class CurtomMarqueeViewMF extends MarqueeFactory<LinearLayout, DownOrderBean> {
    private LayoutInflater inflater;
    private LinearLayout mView;
    private RelativeLayout rr1;
    private SimpleDraweeView img_tip1;
    private SuperTextView tv_top1;
    private SuperTextView tv_bottom1;
    private SuperTextView tv_much1;
    private SimpleDraweeView tv_tip1;
    private ImageView arrow_right1;
    private DownOrderBean downOrderBean;

    public CurtomMarqueeViewMF(Context mContext) {
        super(mContext);
        inflater = LayoutInflater.from(mContext);
    }

    /**
     * 生成跑马灯的子项View
     * @param data 绑定的数据
     * @return
     */
    @Override
    protected LinearLayout generateMarqueeItemView(DownOrderBean data) {
        mView = (LinearLayout) inflater.inflate(R.layout.curtom_marquee_view, null);
        initView();
        downOrderBean = data;
        addData();
        return mView;
    }
    private void initView() {
        rr1 = (RelativeLayout) mView.findViewById(R.id.rr1);
        tv_top1 = (SuperTextView) mView.findViewById(R.id.tv_top1);
        tv_bottom1 = (SuperTextView) mView.findViewById(R.id.tv_bottom1);
        tv_tip1 = (SimpleDraweeView) mView.findViewById(R.id.tv_tip1);
        tv_much1 = (SuperTextView) mView.findViewById(R.id.tv_much1);
        img_tip1 = (SimpleDraweeView) mView.findViewById(R.id.img_tip1);
        arrow_right1 = (ImageView) mView.findViewById(R.id.arrow_right1);
    }
    private void addData(){
        if(downOrderBean != null){
            tv_top1.setText(downOrderBean.getGametitle());
            tv_bottom1.setText(downOrderBean.getId());
            tv_tip1.setImageURI(Uri.parse(downOrderBean.getGamelogo()));
            tv_much1.setText(downOrderBean.getNum());
        }else {
            tv_top1.setText("暂无数据");
            tv_bottom1.setText("暂无数据");
            tv_tip1.setImageURI(Uri.parse(downOrderBean.getGamelogo()));
            tv_much1.setText("暂无数据");
        }
    }
}

然后是调用，这里设置了假数据

 List<DownOrderBean> list = new ArrayList<>();
        list.add(new DownOrderBean("WTF !!!!!!!11","hot","我就是自定义跑马灯","https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=938116244,3259922549&fm=27&gp=0.jpg"));
        list.add(new DownOrderBean("WTF !!!!!!!22","hot22","我就是自定义跑马灯22","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513136679&di=6f0183c1c9e9cba3a2688bcf4d7f5b7f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201410%2F06%2F20141006125920_jcPCv.jpeg"));
        MarqueeFactory<LinearLayout,DownOrderBean> myMf1 = new CurtomMarqueeViewMF(getActivity());
        myMf1.setData(list);
        Log.i("跑马灯4---", String.valueOf(list.size()));
        marqueeView3.setInAndOutAnim(R.anim.in_top, R.anim.out_bottom);
        marqueeView3.setMarqueeFactory(myMf1);
        myMf1.setOnItemClickListener(new MarqueeFactory.OnItemClickListener<LinearLayout, DownOrderBean>() {
            @Override
            public void onItemClickListener(MarqueeFactory.ViewHolder<LinearLayout, DownOrderBean> holder) {
                Toast.makeText(getActivity(), "吗波的搞了这么久", Toast.LENGTH_SHORT).show();
            }
        });

挺简单的，写可能不咋的，重点来了，
java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.widget.LinearLayout
类型转换异常，找了半死，这个问题的导致是前面说的
而且T必须是你自定义的
CurtomMarqueeViewMF布局的最外层嵌套布局
改完尼玛换成这个错误
java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.widget.TextView
百思不得其解啊，还有RelativeLayout转换TextView的，还报失败。。。一万个草泥马啊，
MarqueeFactory<LinearLayout,DownOrderBean> myMf1 = new SimpleMF(getActivity());
窝草，这一看这想给自己一榔头啊。。。

Ycocol

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
跑马灯效果的MarqueeViewLibrary自定义布局

跑马灯效果我们应该在很多app都见过，效果看起来也很棒棒哒，昨天用了gongwen的MarqueeViewLibrary，效果还不错，但是踩了些坑，不过正常也是踩坑了才会想到来写篇博客来提醒自己，也给初次使用者一点帮助。老规矩给出github地址:https://github.com/gongwen/MarqueeViewLibrarygradle集成方便简单给出下Marque
复制链接

扫一扫