Android 最流行的吸頂效果的實現及程式碼

阿新 • • 發佈：2019-01-16

開始逐漸領略到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;  
    }  
}

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 最流行的吸頂效果的實現及程式碼

開始逐漸領略到ItemDecoration的美~ 今天讓我使用 ItemDecoration 來完成可推動的懸浮導航欄的效果，最終實現的效果如下圖：具體實現步驟如下：根據我前面的文章所講的RecyclerView的基本使用，我們先來完成基本的recyclerView：第一步：佈局裡寫一個Recyc

值最大子串，最長無重複子串，最長無重複子序列，最長公共子串，最長公共子序列解法及程式碼

1.值最大子串比如{5,-3,4,2}的最大子序列就是 {5,-3,4,2}，它的和是8,達到最大；而 {5,-6,4,2}的最大子序列是{4,2}，它的和是6。思路：看子串和是否大於0，大於0繼續加，小於0就從當前開始。 int maxSubSum(const vector<

2018年十大最流行的程式語言及分析介紹

每一種程式語言對應的側重點都會有所不同，因而學習哪種程式語言也會或多或少影響著今後的職業發展。你對程式語言瞭解多少呢？此列表基於源自TIOBE程式設計社群指數的資料，該指數是表明程式語言受歡迎程度的常用指標。 TIOBE通過分析谷歌、雅虎、必應、維基媒體、亞馬遜、百度和YouTube的資料來排名

Android最全開發資源及參考資料

-- 簡書作者謝恩銘轉載請註明出處 Android最全開發資源首先, 我覺得最好的Android學習路徑還是: 1.看Google Android官方開發主頁, 要記住Read The "Friendly" (F*ing) Doc (閱讀那該死的文件) , 和看Google Andro

2016最流行的開源專案及瞭解Github

這兩天 GitHub 對其官網進行了改版，緊接著又釋出了一年一度的開源報告，我們程式設計師比較關心之後的趨勢是什麼，而 GitHub 毫無疑問代表了全世界程式設計領域的趨勢，我們不妨先來解讀下這份報告，然後再解答下你們關注的標題的答案。事先宣告，本篇文章的一些資料完全來自這份報告，地址在這裡： 2016

Android開發最強模擬器Genymotion的安裝及使用教程。附註釋圖詳解

前沿呵呵,筆者第一次在公開的部落格網站寫心得,想讓自己的Android開發生涯留下點足跡,並且為自己做點筆記,如果該文章能幫到廣大的Android小白朋友最好了(其實我也是一小白,(●'◡'●)),好的,不扯了,進入主題首先介紹一下Genymotion模擬器,筆者也是

Android 最全適配不同語言、螢幕、系統版本及常見適配方法

前言全世界安卓智慧手機語言不相同，由於各廠家生產出的系統、螢幕也各異，隨著SDK不斷更新不同版本也有區別，android適配技能日益成為必不可少的一項專業技能。根據網上的資料和個人經驗總結，整理一份目前比較完整的適配大全，有疏漏之處還望指正。一、適配不同國家語言智慧手

Screensiz.es – 最流行移動裝置及顯示器的螢幕規格大全

　　Screensiz.es 幫助您快速找到目前市場上最流行的裝置和顯示器的螢幕規格。尺寸資料來自維基百科，使用更好理解的畫素密度。流行度推算自 Google 查詢（從 AdWords 流量估算），以及一些模糊數學演算法。您可能感興趣的相關文章

JSON介紹及Android最全面解析方法(Gson、AS自帶org.son、Jackson解析)

前言今天，我們來介紹一下現今主流的資料交換格式-JSON！目錄定義 JavaScript Object Notation，JavaScript的物件表示法，是一種輕量級的文字資料交換格式。作用用於資料的標記、儲存

Android當下最流行的開源框架總結(2018-3)

文章轉載自:https://www.aliyun.com/jiaocheng/14988.html今天翻看阿里雲,無意中發現了這篇文章,對時下流行的Android開源框架進行了總結. 發現很多還是第一次看到,寫的不錯給大家分享下,具體詳細內容,請點選轉載的地址:網路框架 No

Android的EventBus 詳解(2.4及最新版3.0)[觀察者模式]

EventBus使用詳解EventBus是什麼？EventBus是一種釋出者和訂閱者的事件分發模式。我們可以這麼理解，比如我們訂閱的Android Weekly,每當星期一0點這個時候，Androi

2016最流行的Android元件、工具、框架大全

Android 是目前最流行的移動作業系統之一。隨著新版本的不斷髮布， Android的功能也日益強大，湧現了很多流行的應用程式，也催生了一大批的優秀的元件。本文試圖將目前流行的元件收集起來以供參考，如果你發現本文還沒有列出的元件，歡迎在評論中貼出來，我會定期的更

Android最便捷banner輪播圖實現原理及程式碼

原理圖：程式碼實現 public class CyclerViewPager extends ViewPager { public CyclerViewPager(Context context) { super(conte

最流行的android元件大全

Android 是目前最流行的移動作業系統(還需要加之一嗎？)。隨著新版本的不斷髮布， Android的功能也日益強大，湧現了很多流行的應用程式，也催生了一大批的優秀的元件。本文試圖將目前流行的元件收集起來以供參考，如果你發現本文還沒有列出的元件，歡迎在評論中貼出來，我會定期的更新本文。以下是我

Android 最火框架XUtils之註解機制具體解釋

lean uci 修飾 row 多個 mes 數組 1.2 sans 在上一篇文章Android 最火的高速開發框架XUtils中簡介了xUtils的基本用法，這篇文章說一下xUtils裏面的註解原理。先來看一下xUtils裏面demo的代碼

Android中驗證輸入是否為漢字及手機號，郵箱驗證，IP地址可用port號驗證

bili repl ips gettext content 驗證 arr mat 數據 1，驗證是否為漢字 // 驗證昵稱 private boolean verifyNickname() { String nickname = edt_use

最大概率法分詞及性能測試

初始化 and ifs push 復位 enc prev 特殊字符 mat 最大概率分詞是一種最主要的統計方法分詞。一個待切割的字符串有多種分詞結果，最大概率分詞的原則是將當中概率最大的那個作為該字符串的分詞結果。第一部分理論基礎

javascript——從「最被誤解的語言」到「最流行的語言」

pop tro 經驗谷歌公司語法技術分享易懂選擇 12px JavaScript曾是“世界上最被誤解的語言”。由於它擔負太多的特性。包含糟糕的交互和失敗的設計，但隨著Ajax的到來。JavaScript“從最受誤解的編程語言演變為最流行的語言”，這除了幸運之外

Android學習探索之App多渠道打包及動態添加修改資源屬性

Android App 前言：關於Android渠道打包是一個比較老的話題，今天主要記錄總結一下多渠道打包以及如果動態配置修改一些資源屬性。今天以公司實際需求為例進行演示，由於項目復用很多公共的業務組件，而且業務組件之間的跳轉采用Scheme協議，每個業務組

無向帶權圖的最小生成樹算法——Prim及Kruskal算法思路

下一個必須循環算法與數據結構最小值邊集當前知識所有邊賦以權值的圖稱為網或帶權圖，帶權圖的生成樹也是帶權的，生成樹T各邊的權值總和稱為該樹的權。最小生成樹（MST）：權值最小的生成樹。生成樹和最小生成樹的應用：要連通n個城市需要n－1條邊線路

Android 最流行的吸頂效果的實現及程式碼

相關推薦