在很多地方我們都會(huì)用到縱向列表樣式的菜單，比如微信首頁的我、發(fā)現(xiàn)頁面，微博的首頁的我頁面，QQ的動(dòng)態(tài)頁面等等等等，大多數(shù)的應(yīng)用中都會(huì)存在這樣的頁面。我們怎樣實(shí)現(xiàn)這種頁面比較好呢？
布局方案
完成這樣的頁面，常見的布局方案有：
1. 用ScrollView+LinearLayout很容易的暴力布局出來，但是這樣得到的布局太固定了，如果條目多一點(diǎn)，加載起來很耗時(shí)。
2. 用ListView來實(shí)現(xiàn)，這種方案比方案一要好上不少，起碼數(shù)據(jù)多點(diǎn)的時(shí)候，加載時(shí)不會(huì)太耗時(shí)。但是分割線和中間空白在要求差異化的時(shí)候，不太好繪制，用View的話又覺得大材小用。
3. 用RecyclerView來實(shí)現(xiàn)。RecyclerView做縱向布局相比ListView在很多方面也更靈活，無論是動(dòng)畫還是分割線上。
實(shí)現(xiàn)效果
三個(gè)圖片中分割線樣式都是比較常見的。
使用起來當(dāng)然是希望以最簡單粗暴的方式去使用，比如：
mMenuView.setCutLineLeftPadding(30);mMenuView.setCutLineRightPadding(30);mMenuView.setGapLineColor(getResources().getColor(R.color.theme_bg));MenuBean h=new MenuBean();//或者直接指定rootViewh.type=R.layout.head_user;h.menu="美其名曰美";h.info="天道有常，不為堯存，不為桀亡。";mMenuView.addMenu(5,h);mMenuView.addGap(30);addMenu(11,R.mipmap.ic1,"菜單一","新年新氣象",true);addMenu(12,R.mipmap.ic2,"菜單二","",false);addMenu(13,R.mipmap.ic3,"菜單三","發(fā)現(xiàn)更好的自己",false);mMenuView.addGap(30);addMenu(14,R.mipmap.ic4,"菜單四","",true);addMenu(15,R.mipmap.ic5,"菜單五","",true);mMenuView.addGap(30);addMenu(16,R.mipmap.ic6,"菜單六","",true);addMenu(17,R.mipmap.ic7,"菜單七","",false);addMenu(18,R.mipmap.ic8,"菜單八","開心才是最重要的",true);
具體實(shí)現(xiàn)
實(shí)現(xiàn)這樣的效果，如果不考慮分割線的話，那么稍微用過RecyclerView的應(yīng)該都能顯示這樣的功能，所以重點(diǎn)還是在分割線上了。
RecyclerView有一個(gè)增加分割線的方法addItemDecoration，當(dāng)然，這個(gè)方法并不是只能用來增加分割線。類似微信中通訊錄按照ABCD順序排列，并分組同樣可以用這個(gè)方法來實(shí)現(xiàn)。
直接貼上自定義的分割線的代碼，在代碼中解釋：
class MenuDecoration extends RecyclerView.ItemDecoration{ //onDraw在每次重繪時(shí)都會(huì)調(diào)用，比如滑動(dòng)RecyclerView //gap線為從左到右的完整線條，在最開始的item上，最后的item下，或者空白區(qū)域的上下 //cut線為兩個(gè)緊密挨著的兩個(gè)item之間的線條 @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); //當(dāng)?shù)谝粋€(gè)Item可見的時(shí)候，給第一個(gè)Item頂上繪一條Gap線 //不用完整可見才繪制，考慮設(shè)置paddingTop+clipPadding=false的情況 if(mLayout.findFirstVisibleItemPosition()==0){ int bottom=parent.getChildAt(0).getTop(); paint.setColor(gapLineColor); c.drawLine(parent.getLeft(),bottom-halfLineHeight,parent.getRight(),bottom-halfLineHeight,paint); } int count=parent.getChildCount(); int gap; int end=mData.size()-1; //所有可見的Item下面畫線 for (int i=0;i<count;i++){ final View child = parent.getChildAt(i); int position=mLayout.getPosition(child); gap=mGap.get(position); float startY=child.getBottom()+halfLineHeight; //View下面不存在gap且不是最好一個(gè)Item的時(shí)候，繪制Cut線，否則繪制gap線 if(gap==0&&position!=end){ //繪制cut線的左邊線條 if(leftPaddingLine!=0){ paint.setColor(foreLineColor); c.drawLine(parent.getLeft(),startY,parent.getLeft()+leftPaddingLine,startY,paint); } //繪制cut線的右邊線條 if(rightPaddingLine!=0){ paint.setColor(foreLineColor); c.drawLine(parent.getRight()-rightPaddingLine,startY,parent.getRight(),startY,paint); } //繪制cut線的中間線條 paint.setColor(cutLineColor); c.drawLine(parent.getLeft()+leftPaddingLine,startY,parent.getRight()-rightPaddingLine,startY,paint); }else{ paint.setColor(gapLineColor); //繪制gap上面的一條線 c.drawLine(parent.getLeft(),child.getBottom()+halfLineHeight,parent.getRight(),child.getBottom()+halfLineHeight,paint); //如果不是最后一個(gè)item，繪制gap下面的一條線 if(position<end){ c.drawLine(parent.getLeft(),child.getBottom()+gap+halfLineHeight,parent.getRight(),child.getBottom()+gap+halfLineHeight,paint); } } } } //在每個(gè)item加載時(shí)調(diào)用，用來判斷設(shè)置每個(gè)item上下左邊的空白區(qū)域，設(shè)置內(nèi)容分別設(shè)置到outRect中 @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); int position=mLayout.getPosition(view); //如果是第一個(gè)Item，則設(shè)置上線條高度，否則不設(shè)置上線條高度 //為每個(gè)item設(shè)置下邊線條+gap(如果有的話，沒有就為0)的高度 //四個(gè)參數(shù)分別為左邊空白區(qū)域，上方空白區(qū)域，右邊空白區(qū)域，下方空白區(qū)域 outRect.set(0, position != 0 ? 0 : (int)(halfLineHeight * 2+0.5f),0,(int)(halfLineHeight*2+0.5f)+mGap.get(position)); }}這樣我們就得到了一個(gè)用來繪制分割線的類了。在需要插入空白的地方addGap，并傳入gap的高度：
public void addGap(int height){ mGap.put(mData.size()-1,height);}這樣分割線和空白的問題就解決了。其他的就是RecyclerView的簡單使用了，為了使用方便，我們對RecyclerView和其Adapter簡單封裝一下，就能實(shí)現(xiàn)用addMenu的方式增加菜單項(xiàng)了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
