智慧北京03_菜單詳情頁_ViewPagerIndicator框架_頁籤詳情頁_事件處理

1,新聞菜單詳情頁,初始化標籤頁面

 

 

這是新聞菜單詳情頁的內容,不考慮導航欄的狀況下,下面是一個ViewPager.

建立新聞菜單詳情頁的佈局,建立ViewPager

建立ViewPager適配器

重點在初始化item,instantiateItem()中

 

觀察可知,其實在這幾個Pager的內容基本同樣,因此只須要建立一個對象類(頁籤)就行

這個類繼承BaseMenuDetailPager(是否繼承這個類不是重點,主要是不須要再建立一個類去寫initView(),initData()方法)

 

初始化這個頁簽在NewsMenuPager的initData()中進行初始化

初始化頁籤要根據網絡返回的數據,拿到頁籤的數量

新聞中心把數據傳遞給菜單詳情頁>>>在建立菜單詳情頁集合的時候,把解析網絡的children數據,經過構造傳遞過去(更改構造參數就是了)

 

而後在具體的新聞詳情頁中,initData()中

遍歷children的集合(由於封裝的時候用的是集合去封裝),建立頁籤對象,數量與集合一直,最後所有儲存在頁籤集合中

 

而後在ViewPager是配置器中設置這個集合的頁籤

 

考慮到每一個頁籤的標題不同,經過能夠經過構造把標題傳遞過去

這裏設置標題不能在initView()中設置,放到initData()中設置,否則代碼順序不一致,會null

 

額外:頁籤滑動事件處理

這樣設置的ViewPager與父容器的觸摸事件衝突了,滑動很費力

因此在父容器的ViewPager(那個自定義控件中)把interceptTouchEvent() 的返回值置爲flase

 

2,開源框架ViewPagerIndicator的使用(ViewPager頁面指示器)

經過實例代碼中的實例找到須要的效果,而後全局搜索找到相關的代碼,而後借鑑(Copy);

這裏在eclipse中使用會出現v4包衝突,這裏就不能直接刪Library中的v4(由於它自己依賴的就是自身的)把v4包版本搞一致就能夠了(若是是實例和Library包中的v4包衝突,刪掉實例的v4包,改一致也能夠,不過可能有問題).

 

使用框架(具體流程參考示例代碼):

①佈局文件中,建立一個TabPageIndicator控件和一個ViewPager(前面已經建立了)

②代碼中將指示器和ViewPager綁定一塊兒(要在setAdapter()以後)

③在ViewPager適配器裏重寫getPagerTitle()方法

④發現效果不同,是由於示例中設置了一個主題,一樣copy過來就好了.

背景變成黑色,由於主題的緣由.因此設置一個背景顏色就能夠了

⑤修改indicator指示器文本的顏色(帶有一個狀態選擇器),指示器的藍條

由於是改了主題纔有的藍條,因此查看主題中的藍條樣式便可

可是看到藍條樣式,並不能修改,由於它在庫中

因此乾脆把樣式copy出來放到項目裏,再修改,改爲須要的樣式.

一樣的文字也有樣式,能夠修改選擇器.

 

3.指示器事件處理

3.1 當在指示器上滑動的時候,滑出了側邊欄,由於指示器和側邊欄衝突了.

解決方式:讓須要事件的子控件強制攔截掉全部事件,不讓別的控件搶到.

在指示器類中(其實是在類庫中的源碼中)

重寫dispatchTouchEvent()方法

請求全部父控件不要攔截事件,包括爺爺(叔叔什麼的都攔截不了)都不要攔截

getParent().requestDisallowIntercepteTouchEvent(true);

 

3.2 頁籤滑動的時候也會滑出側邊欄

這裏不適合直接請求全部父控件不要攔截,在第一個頁籤的時候才讓側邊欄能夠滑出.

解決方式:實現 ViewPager的滑動事件,拿到SlidingMenu對象.

可是這裏不能使用ViewPager的滑動事件監聽器,而要用指示器的監聽器

mIndicator.setonPagerChangeListener(this)

在重寫的方法裏,頁面被選中時,判斷是否須要開啓禁用SlidingMenu.

 

3.3 去掉ListView分割線(默認是有一條分割線的)

屬性android:divider=」@null」能夠去掉條目間的分割線

 

4 頁籤點擊按鈕跳轉下一頁

 

 

在新聞標籤頁中,給指示器添加一個圖標

這裏的按鈕事件就用Xtuils的功能

建立一個方法(view),在上面加註解@onClick(id)便可

先拿到當前的選中條目,再進行++,設置給ViewPager(它本身處理了索引越界問題)

 

 

 

5,頁籤詳情頁結構分析

 

 

5.1 給頁籤詳情頁設置佈局ViewPager + ListView

找到關心的控件

設置ViewPager適配器

返回的條目數跟網絡數據有關,在Children中的url裏

 

5.2 在頁籤詳情頁中訪問網絡,從傳遞過來的網絡數據中讀取到url,訪問它,(這裏的前綴要本身寫,不過前面已經封裝好了)

這裏的url返回的也是一個json串,建立一個JAVABean封裝數據

而後用GSON進行解析

記得打印一下結果,看看跟預期想要的數據是否一致

 

5.3 從返回的結果中獲取到頁籤詳情頁的ViewPager的數據(TopNews頭條新聞)

設置條目數,設置默認的圖片

而後下載圖片,下載完了流把圖片設置給條目(須要避免內存溢出,oom,加緩存提升速度)

Xutils模塊>>BitmapUtils

①使用方式

BitMapUtils mBitMapUtils = new BitMapUtils(mActivity);

mBitMapUtils.display(view(須要設置的控件),url(經過數據中的url路徑獲取))

 

②不過設置完會顯示與容器範圍不完整匹配,設置成背景會好一些

可是mBitMapUtils是默認設置成src,修改它太麻煩了

imageView.setScaleType(ScaleType.FIT_XY)//設置圖片縮放方式,填充父容器

 

③讀取緩存:在請求數據以前就加載緩存

加載緩存,訪問網絡獲得JSON以後把緩存設置進來

圖片緩存有BitMapUtils進行了緩存處理

 

5.4 輪播圖滑動事件處理(dispatchTouchEvent()方法內處理)

問題1:在頁籤裏TopNews 的ViewPager和新聞詳情頁的ViewPager衝突了

解決1:建立一個自定義控件ViewPager申請父類不要攔截

 

問題2:分析項目可知,若是畫到輪播圖最後一個圖片或第一個圖片應該能夠繼續滑.同時上下滑動也不該該攔截

分析2:上下滑動,父控件攔截

 向右滑動而且是第一個頁面,父控件須要攔截

 向左滑動而且是最後一個頁面,父控件須要攔截

拿到item總數

getAdapter().getCount();//經過適配器拿到總數

注意:仍是要保留前面的請求父類不要攔截,否則不會走後面的觸摸攔截事件

 

6,更新頭條新聞標題

6.1 不論是加載緩存仍是訪問網絡,都有一段時間的空白,用戶體驗很差

mBitMapUtils.configdefaultLodingImage(id)//設置加載中的默認圖片

 

6.2 輪播的描述文本,用一個幀佈局來作,讓描述文本壓在圖片上便可

 

佈局屬性中半透明簡寫#a000

 

更新描述文本,在ViewPager的事件監聽器中,默認選中第0個

文本經過解析網絡數據中的內容獲得

 

6.3 小圓點根據開源框架中的效果,找到對應的代碼和佈局,copy過來

CirclePagerIndicator自定義控件

須要修改小圓點的樣式:開源框架提供佈局,代碼方法,主題樣式三種修改方式.

這裏用佈局文件修改,找到佈局方式對應的控件,對比顏色進行修改便可.

須要注意的是:命名空間的聲明,copy過來就能夠

 

問題1:當頁籤切換的時候,小圓點與顯示的輪播不一致

mIndicator.onPageSelected(0)//默認選中第一個,解決頁面從新初始化的時候,Indicator與實際圖片顯示不一致.

 

優勢:使用方便

缺點:細節修改太麻煩,好比這個指示器之間圓點的距離修改,很麻煩

 

7.新聞列表的加載,CenterCrop屬性裁剪,參看界面圖

 

 

7.1 建立ListView在佈局中.

獲取完網絡數據,經過網絡數據中的列表數據(newsTabBean.data.news)

建立適配器

建立條目佈局文件

條目中,最好把寬高固定下來.

可是發現圖片並無把ImagView填充起來

因此設置scaleType=’centerCrop’//根據控件大小進行裁剪,推薦使用

圖片周圍的黑色邊框實際上是背景爲黑色,padding=1dp

 

條目的文本,ellipsize=」end」 可讓未顯示完的文本顯示爲...

maxLine=」2」限制最大顯示行數

 

7.2 新聞列表展示

把網絡數據的信息填充到ListView中

設置圖片的時候,建立適配器的構造方法,在這裏用BitMapUtils設置默認圖片

而後在每個條目設置圖片時,也用它去加載圖片

 

 

問題1:拖動的時候ListView變成黑色了

ListView是有一個緩衝的顏色,是黑色,爲了提升性能有時候會顯示爲黑色

解決:佈局數據cacheColorHint=」#fff」

 

問題2:ListView佔據的位置過小,頭條新聞佔據位置太大

解決:把頭條新聞做爲LIstView的頭佈局

 

 

把頭條新聞抽取出來作成一個佈局,而後listView.addHeaderView(view)

注意,這裏單獨抽取出來以後,ViewUtils須要從新注入這個頭佈局

 

若是頭佈局高度問題:在頭佈局上套一層LinearLayout>>>高度包裹內容