android中仿【餓了麼】listview與stickylistheaderslistview聯動

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

效果圖

這裡主要是以專案為例:(程式碼註釋寫的很清楚):GoodsFragment.java

public class GoodsFragment extends BaseFragment implements AdapterView.OnItemClickListener, AbsListView.OnScrollListener {

    @InjectView(R.id.slh)
    StickyListHeadersListView mSlh;
    @InjectView(R.id.lv)
    ListView mLv;

    private MyGroupAdapter groupAdapter;
    private MyHeadAdapter headAdapter;

    //普通條目的測試資料
    private List<Data> dataList = new ArrayList<>();

    class Data {
        String info;
        int headId;  //進行分組操作,同組資料該欄位相同
        int headIndex;  //當前條目對應的頭資料所在集合的index下標
    }

    //頭的測試資料
    private List<Head> headList = new ArrayList<>();

    class Head {
        String info;
        int groupFirstIndex;   //點選(左邊的)某個頭時,需要知道其分組容器中對應組元素中第一條資料的下標
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_goods, null);
        ButterKnife.inject(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        //獲取測試資料
        testData();
        headAdapter = new MyHeadAdapter();
        mLv.setAdapter(headAdapter);

        groupAdapter = new MyGroupAdapter();
        mSlh.setAdapter(groupAdapter);

        mLv.setOnItemClickListener(this);  //左邊條目的點選事件
        mSlh.setOnScrollListener(this);   //右邊滑動的監聽
    }

    private boolean isScroll = false;

    /**
     * 右邊滾動的事件
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        //使用者在滾動右邊
        isScroll = true;

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        //左邊點選  導致右邊滾動 只觸發這個方法
        if (isScroll) {
            Data data = dataList.get(firstVisibleItem);
            //當前正在置頂顯示的頭
            headAdapter.setSelectedPosition(data.headIndex);

            //滾動左邊時  右邊的顯示問題
            int firstVisiblePosition = mLv.getFirstVisiblePosition();
            int lastVisiblePosition = mLv.getLastVisiblePosition();
            if (data.headIndex <= firstVisiblePosition || data.headIndex>=lastVisiblePosition){
                mLv.setSelection(data.headIndex);
            }
        }

    }

    /**
     * 左邊條目的點選事件
     */
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Log.i("GoodsFragemnt","左邊條目被點選了");
        headAdapter.setSelectedPosition(position);

        Head head = headList.get(position);
        mSlh.setSelection(head.groupFirstIndex);
        isScroll = false;
    }

    //獲取測試資料集合
    private void testData() {

        //頭條目的資料
        for (int i = 0; i < 10; i++) {
            Head head = new Head();
            head.info = "頭資料:" + i;
            headList.add(head);
        }

        //獲取右邊的資料
        for (int j = 0; j < headList.size(); j++) {

            Head head = headList.get(j);

            for (int i = 0; i < 10; i++) {
                Data data = new Data();
                data.headId = j;  //任意值
                data.headIndex = j;
                data.info = "普通條目資料:第" + j + "組,條目數:" + i;

                if (i == 0) {     //對應組元素中第一條資料的下標
                    head.groupFirstIndex = dataList.size();
                }

                dataList.add(data);
            }
        }
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.reset(this);
    }

    /**
     * 右邊條目的adapter
     */
    private class MyGroupAdapter extends BaseAdapter implements StickyListHeadersAdapter {
        //分組
        @Override
        public View getHeaderView(int position, View convertView, ViewGroup parent) {
            Data data = dataList.get(position);
            //頭所在集合下標
            Head head = headList.get(data.headIndex);

            TextView tv = new TextView(MyApplication.getContext());
            tv.setText(head.info);
            tv.setBackgroundColor(Color.GRAY);
            return tv;
        }

        @Override
        public long getHeaderId(int position) {
            //position是普通條目的 裡面有HeadId
            int headId = dataList.get(position).headId;
            return headId;
        }

        //普通條目
        @Override
        public int getCount() {
            return dataList.size();
        }

        @Override
        public Object getItem(int position) {
            return dataList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            TextView tv = new TextView(MyApplication.getContext());
            tv.setText(dataList.get(position).info);
            tv.setTextColor(Color.GRAY);
            return tv;
        }
    }

    /**
     * 左邊條目的adapter
     */
    private class MyHeadAdapter extends BaseAdapter {
        private int mSelectedPosition;

        @Override
        public int getCount() {
            return headList.size();
        }

        @Override
        public Object getItem(int position) {
            return headList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            TextView tv = new TextView(MyApplication.getContext());
            tv.setText(headList.get(position).info);
            tv.setLayoutParams(new ListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 80));
            tv.setGravity(Gravity.CENTER);
            tv.setTextSize(16);
            tv.setTextColor(Color.BLACK);
            if (position == mSelectedPosition) {
                tv.setBackgroundColor(Color.WHITE);
            } else {
                tv.setBackgroundColor(Color.GRAY);
            }

            return tv;
        }

        /**
         * 左邊條目的選擇
         **/
        public void setSelectedPosition(int selectedPosition) {
            if (mSelectedPosition == selectedPosition){
                return;   //不用重新整理
            }
            mSelectedPosition = selectedPosition;
            notifyDataSetChanged();
        }
    }
}

佈局檔案:fragment_goods.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >

    <ListView
        android:id="@+id/lv"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:scrollbars="none"
        >
    </ListView>

    <se.emilsjolander.stickylistheaders.StickyListHeadersListView
        android:id="@+id/slh"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
    </se.emilsjolander.stickylistheaders.StickyListHeadersListView>


</LinearLayout>

例外使用stickylistheaders之前需要匯入依賴

//詳情聯動列表stickylistheaders
compile 'se.emilsjolander:stickylistheaders:2.7.0'

具體的stickylistheaders使用可自行百度

android中仿【餓了麼】listview與stickylistheaderslistview聯動

這裡主要是以專案為例:(程式碼註釋寫的很清楚):GoodsFragment.java public class GoodsFragment extends BaseFragment implements AdapterView.OnItemClickListe

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

前言：學習Vue.js高仿餓了麼課程過程中，總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹：專案準備、頁面骨架開發、header元件開發。專案github地址：https://github.com/66Web/ljq_eleme，歡迎Star。

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（二）【重點突破】—— 當better-scroll 遇見Vue

前言：上一篇專案總結介紹了頁面骨架的開發、header元件的開發，這一篇主要梳理：商品元件開發、商品詳情頁實現。專案github地址：https://github.com/66Web/ljq_eleme，歡迎Star。 goods

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

@import "../../common/stylus/mixin" .star .star-item display: inline-block background-repeat: no-repeat &.st

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（二）

methods: { dropMove(el) { // console.log(el) for(let i=0; i<this.balls.length; i++) { let ball = this.bal

java軟件設計模式——單例設計模式中的【餓漢式】與【懶漢式】示例

nal pre turn new對象構造方法 sta 餓漢式 () urn 以下為單例設計模式中的兩種經典模式的代碼示意： 1 單例設計模式(spring框架IOC,默認創建的對象都是單例的): 2 餓漢式: 3 public class Sing

【餓了麽】業務井噴時，訂單系統架構這樣演進

深圳左右內容時間組件不知道要求技術分享追溯本文根據石佳寧在InfoQ舉辦的2016ArchSummit全球架構師（深圳）峰會上的演講整理而成。老司機簡介石佳寧，餓了麽後臺支撐研發部負責人，目前任職於餓了麽,現任平臺研發中心-後臺支撐部門負責人,主要

Vue.js 高仿開發餓了麼APP

第1章課程簡介介紹課程的學習目標和學習內容。 1-1 課程簡介 1-2 課程安排第2章 Vuejs介紹從前端開發趨勢分析開始，引入 MVVM 開發框架和 Vue.js，接著對比流行框架Angular 和 React，最後詳細介紹 Vue.js 的核心思

【安卓基礎】ImageView與EditText聯動實現隱藏與顯示密碼

圖標復用聯動 set mage imageview 通過 create 實現項目中經常會有這樣的需求，在密碼輸入框的右邊有一個小圖標，點擊就切換顯示和隱藏密碼。其實這裏需求實現起來是比較容易的，主要考慮是復用問題，因為登陸、註冊、修改密碼界面都會有這樣的情景，

高仿餓了麼【node+webpack】（window部署執行）

為了調通後臺，研究了好幾天的vue專案，遇到各種坑，終於算調通了，現在把整個操作做個記錄： window端：（程式碼：https://github.com/vuejs/vue-devtools） 1.用idea編譯vue專案： Intellij IDEA搭建vue-cli專

【慕課網實戰課程筆記】Vue.js高仿餓了麼外賣App

寫在前面：該課程為慕課網付費課程，筆記內容程式碼居多、內容簡略，僅供自己日後翻閱。如有疑問或者不妥，歡迎提出指正，我看到了會回覆，謝謝！第1章：課程簡介第2章：Vuejs介紹 Ctrl+Alt+l 快捷整理程式碼第3章：Vue-cli開啟Vue

Android 仿美團選擇城市、微信通訊錄、餓了麼點餐列表的導航懸停分組索引列表

SuspensionIndexBar簡介：快速實現分組懸停、右側索引導航聯動列表。如美團選擇城市介面，微信通訊錄介面、餓了麼點餐介面等。SuspensionIndexBar相關博文：喜歡隨手點個star 多謝在哪裡找到我：我的github：我的CSDN部落格：我的稀土掘金

Android 仿餓了麼加入購物車特效控制元件(自定義View實戰)-張旭童-專題視訊課程

Android 仿餓了麼加入購物車特效控制元件(自定義View實戰)—5681人已學習課程介紹利用純自定義View，實現的仿餓了麼加入購物車控制元件，自帶閃轉騰挪動畫的按鈕。課程收益 1 掌握自定義View，打造酷炫控制元件。 2 UI考慮View的

Android開發之貝塞爾曲線進階篇（仿直播送禮物，餓了麼購物車動畫）

又是一年畢業季，今年終於輪到我了，最近一邊忙著公司的專案，一邊趕著畢設和論文，還私下和朋友搞了些小外包，然後還要還抽出時間寫部落格，真是忙的不要不要的。好了，言歸正傳，前幾天寫了一篇關於貝塞爾曲線的基礎篇，如果你對貝塞爾曲線還不是很瞭解，建議你先去閱讀下：Android開發之貝塞爾曲線初體驗，今天這篇文

vue高仿餓了麼APP（三）

一·需求分析二，製作css字型圖示的製作和使用前面已經有人做過總結，我就直接引用了 css字型圖示的製作和使用。三，專案目錄結構設計 1,每一個元件都單獨建立一個資料夾，例如商品頁建立goods資料夾，goods資料夾放商品頁元件，goods.vue以及商品

vue高仿餓了麼APP（二）

這裡我直接跳過vue-cli的安裝。一，vue.js程式碼是如何執行的？ 1，進入頁面，首先載入index.html和main.js檔案。 ① index.html檔案 <!DOCTYPE html> <html> <head>

Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（一）

原文https://www.cnblogs.com/ljq66/p/9980372.html 前言：學習Vue.js高仿餓了麼課程過程中，總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹：專案準備、頁面骨架開發、header元件開發。專案github地址：

Vue.js高仿餓了麼外賣App Vue實戰開發APP 共13章

講真，JavaScript應用之廣超乎想象JavaScript進階已來，你來不來！搞定JavaScript基礎以後，怎麼辦JavaScript在效能方面堪稱全能，應用領域從基本的前後端開發、到移動開發的Webapp、再到桌面、外掛開發等均可適用。本路徑是JavaScript的

餓了麼高階互動之Android共享元素

文章說明本文修改自開發者原始碼微信公共號：China-dvlp 如果你有想學習的文章直接關注公眾號(開發者原始碼)回覆，我會整理徵稿。如果你有好的文章想和大家分享歡迎投稿，直接向我回覆文章連結即可。 * 概述在android 中，5.0以前，我們可以利用

基於vue2+nuxt構建的高仿餓了麼（2018版）

前言高仿餓了麼，以nuxt作為vue的服務端渲染，適合剛接觸或者準備上vue ssr的同學參考和學習專案地址如遇網路不佳，請移步國內映象加速節點效果演示檢視demo請戳這裡（請用chrome手機模式預覽）移動端掃描下方二維碼 API介面文件介面文件地址（基於apidoc）技術棧 vue2 +

android中仿【餓了麼】listview與stickylistheaderslistview聯動

相關推薦