閱讀目錄

1.創(chuàng)建首頁UI

1.1 檢查依賴是否存在
1.2 布局
1.3 控件查找
2.首頁下拉刷新實現(xiàn)
2.1【初始化】
2.2 封裝刷新功能
2.3 加載數(shù)據(jù)的處理
3.?首頁數(shù)據(jù)結(jié)構(gòu)分析
3.1??數(shù)據(jù)結(jié)構(gòu)的分析
3.2 首頁數(shù)據(jù)的訪問
4.多布局高可用性RecyclerView封裝和數(shù)據(jù)解析器

?4.1 recyclerView的開源庫
4.2 添加依賴
4.3 數(shù)據(jù)轉(zhuǎn)化的約束
4.4 對json數(shù)據(jù)的解析
5.多布局高可用性RecyclerView封裝和靈活適配器打造

5.1 adapter的封裝
?6.分頁客戶端邏輯處理
?7.完善主頁樣式

?7.1 添加依賴庫
7.2 邏輯完善
?8.沉浸式狀態(tài)欄和漸變透明頂欄解決方案和封裝

?8.1 第三方依賴
8.2 status_bar的設(shè)置
?8.3 動態(tài)改變status_bar的實時顏色改變
?9.?添加首頁的item的點擊事件

?

1.創(chuàng)建首頁UI

【說明】

【1】需要包含沉浸式效果，逐漸透明變?yōu)轱@示；

【2】主頁內(nèi)容的滑動顯示；

【3】使用新的布局：coordinatorLayout；

【4】包含下拉刷新，上拉加載更多；

回到頂部

1.1 檢查依賴是否存在

回到頂部

1.2 布局

【布局源碼】layout/delegate_index.xml

1 <?xml version="1.0" encoding="utf-8"?>2 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"3 xmlns:app="http://schemas.android.com/apk/res-auto"4 android:layout_width="match_parent"5 android:layout_height="match_parent"6 android:orientation="vertical">7 8 <!--下拉刷新-->9 <android.support.v4.widget.SwipeRefreshLayout 10 android:id="@+id/srl_index" 11 android:layout_width="match_parent" 12 android:layout_height="match_parent"> 13 14 <android.support.v7.widget.RecyclerView 15 android:id="@+id/rv_index" 16 android:layout_width="match_parent" 17 android:layout_height="match_parent" /> 18 </android.support.v4.widget.SwipeRefreshLayout> 19 20 <!--toolBar最好寫在下面，否則新的內(nèi)容顯示的時候會將其遮住--> 21 <!--寫為透明色，才會逐漸顯示android:background="@android:color/transparent"--> 22 <android.support.v7.widget.Toolbar 23 android:id="@+id/tb_index" 24 android:layout_width="match_parent" 25 android:layout_height="80dp" 26 android:background="@android:color/transparent" 27 app:layout_behavior="com.flj.latte.ec.main.index.TranslucentBehavior"> 28 29 <android.support.v7.widget.LinearLayoutCompat 30 android:layout_width="match_parent" 31 android:layout_height="match_parent" 32 android:orientation="horizontal"> 33 <!--文字--> 34 <com.joanzapata.iconify.widget.IconTextView 35 android:id="@+id/icon_index_scan" 36 android:layout_width="0dp" 37 android:layout_height="match_parent" 38 android:layout_gravity="left" 39 android:layout_weight="1" 40 android:gravity="center" 41 android:paddingRight="10dp" 42 android:text="{icon-scan}" 43 android:textColor="@android:color/white" 44 android:textSize="25sp" /> 45 <!--搜索框--> 46 <!--android:layout_weight="4"：占據(jù)2/3--> 47 <android.support.v7.widget.AppCompatEditText 48 android:id="@+id/et_search_view" 49 android:layout_width="0dp" 50 android:layout_height="40dp" 51 android:layout_gravity="center" 52 android:layout_weight="4" 53 android:background="@android:color/white" 54 android:gravity="center_vertical" 55 android:hint="搜索" 56 android:paddingLeft="20dp" /> 57 58 <com.joanzapata.iconify.widget.IconTextView 59 android:id="@+id/icon_index_message" 60 android:layout_width="0dp" 61 android:layout_height="match_parent" 62 android:layout_gravity="right" 63 android:layout_weight="1" 64 android:gravity="center" 65 android:paddingLeft="10dp" 66 android:text="{fa-bullhorn}" 67 android:textColor="@android:color/white" 68 android:textSize="25sp" /> 69 70 </android.support.v7.widget.LinearLayoutCompat> 71 72 </android.support.v7.widget.Toolbar> 73 74 </android.support.design.widget.CoordinatorLayout>

?

回到頂部

1.3 控件查找

【找到控件】

回到頂部

2.首頁下拉刷新實現(xiàn)

?

回到頂部

2.1【初始化】

回到頂部

2.2 封裝刷新功能

【分類包】上拉加載和下拉刷新都是swipfresh，統(tǒng)一規(guī)劃，方便復(fù)用；?

?

【模擬數(shù)據(jù)加載-臨時加載邏輯的書寫】整個app其實一個handler就夠用了；

回到頂部

2.3 加載數(shù)據(jù)的處理

?

【效果】顯示2s然后自動消失；

?【網(wǎng)路請求數(shù)據(jù)的功能的實現(xiàn)】

回到頂部

3.?首頁數(shù)據(jù)結(jié)構(gòu)分析

回到頂部

3.1? 數(shù)據(jù)結(jié)構(gòu)的分析

?【標(biāo)準(zhǔn)的restful請求】

【spansize】【2】占滿一半寬度；【4】占滿整個寬度；

【返回的數(shù)據(jù)不一定】可以具有多種組合；

【廣告條】

【數(shù)據(jù)的布局】數(shù)據(jù)布局在apache服務(wù)器，可以配置在ngcix服務(wù)器，效率和性能比apache要好；

【是以get方式獲取的數(shù)據(jù)】

回到頂部

3.2 首頁數(shù)據(jù)的訪問

回到頂部

4.多布局高可用性RecyclerView封裝和數(shù)據(jù)解析器

回到頂部

?4.1 recyclerView的開源庫

【推薦使用的庫】https://github.com/CymChad/BaseRecyclerViewAdapterHelper

回到頂部

4.2 添加依賴

?

回到頂部

4.3 數(shù)據(jù)轉(zhuǎn)化的約束

【枚舉單個item的顯示的組合】是image+text還是image等等不同的組合；

【獲取其他屬性】

【返回和設(shè)置數(shù)據(jù)】

【創(chuàng)建builder】使用鏈?zhǔn)秸{(diào)用最好創(chuàng)建builder；建造者模式可以將builder寫為靜態(tài)內(nèi)部類，也可以單寫一個類；

?

【進(jìn)行數(shù)據(jù)的轉(zhuǎn)換處理】

回到頂部

4.4 對json數(shù)據(jù)的解析

?

?【得到data整體全部的數(shù)據(jù)的數(shù)組】

【data數(shù)組每個數(shù)據(jù)元素的解析】

?

【對banner的解析】是一個數(shù)組

?

【給bean賦值】使用builder模式；

回到頂部

5.多布局高可用性RecyclerView封裝和靈活適配器打造

回到頂部

5.1 adapter的封裝

【簡單封裝】只是封裝，沒有被調(diào)用；

【adapter的書寫】使用工廠模式封裝；

【數(shù)據(jù)轉(zhuǎn)換的框架的完善】

【增加初始化的操作】加入布局，監(jiān)聽等等；

[初始化-添加布局]

[單文字的布局]

[單文字的添加]

[多圖片的顯示布局]

[圖片+文字的布局加載]

[輪播圖的布局加載]

【設(shè)置寬度監(jiān)聽+增加動畫】

【數(shù)據(jù)的轉(zhuǎn)換】根據(jù)type進(jìn)行依次的布局；

[文本的加載]

[圖片的加載]決定使用glide庫；

[文本+圖片的加載]

[banner的加載]

?

?

?

?

回到頂部

?6.分頁客戶端邏輯處理

【說明】需要一些常量：總頁數(shù)；當(dāng)前是第幾頁；分了幾頁；

?【需要的東西】recyclerView;adapter;dataConvertor;pagingBean;

?

【第一頁數(shù)據(jù)的加載】

?

【預(yù)留上拉加載的接口】

?【初始化布局】

?

【bug】運行報錯；

?

[錯誤原因]沒有設(shè)置banner；

?

回到頂部

?7.完善主頁樣式

【說明】沒有分割線，不夠優(yōu)美；

回到頂部

?7.1 添加依賴庫

回到頂部

7.2 邏輯完善

?

【新建類】

?

【新建類】設(shè)置和描述邊框線的顏色和寬度；

?

【完善類BaseDecoratio代碼】?

【創(chuàng)建顏色值】

【完善IndexDelegate】

【效果】

回到頂部

?8.沉浸式狀態(tài)欄和漸變透明頂欄解決方案和封裝

回到頂部

?8.1 第三方依賴

?

回到頂部

8.2 status_bar的設(shè)置

回到頂部

?8.3 動態(tài)改變status_bar的實時顏色改變

【原理】實際改變的是CoordinatorLayout的Behavior屬性值；

【效果改變的參數(shù)設(shè)置-1】

【顏色值的改變】創(chuàng)建一個bean，使用到第三方的auto-value；

【定義變化的顏色】

【說明】其實只有一個toolbar的時候可以不進(jìn)行設(shè)置behavior；但是為了嚴(yán)謹(jǐn)，需要設(shè)置；

【效果】漸變式的狀態(tài)欄已經(jīng)顯示了；

回到頂部

?9.?添加首頁的item的點擊事件

?

【說明】點擊某一個圖標(biāo)進(jìn)行跳轉(zhuǎn)的時候應(yīng)該包含下面的tab，整個頁面一起跳轉(zhuǎn)；

?

【如果傳遞的是this】 下面的tab沒有跳轉(zhuǎn)；

【跳轉(zhuǎn)的邏輯】

?

【效果】點擊每個頁面都會進(jìn)入到各自的詳情頁面

?【增加跳轉(zhuǎn)的動畫】

?

?

?

總結(jié)

以上是生活随笔為你收集整理的云炬Android开发笔记 10主界面-首页UI与数据解析器开发（RecyclerView）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。