閱讀目錄

1.創建首頁UI

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

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

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

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

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

?

1.創建首頁UI

【說明】

【1】需要包含沉浸式效果，逐漸透明變為顯示；

【2】主頁內容的滑動顯示；

【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最好寫在下面，否則新的內容顯示的時候會將其遮住--> 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"：占據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.首頁下拉刷新實現

?

回到頂部

2.1【初始化】

回到頂部

2.2 封裝刷新功能

【分類包】上拉加載和下拉刷新都是swipfresh，統一規劃，方便復用；?

?

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

回到頂部

2.3 加載數據的處理

?

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

?【網路請求數據的功能的實現】

回到頂部

3.?首頁數據結構分析

回到頂部

3.1? 數據結構的分析

?【標準的restful請求】

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

【返回的數據不一定】可以具有多種組合；

【廣告條】

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

【是以get方式獲取的數據】

回到頂部

3.2 首頁數據的訪問

回到頂部

4.多布局高可用性RecyclerView封裝和數據解析器

回到頂部

?4.1 recyclerView的開源庫

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

回到頂部

4.2 添加依賴

?

回到頂部

4.3 數據轉化的約束

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

【獲取其他屬性】

【返回和設置數據】

【創建builder】使用鏈式調用最好創建builder；建造者模式可以將builder寫為靜態內部類，也可以單寫一個類；

?

【進行數據的轉換處理】

回到頂部

4.4 對json數據的解析

?

?【得到data整體全部的數據的數組】

【data數組每個數據元素的解析】

?

【對banner的解析】是一個數組

?

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

回到頂部

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

回到頂部

5.1 adapter的封裝

【簡單封裝】只是封裝，沒有被調用；

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

【數據轉換的框架的完善】

【增加初始化的操作】加入布局，監聽等等；

[初始化-添加布局]

[單文字的布局]

[單文字的添加]

[多圖片的顯示布局]

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

[輪播圖的布局加載]

【設置寬度監聽+增加動畫】

【數據的轉換】根據type進行依次的布局；

[文本的加載]

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

[文本+圖片的加載]

[banner的加載]

?

?

?

?

回到頂部

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

【說明】需要一些常量：總頁數；當前是第幾頁；分了幾頁；

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

?

【第一頁數據的加載】

?

【預留上拉加載的接口】

?【初始化布局】

?

【bug】運行報錯；

?

[錯誤原因]沒有設置banner；

?

回到頂部

?7.完善主頁樣式

【說明】沒有分割線，不夠優美；

回到頂部

?7.1 添加依賴庫

回到頂部

7.2 邏輯完善

?

【新建類】

?

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

?

【完善類BaseDecoratio代碼】?

【創建顏色值】

【完善IndexDelegate】

【效果】

回到頂部

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

回到頂部

?8.1 第三方依賴

?

回到頂部

8.2 status_bar的設置

回到頂部

?8.3 動態改變status_bar的實時顏色改變

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

【效果改變的參數設置-1】

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

【定義變化的顏色】

【說明】其實只有一個toolbar的時候可以不進行設置behavior；但是為了嚴謹，需要設置；

【效果】漸變式的狀態欄已經顯示了；

回到頂部

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

?

【說明】點擊某一個圖標進行跳轉的時候應該包含下面的tab，整個頁面一起跳轉；

?

【如果傳遞的是this】 下面的tab沒有跳轉；

【跳轉的邏輯】

?

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

?【增加跳轉的動畫】

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。