android中仿【餓了麼】listview與stickylistheaderslistview聯動
這裡主要是以專案為例:(程式碼註釋寫的很清楚):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 +