吸頂效果,頂部高亮導航切換

2019-11-09 17:10:01
字體：大中小
來源：轉載
供稿：網友
先來一張效果圖
注: 本文需要用到的幾個第三方的庫
compile 'com.android.support:recyclerview-v7:25.1.1'compile 'com.github.xxl6097:okhttputils:2.4.1'compile 'com.alibaba:fastjson:1.2.24'compile 'com.squareup.picasso:picasso:2.3.2'
第一步：布局里寫一個RecyclerView
<android.support.v7.widget.RecyclerView    android:id="@+id/recycleView"    android:layout_width="match_parent"    android:layout_height="wrap_content"/>第二步,在MainActivity中 實例化RecyclerViewrecyclerView = (RecyclerView) findViewById(R.id.recycleView);第三步,聯網獲取數據   在這里 使用的是okhttpUtils/** * 聯網請求所需的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";/** * 聯網獲取數據 */PRivate void getData() {    OkHttpUtils            .get()            .url(url)            .build()            .execute(new StringCallback() {                @Override                public void onError(Call call, Exception e) {                    Log.d("MainActivity", "聯網失敗" + e.getMessage());                }                @Override                public void onResponse(Call call, String s) {                    Log.d("MainActivity", "聯網成功" + s);			// 對獲取的JSON數據進行解析                    parserData(s);                }            });}第四步    解析 網絡請求的JSON 數據
/** * 解析數據 * * @param s 網絡請求的JSON字符串 */private void parserData(String s) {    JSONObject jsonObject = parSEObject(s);    String data = jsonObject.getString("data");    JSONObject dataObj = parseObject(data);    String coming = dataObj.getString("coming");    List<ComingBean> comingslist = parseArray(coming, ComingBean.class);    //測試是否解析數據成功    String strTest = comingslist.get(0).cat;    Log.e("TAG", strTest + "222");    // 解析成功  設置適配器    }第五步  創建適配器 并傳遞數據
MyRecyclerAdapter adapter = new MyRecyclerAdapter(this, comingslist);//  設置RecycleView的布局管理器GridLayoutManager layoutManager = new GridLayoutManager(this, 1);recyclerView.setLayoutManager(layoutManager);recyclerView.setAdapter(adapter);適配器的實例化 對象
package com.aegis.testtopguide;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import com.squareup.picasso.Picasso;import java.util.List;/** * Created by SFS on 2017/2/8. * Description : */public class MyRecyclerAdapter extends RecyclerView.Adapter {    private Context context;    private List<ComingBean> comingslist;    private final LayoutInflater inflater;    public MyRecyclerAdapter(Context context, List<ComingBean> comingslist) {        this.context = context;        this.comingslist = comingslist;        inflater = LayoutInflater.from(context);    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        return new MyViewHolder(inflater.inflate(R.layout.data_item, null));    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        MyViewHolder myViewHolder = (MyViewHolder) holder;        myViewHolder.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) {            ComingBean comingBean = comingslist.get(position);            mv_name.setText(comingBean.nm);            mv_date.setText(comingBean.showInfo);            mv_dec.setText(comingBean.scm);            //注：當你發下圖片無法打開是，做個字符串替換即可            String imagUrl =comingBean.img;            String newImagUrl = imagUrl.replaceAll("w.h", "50.80");            //加載圖片            Picasso                    .with(context)                    .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>
第六步  開始做導航
首先我們來寫一個類，它起標記的作用，來放每一個item的對應的懸浮欄的字符串
public class NameBean {    public String name;}
自定義一個接口 用來方便外部調用
/** * Created by SFS on 2017/2/8. * Description :   定義一個借口方便外界的調用 */public interface DecorationCallback {    String getGroupId(int position);    String getGroupFirstLine(int position);}
第七步 自定義一個SectionDecoration 類 繼承 RecyclerView的ItemDecoration
package com.aegis.testtopguide;import android.content.Context;import android.content.res.Resources;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.support.v7.widget.RecyclerView;import android.text.TextPaint;import android.text.TextUtils;import android.util.Log;import android.view.View;import java.util.List;import static android.content.ContentValues.TAG;/** * Created by on 2017/2/8. * Description : */public class SectionDecoration extends RecyclerView.ItemDecoration {    private List<NameBean> dataList;    private DecorationCallback decorationCallback;    private  Paint paint;    private  TextPaint textPaint;    private  Paint.FontMetrics fontMetrics;    private int topGap;    private int alignBottom;    public  SectionDecoration(List<NameBean> dataList, Context context, DecorationCallback decorationCallback){        this.dataList = dataList;        this.decorationCallback = decorationCallback;        Resources res = context.getResources();        //設置懸浮欄的畫筆---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 = decorationCallback.getGroupId(pos);        if (groupId.equals("-1")) return;        //只有是同一組的第一個才顯示懸浮欄        if (pos == 0 || isFirstInGroup(pos)) {            outRect.top = topGap;            if (dataList.get(pos).name == "") {                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 = decorationCallback.getGroupId(position);            if (groupId.equals("-1")) return;            String textLine = decorationCallback.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 = decorationCallback.getGroupId(position);            if (groupId.equals("-1") || groupId.equals(preGroupId)) continue;            String textLine = decorationCallback.getGroupFirstLine(position).toUpperCase();            if (TextUtils.isEmpty(textLine)) continue;            int viewBottom = view.getBottom();            float textY = Math.max(topGap, view.getTop());            //下一個和當前不一樣移動當前            if (position + 1 < itemCount) {                //在 position后面+1 可以進行每一個條目都進行一次滑動                String nextGroupId = decorationCallback.getGroupId(position);                //組內最后一個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 = decorationCallback.getGroupId(pos - 1);            String groupId = decorationCallback.getGroupId(pos);            //判斷前一個字符串 與 當前字符串 是否相同            if (prevGroupId.equals(groupId)) {                return false;            } else {                return true;            }        }    }}第八步 在向list集合中先把每一個item的 起“標記”作用的字符串都加進去
/** * 在向list集合中先把每一個item的 起“標記”作用的字符串都加進去 * * @param comingslist */private void setPullAction(List<ComingBean> comingslist) {    dataList = new ArrayList<>();    for (int i = 0; i < comingslist.size(); i++) {        NameBean nameBean = new NameBean();        String name0 = comingslist.get(i).comingTitle;        nameBean.name = name0;        dataList.add(nameBean);    }}第九步 在setAdapter() 前，為RecyclerView添加ItemDecoration:(完整代碼)
// 解析成功  設置適配器setPullAction(comingslist);MyRecyclerAdapter adapter = new MyRecyclerAdapter(this, comingslist);//  設置RecycleView的布局管理器GridLayoutManager layoutManager = new GridLayoutManager(this, 1);recyclerView.setLayoutManager(layoutManager);//為RecyclerView添加ItemDecoration:recyclerView.addItemDecoration(new SectionDecoration(dataList, mContext, new DecorationCallback() {    @Override    public String getGroupId(int position) {        if (dataList.get(position).name != null) {            return dataList.get(position).name;        }        return "-1";    }    @Override    public String getGroupFirstLine(int position) {        if (dataList.get(position).name != null) {            return dataList.get(position).name;        }        return "";    }}));recyclerView.setAdapter(adapter);
以上為功能模塊的代碼:
Demo  地址   https://github.com/shenshao520/TestTopGuide