【0108】【項目實戰】-【Android通用框架設計與完整電商APP開發】-【8】【主界面-首頁UI與數據解析器開發（RecyclerView）】

本文轉載自查看原文 2018-04-03 08:43 1027 _0005_Android開發

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>