最近做了一個(gè)仿智慧北京的項(xiàng)目,這是一個(gè)類似網(wǎng)易新聞客戶端的項(xiàng)目.因?yàn)殚e來無事,就想把自己之前所學(xué)的知識(shí)撿起來,順便看一看自己在哪些知識(shí)點(diǎn)方便比較薄弱,所以也算是對(duì)自己的一個(gè)階段性的自省吧.下面這張圖是這個(gè)項(xiàng)目的主界面的效果圖的一部分.

效果圖

首先做一個(gè)項(xiàng)目,必須先搭好ui框架,因?yàn)檫@是唯一與用戶交互的接口,所以這個(gè)框架的邏輯必須簡(jiǎn)潔明了,但同時(shí)也必須滿足大多數(shù)用戶獲取資訊的這個(gè)需求.做這個(gè)框架我就花了大半天.因?yàn)閟plash頁(yè)面和新手引導(dǎo)頁(yè)面非常簡(jiǎn)單,在此我就不贅述了.

主界面ui框架圖

這是我認(rèn)為整個(gè)智慧北京項(xiàng)目最復(fù)雜也是最有價(jià)值的部分了.整個(gè)ui框架以一個(gè)actiivty+多個(gè)fragment的模式構(gòu)建,這樣既可以簡(jiǎn)化activity的邏輯,也可以達(dá)到解耦的目的.

LeftFragment+ContentFragment實(shí)現(xiàn)的側(cè)邊欄+主頁(yè)的效果,既可以通過自定義控件實(shí)現(xiàn),也可以使用開源框架SlidingMenu,這里我們使用了后者,以簡(jiǎn)便開發(fā)流程.

ContentFragment的布局由一個(gè)ViewPager+RadioGroup(RadioButton)來實(shí)現(xiàn),ViewPager可以實(shí)現(xiàn)五個(gè)頁(yè)面的左右切換.而RadioGroup的點(diǎn)擊事件可以通過ViewPager來完成頁(yè)面的切換.

由于這個(gè)標(biāo)簽頁(yè)的view結(jié)構(gòu)類似,于是通過向上抽取一個(gè)抽象類BasePager來封裝,并在內(nèi)部封裝兩個(gè)方法initView()和initData(),因?yàn)槲鍌€(gè)頁(yè)面的布局結(jié)構(gòu)類似,所以直接在這個(gè)父類的initView里完成view的初始化,并通過一個(gè)成員變量mRootView來維護(hù)這個(gè)布局對(duì)象.而initData()這里面的數(shù)據(jù)由子類自己去實(shí)現(xiàn),五個(gè)標(biāo)簽頁(yè)通過繼承這個(gè)類,繼承initView方法,重寫initData方法來實(shí)現(xiàn)自己的具體的業(yè)務(wù)邏輯.

接下來就要進(jìn)入到這個(gè)ui框架最容易被繞進(jìn)去的地方:NewsCenterPager.新聞詳情頁(yè)默認(rèn)選中NewsMenuDetailPager,NewsMenuDetailPager的ui主體部分由一個(gè)viewpager+listview來實(shí)現(xiàn),由于在fragment里已經(jīng)有一層viewpager,所以此處的viewpager的滑動(dòng)事件會(huì)出現(xiàn)一些小bug,這主要是由于android的事件分發(fā)機(jī)制導(dǎo)致的,由于上層控件已經(jīng)攔截了觸摸事件,導(dǎo)致觸摸事件不能繼續(xù)傳遞到下層控件,于是下次viewpager的滑動(dòng)效果就不能實(shí)現(xiàn),所以此時(shí)必須通過重寫dispatchTouchEvent方法調(diào)用getParent().requestDisallowInterceptTouchEvent(true)來請(qǐng)求父控件及祖宗控件不要攔截子控件的觸摸事件,不過此處因?yàn)椴⒉皇侨魏螘r(shí)候都是自己處理觸摸事件,所以需要判斷觸摸的位置來判斷觸摸事件是子控件自己處理還是交給上層控件處理.在這層邏輯中還是用了viewpagerindicator這個(gè)開源框架來完成可自動(dòng)滑動(dòng)的新聞分類標(biāo)簽和頁(yè)面指示器的實(shí)現(xiàn).

整個(gè)智慧北京項(xiàng)目的精華部分也就是在這個(gè)ui框架了,我暫時(shí)也就總結(jié)到這里了,當(dāng)是對(duì)這個(gè)項(xiàng)目的一個(gè)回顧和總結(jié).等以后有時(shí)間了再來做一些完善和補(bǔ)充.