Android-使用RecyclerView的ItemDecoration 实现炫酷的 吸顶效果

原创 2016年12月04日 14:35:27

转载请注明出处:李诗雨--http://blog.csdn.net/cjm2484836553/article/details/53453982


开始逐渐领略到ItemDecoration的美~


源码已上传至github,感兴趣的同学可以下载:

吸顶效果源码 https://github.com/junmei520/LSY_PullupRecyclerView


今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图:



如果你对分类型的RecyclerView还不是太了解,可以参看我前面的文章,让你一分钟征服RecyclerView的基本使用

如果你对ItemDecoration的使用也不太了解,那就再看下我的另外两篇文章吧:

使用ItemDecoration为RecyclerView的Item设置padding使用ItemDecoration为RecyclerView的Item设置分割线。

总觉得循序渐进是一个不错的学习方法。


具体实现步骤如下:

根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView

第一步:布局里写一个RecyclerView


第二步:实例化

recyclerView = (RecyclerView) findViewById(R.id.recyclerView);

第三步:获取所需的数据 (这里我们来个真实点的情景,去联网请求数据)

 /**
     * 联网请求所需的url
     */
    public String url="http://api.meituan.com/mmdb/movie/v2/list/rt/order/coming.json?ci=1&limit=12&token=&__vhost=api.maoyan.com&utm_campaign=AmovieBmovieCD-1&movieBundleVersion=6801&utm_source=xiaomi&utm_medium=android&utm_term=6.8.0&utm_content=868030022327462&net=255&dModel=MI%205&uuid=0894DE03C76F6045D55977B6D4E32B7F3C6AAB02F9CEA042987B380EC5687C43&lat=40.100673&lng=116.378619&__skck=6a375bce8c66a0dc293860dfa83833ef&__skts=1463704714271&__skua=7e01cf8dd30a179800a7a93979b430b2&__skno=1a0b4a9b-44ec-42fc-b110-ead68bcc2824&__skcy=sXcDKbGi20CGXQPPZvhCU3%2FkzdE%3D";
 //联网获取数据
        getDataFromNet();
/**
     * 使用okhttpUtils进行联网请求数据
     */
    private void getDataFromNet() {
        OkHttpUtils.
                get()
                .url(url)
                .build()
                .execute(new StringCallback() {
                    @Override
                    public void onError(okhttp3.Call call, Exception e, int id) {
                        Log.e("TAG", "联网失败" + e.getMessage());
                    }

                    @Override
                    public void onResponse(String response, int id) {
                        Log.e("TAG", "联网成功==" + response);

                        //联网成功后使用fastjson解析
                        processData(response);
                    }
                });
    }
/**
     * 使用fastjson进行解析
     *
     * @param json
     */
    private void processData(String json) {
        //这里使用GsonFormat生成对应的bean类
       JSONObject jsonObject = parseObject(json);

        String data = jsonObject.getString("data");
        JSONObject dataObj = JSON.parseObject(data);

        String coming = dataObj.getString("coming");
        List<WaitMVBean.DataBean.ComingBean> comingslist = parseArray(coming, WaitMVBean.DataBean.ComingBean.class);

        //测试是否解析数据成功
//        String strTest = comingslist.get(0).getCat();
//        Log.e("TAG", strTest + "222");

         //解析数据成功,设置适配器-->
       
        }

    }

第四步:解析数据成功后,创建并设置适配器,并传递相关数据

 //解析数据成功,设置适配器
            MyRecyclerAdapter adapter = new MyRecyclerAdapter( mContext,comingslist);
            recyclerView.setAdapter(adapter);

适配器:

public class MyRecyclerAdapter extends RecyclerView.Adapter {

    private final List<WaitMVBean.DataBean.ComingBean> comingslist;
    private final Context mContext;
    private final LayoutInflater mLayoutInflater;


    public MyRecyclerAdapter(Context mContext, List<WaitMVBean.DataBean.ComingBean> comingslist) {
        this.mContext = mContext;
        this.comingslist = comingslist;
        mLayoutInflater = LayoutInflater.from(mContext);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(mLayoutInflater.inflate(R.layout.date_item, null));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        MyViewHolder myholder = (MyViewHolder) holder;
        myholder.setData(position);
    }

    @Override
    public int getItemCount() {
        return comingslist.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView mv_name;
        private TextView mv_dec;
        private TextView mv_date;
        private ImageView imageView;

        public MyViewHolder(View itemView) {
            super(itemView);
            mv_name = (TextView) itemView.findViewById(R.id.mv_name);
            mv_dec = (TextView) itemView.findViewById(R.id.mv_dec);
            mv_date = (TextView) itemView.findViewById(R.id.mv_date);
            imageView = (ImageView) itemView.findViewById(R.id.image);
        }

        public void setData(int position) {
            WaitMVBean.DataBean.ComingBean coming = comingslist.get(position);

            String name = coming.getNm();
            mv_name.setText(name);

            String date = coming.getShowInfo();
            mv_date.setText(date);

            String dec = coming.getScm();
            mv_dec.setText(dec);

            //注:当你发下图片无法打开是,做个字符串替换即可
            String imagUrl = coming.getImg();
            String newImagUrl = imagUrl.replaceAll("w.h", "50.80");

            //使用Glide加载图片
            Glide.with(mContext)
                    .load(newImagUrl)
                    .into(imageView);
        }
    }
}
item的布局:

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

    <ImageView
        android:id="@+id/image"
        android:layout_width="70dp"
        android:layout_height="110dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="5dp" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/mv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="神奇動物在哪裏"
            android:textColor="#000000"
            android:textSize="15sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="观众"
                android:textColor="#55000000"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_people"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="9.0 "
                android:textColor="#FFCE42"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" | 专业"
                android:textColor="#55000000"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_professional"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="6.7"
                android:textColor="#FFCE42"
                android:textSize="18sp" />
        </LinearLayout>
        
        <TextView
            android:id="@+id/mv_dec"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="神奇動物城,法師顯超能"
            android:textColor="#99000000"
            android:textSize="11sp" />

        <TextView
            android:id="@+id/mv_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="今天165家影院放映2088场"
            android:textColor="#99000000"
            android:textSize="11sp" />
    </LinearLayout>

</LinearLayout>

第五步:一定不能忘!!!

recycleView不仅要设置适配器还要设置布局管理者,否则图片不显示

GridLayoutManager manager = new GridLayoutManager(this, 1);
            recyclerView.setLayoutManager(manager);

此时RecyclerView简单的完成效果如下:




下面开始做 可推动的 悬浮导航栏:

第一步:首先我们来写一个类,它起标记的作用,来放每一个item的对应的悬浮栏的字符串

public class NameBean {
    String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

第二步:自定义一个SectionDecoration 类 继承 RecyclerView的ItemDecoration

public class SectionDecoration extends RecyclerView.ItemDecoration {
    private static final String TAG = "SectionDecoration";

    private List<NameBean> dataList;

    private DecorationCallback callback;
    private TextPaint textPaint;
    private Paint paint;
    private int topGap;
    private int alignBottom;
    private Paint.FontMetrics fontMetrics;


    public SectionDecoration(List<NameBean> dataList, Context context, DecorationCallback decorationCallback) {
        Resources res = context.getResources();
        this.dataList = dataList;
        this.callback = decorationCallback;
        //设置悬浮栏的画笔---paint
        paint = new Paint();
        paint.setColor(res.getColor(R.color.colorGray));

        //设置悬浮栏中文本的画笔
        textPaint = new TextPaint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(DensityUtil.dip2px(context, 14));
        textPaint.setColor(Color.DKGRAY);
        textPaint.setTextAlign(Paint.Align.LEFT);
        fontMetrics = new Paint.FontMetrics();
        //决定悬浮栏的高度等
        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);
        //决定文本的显示位置等
        alignBottom = res.getDimensionPixelSize(R.dimen.sectioned_alignBottom);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int pos = parent.getChildAdapterPosition(view);
        Log.i(TAG, "getItemOffsets:" + pos);
        String groupId = callback.getGroupId(pos);
        if (groupId.equals("-1")) return;
        //只有是同一组的第一个才显示悬浮栏
        if (pos == 0 || isFirstInGroup(pos)) {
            outRect.top = topGap;
            if (dataList.get(pos).getName() == "") {
                outRect.top = 0;
            }
        } else {
            outRect.top = 0;
        }
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            String groupId = callback.getGroupId(position);
            if (groupId.equals("-1")) return;
            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (textLine == "") {
                float top = view.getTop();
                float bottom = view.getTop();
                c.drawRect(left, top, right, bottom, paint);
                return;
            } else {
                if (position == 0 || isFirstInGroup(position)) {
                    float top = view.getTop() - topGap;
                    float bottom = view.getTop();
                    //绘制悬浮栏
                    c.drawRect(left, top - topGap, right, bottom, paint);
                    //绘制文本
                    c.drawText(textLine, left, bottom, textPaint);
                }
            }
        }
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int itemCount = state.getItemCount();
        int childCount = parent.getChildCount();
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        float lineHeight = textPaint.getTextSize() + fontMetrics.descent;

        String preGroupId = "";
        String groupId = "-1";
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);

            preGroupId = groupId;
            groupId = callback.getGroupId(position);
            if (groupId.equals("-1") || groupId.equals(preGroupId)) continue;

            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (TextUtils.isEmpty(textLine)) continue;

            int viewBottom = view.getBottom();
            float textY = Math.max(topGap, view.getTop());
            //下一个和当前不一样移动当前
            if (position + 1 < itemCount) {
                String nextGroupId = callback.getGroupId(position + 1);
                //组内最后一个view进入了header
                if (nextGroupId != groupId && viewBottom < textY) {
                    textY = viewBottom;
                }
            }
            //textY - topGap决定了悬浮栏绘制的高度和位置
            c.drawRect(left, textY - topGap, right, textY, paint);
            //left+2*alignBottom 决定了文本往左偏移的多少(加-->向左移)
            //textY-alignBottom  决定了文本往右偏移的多少  (减-->向上移)
            c.drawText(textLine, left + 2 * alignBottom, textY - alignBottom, textPaint);
        }
    }


    /**
     * 判断是不是组中的第一个位置
     *
     * @param pos
     * @return
     */
    private boolean isFirstInGroup(int pos) {
        if (pos == 0) {
            return true;
        } else {
            // 因为是根据 字符串内容的相同与否 来判断是不是同意组的,所以此处的标记id 要是String类型
            // 如果你只是做联系人列表,悬浮框里显示的只是一个字母,则标记id直接用 int 类型就行了
            String prevGroupId = callback.getGroupId(pos - 1);
            String groupId = callback.getGroupId(pos);
            //判断前一个字符串 与 当前字符串 是否相同
            if (prevGroupId.equals(groupId)) {
                return false;
            } else {
                return true;
            }
        }
    }

    //定义一个借口方便外界的调用
    interface DecorationCallback {
        String getGroupId(int position);

        String getGroupFirstLine(int position);
    }
}

第三步:在向list集合中先把每一个item的 起“标记”作用的字符串都加进去

setPullAction(comingslist);
private void setPullAction(List<WaitMVBean.DataBean.ComingBean> comingslist) {
        dataList = new ArrayList<>();

        for (int i = 0; i < comingslist.size(); i++) {
            NameBean nameBean = new NameBean();
            String name0 = comingslist.get(i).getComingTitle();
            nameBean.setName(name0);
            dataList.add(nameBean);
        }
    }



第四步:在setAdapter(),为RecyclerView添加ItemDecoration:

recyclerView.addItemDecoration(new SectionDecoration(dataList,mContext, new SectionDecoration.DecorationCallback() {
               //返回标记id (即每一项对应的标志性的字符串)
                @Override
                public String getGroupId(int position) {
                    if(dataList.get(position).getName()!=null) {
                        return dataList.get(position).getName();
                    }
                    return "-1";
                }

                //获取同组中的第一个内容
                @Override
                public String getGroupFirstLine(int position) {
                    if(dataList.get(position).getName()!=null) {
                        return dataList.get(position).getName();
                    }
                    return "";
                }
            }));

这样就完成了~

再看一眼最终效果感受一下:






















Android studio RecyclerView实现炫酷吸顶效果

这个例子是我看到一篇博客写的,自己在写的过程中发现代码没有给全,于是自己摸索了把代码补全,实现了炫酷的效果并且上传了代码如个有需要的同学请自取,看代码 首先主布局里面一个recy...
  • liufatao
  • liufatao
  • 2017年01月18日 15:05
  • 3615

RecyclerView实现带有头部的顶部悬浮置顶布局

由于项目需求需要,需要一个带有头部的吸顶布局,在网上搜索了好多实现办法,都不太理想,最终使用对RecyclerView添加分割线的方式,重写了RecyclerView的分割线来实现这个悬浮栏。效果比较...
  • bydbbb
  • bydbbb
  • 2017年12月04日 14:51
  • 348

Android studio 使用原生自带DownloadManager实现app下载更新

安卓中的DownLoadManag是安卓自带的下载类专门用来下载文件,自API9开始就用这个类可以说兼容性是没问题的了,在开发中如果android给我们提供了该工具我们就没必要去重新写,避免了错误和兼...
  • liufatao
  • liufatao
  • 2017年01月17日 14:56
  • 1004

RecycleView文字吸顶,点击吸顶布局刷新数据

实现效果 需求 Recycle有一个头布局,可以跟随列表进行滑动 点击头布局之后可以重新加载列表数据 随着头布局的消失,留下一个可点击的布局(该布局在头布局中) 效果类似下图: ...
  • pyfysf
  • pyfysf
  • 2018年01月15日 21:42
  • 32

recycleview吸顶效果源码

转载请注明出处:李诗雨--http://blog.csdn.net/cjm2484836553/article/details/53453982 开始逐渐领略到ItemDecoration的...
  • TTHHVV
  • TTHHVV
  • 2017年10月23日 20:03
  • 79

快速打造 RecyclerView 悬浮吸顶效果

MultiType-Adapter打造悬浮吸顶效果配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,时光轴效果等等,且支持触摸事件。 通讯录、qq 分组、时光轴效果。 ...
  • sinat_15877283
  • sinat_15877283
  • 2017年06月20日 00:11
  • 1531

使用ItemDecoration打造列表顶部悬浮效果

ItemDecoration基本用法ItemDecoration是用来给RecyclerView添加分隔线的,我们可以通过自定义ItemDecoration来实现各种效果,我们先来看一下基本用法。 ...
  • a62321780
  • a62321780
  • 2017年01月13日 19:55
  • 1593

小甜点,RecyclerView 之 ItemDecoration 讲解及高级特性实践

小甜点,RecyclerView 之 ItemDecoration 讲解及高级特性实践毫无疑问,RecyclerView 是现在 Android 世界中最重要的系统组件之一,它的出现就是为了高效代替 ...
  • briblue
  • briblue
  • 2017年04月13日 20:46
  • 4149

Android RecyclerView 使用完全解析 体验艺术般的控件

Android RecyclerView 使用完全解析 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用。 据官方的介绍...
  • lmj623565791
  • lmj623565791
  • 2015年04月16日 09:07
  • 841174

RecyclerView之ItemDecoration详解

关于RecyclerView的ItemView装饰,之前一直用官方Demo的DividerItemDecoration,并没有认真地去理解ItemDecoration的用法,也没能体会到ItemDec...
  • shangmingchao
  • shangmingchao
  • 2016年05月20日 16:11
  • 10830
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android-使用RecyclerView的ItemDecoration 实现炫酷的 吸顶效果
举报原因:
原因补充:

(最多只允许输入30个字)