Android-使用RecyclerView的ItemDecoration 實現炫酷的 吸頂效果
阿新 • • 發佈：2019-01-25
開始逐漸領略到ItemDecoration的美~
原始碼已上傳至github，感興趣的同學可以下載：
今天讓我 使用 ItemDecoration 來完成 可推動的懸浮導航欄的效果，最終實現的效果如下圖：
如果你對分型別的RecyclerView還不是太瞭解，可以參看我前面的文章，讓你一分鐘征服RecyclerView的基本使用。
如果你對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);
}
}
}<?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 "";
}
}));這樣就完成了~
再看一眼最終效果感受一下：