您好,登錄后才能下訂單哦!
這篇文章主要介紹了Android如何實(shí)現(xiàn)仿京東、拼多多商品分類頁(yè),具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
先放一個(gè)寫完之后的樣子:
寫這個(gè)需求的思路也很清晰,首先左邊肯定是一個(gè)listView,右邊也是一個(gè)listView,這兩個(gè)listView要達(dá)到一個(gè)聯(lián)動(dòng)的效果。右邊的listView再嵌套一個(gè)GridView即可。如下圖所示。
所以,我們需要的數(shù)據(jù)結(jié)構(gòu)也就確定了,應(yīng)該是數(shù)組套數(shù)組,也就說(shuō)護(hù)膚大分類下又有子分類商品,類似于這個(gè)樣子:
ok,數(shù)據(jù)和UI結(jié)構(gòu)確定了,就可以編寫代碼了
1、先確定主體結(jié)構(gòu),即兩個(gè)listView
先不用管上面那個(gè)Hello World,那塊兒只是想做一個(gè)吸頂?shù)男Ч?/p>
2、將左側(cè)數(shù)據(jù)和右側(cè)數(shù)據(jù)分別渲染
2.1渲染左側(cè)數(shù)據(jù),即:
menuAdapter = new MenuAdapter(this, menuList); lv_menu.setAdapter(menuAdapter);
很簡(jiǎn)單就不贅述了,底部會(huì)附上完整代碼鏈接
2.2渲染右側(cè)數(shù)據(jù)
homeAdapter = new HomeAdapter(this, homeList); lv_home.setAdapter(homeAdapter);
在HomeAdapter還需要在嵌套gridView,如下:
@Override public View getView(int position, View convertView, ViewGroup parent) { CategoryBean.DataBean dataBean = foodDatas.get(position); List<CategoryBean.DataBean.DataListBean> dataList = dataBean.getDataList(); ViewHold viewHold = null; if (convertView == null) { convertView = View.inflate(context, R.layout.item_home, null); viewHold = new ViewHold(); viewHold.gridView = (GridViewForScrollView) convertView.findViewById(R.id.gridView); viewHold.blank = (TextView) convertView.findViewById(R.id.blank); convertView.setTag(viewHold); } else { viewHold = (ViewHold) convertView.getTag(); } HomeItemAdapter adapter = new HomeItemAdapter(context, dataList); viewHold.blank.setText(dataBean.getModuleTitle()); viewHold.gridView.setAdapter(adapter); return convertView; } private static class ViewHold { private GridViewForScrollView gridView; private TextView blank; }
這里需要說(shuō)明兩點(diǎn),第一:由于listView嵌套gridView會(huì)有眾所周知的問(wèn)題,計(jì)算高度,所以這邊需要重新測(cè)量高度,也就重寫了gridView;第二:代碼中的textView是每個(gè)子標(biāo)題中主標(biāo)題的名字,也就是需要吸在頂部的。
以上,就將數(shù)據(jù)已經(jīng)可以渲染完成了,現(xiàn)在就是聯(lián)動(dòng)的問(wèn)題
3、讓兩部分?jǐn)?shù)據(jù)動(dòng)起來(lái)
3.1 主數(shù)據(jù)聯(lián)動(dòng)子數(shù)據(jù)
只需要調(diào)用主數(shù)據(jù)的onItemClick()方法,右側(cè)數(shù)據(jù)在復(fù)寫方法中調(diào)用setSelection()方法即可
lv_menu.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { menuAdapter.setSelectItem(position); menuAdapter.notifyDataSetInvalidated(); tv_title.setText(menuList.get(position)); lv_home.setSelection(showTitle.get(position)); } });
3.2 子數(shù)據(jù)聯(lián)動(dòng)主數(shù)據(jù)
在onScroll中處理數(shù)據(jù)即可,在將主數(shù)據(jù)的adapter更新一下即可。如代碼所示
lv_home.setOnScrollListener(new AbsListView.OnScrollListener() { private int scrollState; @Override public void onScrollStateChanged(AbsListView view, int scrollState) { this.scrollState = scrollState; } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) { return; } int current = showTitle.indexOf(firstVisibleItem); if (currentItem != current && current >= 0) { currentItem = current; tv_title.setText(menuList.get(currentItem)); menuAdapter.setSelectItem(currentItem); menuAdapter.notifyDataSetInvalidated(); } } });
4、吸頂效果
這邊有幾種方法都可以實(shí)現(xiàn)類似的效果,我這邊是上面一直有一條,我再將子數(shù)據(jù)都加一個(gè)type,當(dāng)type不同時(shí),更換上面那一條的問(wèn)題即可。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Android如何實(shí)現(xiàn)仿京東、拼多多商品分類頁(yè)”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。