Android 实现当下最流行的吸顶效果

开始逐渐领略到ItemDecoration的美~

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

具体实现步骤如下：

根据我前面的文章所讲的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  # 吸顶效果  # 手机端js实现吸顶效果  # js实现吸顶效果  # Android自定义RecyclerView Item头部悬浮吸顶  # Android RecyclerView实现悬浮吸顶、分隔线、到底提示效果  # android中RecyclerView悬浮吸顶效果  # Android实现上拉吸顶效果  # 第一个  # 所需  # 决定了  # 第二步  # 第三步  # 第四步  # 组中  # 如果你  # 让我  # 当你  # 做个  # 自定义  # 再看  # 只是一个  # 来个  # 先把  # 来完成  # 先来  # 如下图  # 栏中 

相关文章： 官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  制作企业网站建设方案,怎样建设一个公司网站？  如何选择域名并搭建高效网站？  制作旅游网站html,怎样注册旅游网站？  怀化网站制作公司,怀化新生儿上户网上办理流程？  网站制作难吗安全吗,做一个网站需要多久时间？  东莞专业制作网站的公司,东莞大学生网的网址是什么？  建站主机如何选？性能与价格怎样平衡？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  实现虚拟支付需哪些建站技术支撑？  如何在Ubuntu系统下快速搭建WordPress个人网站？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  宝塔Windows建站如何避免显示默认IIS页面？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  高防服务器租用指南：配置选择与快速部署攻略  建站主机选购指南：核心配置与性价比推荐解析  如何用wdcp快速搭建高效网站？  如何获取上海专业网站定制建站电话？  如何选择高效响应式自助建站源码系统？  javascript中的try catch异常捕获机制用法分析  山东云建站价格为何差异显著？  如何通过商城自助建站源码实现零基础高效建站？  如何在Windows环境下新建FTP站点并设置权限？  建站之星代理平台如何选择最佳方案？  如何挑选最适合建站的高性能VPS主机？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  红河网站制作公司,红河事业单位身份证如何上传？  制作网站的软件免费下载,免费制作app哪个平台好？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  建站之星会员如何解锁更多建站功能？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  建站之家VIP精选网站模板与SEO优化教程整合指南  网站网页制作专业公司,怎样制作自己的网页？  个人摄影网站制作流程,摄影爱好者都去什么网站？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  如何在万网ECS上快速搭建专属网站？  如何挑选高效建站主机与优质域名？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  专业商城网站制作公司有哪些,pi商城官网是哪个？  如何通过云梦建站系统实现SEO快速优化？  如何选择美橙互联多站合一建站方案？  建站之星如何通过成品分离优化网站效率？  如何高效完成独享虚拟主机建站？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  如何快速搭建高效香港服务器网站？  太平洋网站制作公司,网络用语太平洋是什么意思？