第4章-Android高級界面設(shè)計-高級控件

Android高級界面設(shè)計第4章學(xué)習(xí)目標(biāo)掌握Android高級UI布局的使用方法(★)；掌握Android高級UI組件的使用場景與方法(★)；了解MaterialDesign設(shè)計理念了解自定義View2023/12/132第4章Android高級界面設(shè)計內(nèi)容大綱MaterialDesign設(shè)計理念A(yù)ndroid的高級布局Android的高級控件自定義View2023/12/133第4章Android高級界面設(shè)計上次課回顧什么是MaterialDesignConstraintLayout的相對布局如何設(shè)置什么是CoordinatorLayout，如何與AppBarLayout組合什么是DrawerLayout2023/12/134第4章Android高級界面設(shè)計4.3高級UI組件內(nèi)容大綱RecyclerViewCardViewFloatingActionButtonNavigationViewViewPagerToolbar2023/12/136第4章Android高級界面設(shè)計RecyclerViewRecyclerView是用于大量數(shù)據(jù)集合的可滾動的列表容器，是ListView的替代控件優(yōu)點：高效且靈活，高度解耦可以使用和重用有限的視圖元素可以快速更新變化的數(shù)據(jù)提供三種不同的布局管理LayoutManager提供各種動畫及分割線ItemDecoration、ItemAnimator，實現(xiàn)轉(zhuǎn)場效果缺點：需自定義列表分割線需自定義實現(xiàn)列表的點擊事件2023/12/137第4章Android高級界面設(shè)計RecyclerView組件數(shù)據(jù)Data：無需關(guān)心數(shù)據(jù)來源可滾動的列表項集合

—RecyclerViewUI界面的布局管理—Recyclerview.LayoutManager

RecyclerView連接數(shù)據(jù)的適配器—RecyclerView.Adapter每個列表項布局—XMLfile顯示列表項的每個控件的信息—RecyclerView.ViewHolder2023/12/13第4章Android高級界面設(shè)計8RecyclerView的布局管理每種ViewGroup都有一個布局管理器，用于定位每個列表項的位置，可以重用對于用戶不可見的列表項內(nèi)置的布局管理器，它們都繼承自LayoutManangerLinearLayoutManangerGridLayoutManangerStaggeredGridLayout2023/12/13第4章Android高級界面設(shè)計9RecyclerView的布局LinearLayoutManagerGridLayoutManagerStaggeredGridLayoutManager2023/12/13第4章Android高級界面設(shè)計10RecyclerView.AdapterAdapter作為視圖和數(shù)據(jù)之間的中介，管理在數(shù)據(jù)更改時創(chuàng)建、更新、添加和刪除列表項ViewHolder為適配器準(zhǔn)備每個列表項的視圖和數(shù)據(jù)，它在XML資源文件中指定布局，實現(xiàn)點擊功能2023/12/13第4章Android高級界面設(shè)計11RecyclerView.AdapterRecyclerView.Adapter需要重寫以下三個方法onCreateViewHolder()：此方法通過inflate()方法將列表項item布局編譯為View對象，返回以這個對象為參數(shù)的ViewHolder對象。onBindViewHolder()：此方法主要將數(shù)據(jù)渲染到列表項的ViewHolder的View控件中；getItemCount()：此方法類似于ListView的BaseAdapter適配器的getCount()方法，即數(shù)據(jù)的總條目。2023/12/13第4章Android高級界面設(shè)計12item的點擊事件RecyclerView.Adapter本身沒有ListView的OnItemClick點擊事件的監(jiān)聽器解決方案設(shè)置ViewHolder的itemView的OnClick事件監(jiān)聽，通過setTag()存儲itemView對象信息Adpater類自定義內(nèi)部事件接口，定義事件處理的回調(diào)方法，參數(shù)為被點擊item的位置；Activity或Fragment類實現(xiàn)或創(chuàng)建該接口的對象，實現(xiàn)回調(diào)方法；當(dāng)item被點擊時調(diào)用該接口的回調(diào)方法，將位置信息傳遞給回調(diào)方法實現(xiàn)RecyclerView的onItemTouchListener接口，通過GestureDetectorCompat類進行手勢的攔截和響應(yīng)，然后GestureDetectorCompat交給實現(xiàn)了OnGestureListener接口的SimpleOnGestureListener實現(xiàn)，調(diào)用邏輯相對較為復(fù)雜2023/12/13第4章Android高級界面設(shè)計13RecyclerView.Adapter的數(shù)據(jù)更新notifyDataSetChanged()：通知更新adapter的記錄集notifyItemAdded(position)：通知在position位置添加了記錄notifyItemChanged(position)：通知修改了postion位置的記錄notifyItemRemoved(position)：通知刪除了position位置的記錄notifyItemMoved(position)：通知移動了position位置的記錄notifyAll()：通知記錄集發(fā)生了更新2023/12/13第4章Android高級界面設(shè)計14item的滑動刪除和拖曳ItemTouchHelper：處理拖曳和滑動刪除的實現(xiàn)類ItemTouchHelperitemTouchHelper=newItemTouchHelper(newItemTouchHelper.Callback());itemTouchHelper.attachToRecyclerView(recyclerView);回調(diào)接口Callback的方法onMove()：長按拖曳的回調(diào)getMovementFlags()：設(shè)置拖曳、滑動方向onSwiped()：滑動刪除的回調(diào)2023/12/13第4章Android高級界面設(shè)計15實現(xiàn)RecyclerView實現(xiàn)步驟添加RecyclerView的依賴項布局添加RecyclerView給每個Item創(chuàng)建XML布局文件創(chuàng)建繼承自RecyclerView.Adapter的適配器類創(chuàng)建繼承自RecyclerView.ViewHolder的列表項類在Activity的onCreate()方法中使用適配器和布局管理器創(chuàng)建RecyclerView對象案例：D0404_RecyclerView2023/12/13第4章Android高級界面設(shè)計16實現(xiàn)下拉刷新依賴庫：androidx.swiperefreshlayout:swiperefreshlayout:1.1.0使用SwiperefreshLayout作為RecyclerView的父布局設(shè)置它的OnRefreshListener監(jiān)聽器，加載數(shù)據(jù)以及刷新adapter2023/12/13第4章Android高級界面設(shè)計17RecyclerView的原理解析2023/12/13第4章Android高級界面設(shè)計18RecyclerView的四級緩存2023/12/13第4章Android高級界面設(shè)計19一級緩存：屏幕內(nèi)緩存Scrap，返回布局及內(nèi)容都有效的ViewHolder，無需onCreateViewHolder和onBindViewHolder。當(dāng)列表滑動出屏幕時，ViewHolder會被緩存在mCachedViews，其大小由mViewCacheMax決定，默認(rèn)為2，可通過RecyclerView的setItemViewCacheSize()動態(tài)設(shè)置二級緩存：直接返回View，繼承ViewCacheExtension類實現(xiàn)自定義緩存三級緩存：返回布局有效、內(nèi)容無效的ViewHolder，需要調(diào)用onBindViewHolder，ViewHolder首先緩存在mCachedViews中，當(dāng)超過后就添加到RecyclerViewPool中界面刷新的緩存處理2023/12/13第4章Android高級界面設(shè)計20notifyItemChange(position)被更新的Item放入ChangeScrap，不需要onCreateViewHolder，需要調(diào)用onBindViewHoldernotifyDataSetChange()0~4放入RecyclerPool，不需要onCreateViewHolder，但全部需要onBindViewHolder更新position=1的數(shù)據(jù)滾動的緩存處理2023/12/13第4章Android高級界面設(shè)計21向上滑動的緩存處理2023/12/13第4章Android高級界面設(shè)計22CardViewCardView是Google官方發(fā)布的MaterialDesign風(fēng)格的卡片布局控件CardView控件用于實現(xiàn)立體的卡片，提供圓角、陰影等特效CardView繼承自FrameLayout類，可以理解為帶圓角陰影和水波紋效果的FrameLayout布局常用屬性：屬性屬性含義app:cardBackgroundColor設(shè)置背景顏色app:cardCornerRadius設(shè)置圓角半徑app:cardElevation設(shè)置z軸的陰影深度app:cardMaxElevation設(shè)置z軸的最大高度值app:contentPadding設(shè)置內(nèi)容與邊距的間隔app:cardUseCompatPadding設(shè)置Android5.0及以上版本是否添加padding，默認(rèn)值為falseAndroid5.0以下默認(rèn)添加paddingapp:cardPreventConrerOverlap是否給content添加padding來阻止與圓角重疊，默認(rèn)值為true案例：D0404_RecyclerView/item_fruit_card.xmlFloatingActionButton2023/12/13第4章Android高級界面設(shè)計23FloatingActionButton是一種浮動的圓形按鈕，具有一些獨特的動態(tài)效果，比如變形、彈出、位移等，代表著在當(dāng)前頁面上用戶的特定操作，簡稱為FAB與普通按鈕相比，F(xiàn)AB能為應(yīng)用程序帶來更加豐富炫麗的界面效果及用戶體驗FAB繼承自ImageView，具備ImageView的所有屬性屬性含義取值app:backgroundTint邊框背景顏色顏色值app:tint圖標(biāo)顏色，無法修改圖片顏色顏色值app:rippleColor點擊時的漣漪顏色顏色值app:borderWidthfab的邊框大小通常設(shè)為0dpapp:elevation默認(rèn)狀態(tài)的Z軸的陰影大小默認(rèn)值：6dpapp:pressedTranslationZ點擊狀態(tài)的Z軸的偏移量默認(rèn)值：12dpapp:fabSizefab的大小auto、normal(56dp)、mini(40dp)app:srcfab的圖標(biāo)符合Design設(shè)計的圖標(biāo)大小為24dpapp:layout_anchor設(shè)置錨點

app:layout_anchorGravity設(shè)置相對錨點的位置bottom、center、top等FloatingActionButton常用方法voidshow()：顯示按鈕voidhide()：隱藏按鈕booleanisShown()：返回顯示狀態(tài)voidsetOnClickListener(OnClickListener)：設(shè)置單擊監(jiān)聽器最佳實踐按照標(biāo)準(zhǔn)設(shè)定尺寸，不要輕易修改它的樣式點擊和按壓的時候，加深焦點的顏色表示這是一個點擊不要過度使用FAB，應(yīng)用于當(dāng)前頁面最主要的操作，每個頁面最好只有一個FABFAB的顏色比較搶眼，最好對其設(shè)定一些積極的操作，如：創(chuàng)建、分享等，避免輕微和破壞性的操作，如：刪除等推薦只使用一個FAB，如果需要多個操作，可以點擊后將它展開顯示更多操作按鈕案例：D0404_RecyclerView/item_fruit_card.xml2023/12/13第4章Android高級界面設(shè)計24NavigationView2023/12/13第4章Android高級界面設(shè)計25NavigationView是遵循MaterialDesign設(shè)計風(fēng)格的菜單導(dǎo)航類，用來規(guī)范側(cè)滑菜單的基本樣式包括頭部布局headerLayout和內(nèi)容菜單menu兩部分，配合DrawerLayout、Toolbar實現(xiàn)側(cè)滑抽屜式菜單功能NavigationView的使用和普通的側(cè)滑菜單基本相同，只需要在DrawLayout中添加即可案例：D0403_DrawerLayout2023/12/13第4章Android高級界面設(shè)計26NavigationViewNavigationView常用屬性及方法屬性名稱含義描述app:insetForeground="@android:color/transparent"沉浸式展示app:headerLayout="@layout/nav_header"添加Header布局app:menu="@menu/nav_menu"添加標(biāo)簽Item的菜單android:layout_gravity="start"左側(cè)拉出NavigationView方法名稱含義描述addHeaderView(Viewview)將視圖添加為導(dǎo)航菜單的標(biāo)題removeHeaderView(Viewview)刪除已添加的標(biāo)題視圖setItemBackgroundResource(intresId)設(shè)置菜單項的背景inflateMenu(intresId)在此導(dǎo)航視圖中添加菜單資源setItemTextColor(ColorStateListtextColor)設(shè)置菜單項使用的文本顏色setItemIconTintList(ColorStateListtint)設(shè)置菜單項使用Icon的顏色setNavigationItemSelectedListener(NavigationViewlistener)設(shè)置菜單項選中的監(jiān)聽器ViewPager是Android的一個自帶動畫效果的視圖滑動切換組件，可以通過手勢滑動完成View的切換，主要用于App的引導(dǎo)頁或圖片輪播等。ViewPager的特性ViewPager類繼承自ViewGroup類，它實際是一個容器，可以在其中添加其它View控件ViewPager類需要一個Adapter適配器綁定視圖，主要使用PagerAdapter適配器類ViewPager經(jīng)常與Fragment共同使用PagerAdapter適配器的主要方法getCount()：獲取ViewPager一共有多少頁面isViewFromObject(View,Object)：確定頁面View是否與instantiateItem()方法返回的key對象相關(guān)聯(lián)instantiateItem(ViewGroup,int)：創(chuàng)建給定位置的頁面，適配器將創(chuàng)建的View添加到給定的容器container中destroyItem(ViewGroup,int,Object)：移除給定位置的頁面2023/12/13第4章Android高級界面設(shè)計27ViewPager2023/12/13第4章Android高級界面設(shè)計28ViewPagerViewPager常用方法方法名稱方法含義setAdapter(PagerAdapter)將ViewPager與適配器進行綁定addOnPageChangeListener(ViewPager.OnPageChangeListener)添加Pager滑動的監(jiān)聽器removeOnPageChangeListener(ViewPager.OnPageChangeListener)移除監(jiān)聽器clearOnPageChangeListener()清除監(jiān)聽器setCurrentItem(int,boolean)控制頁面直接跳轉(zhuǎn)到指定位置的界面getCurrentItem()獲取當(dāng)前頁面的索引setPageTransformer(boolean,ViewPager.PageTransformer)設(shè)置滑動動畫，如：翻轉(zhuǎn)、漸近漸出setOffscreenPageLimit(int)設(shè)置當(dāng)前頁面左右兩側(cè)緩存的頁面數(shù)量常用組合TabLayout+ViewPager+Fragment可以用來進行分頁滑動展示ToolbarToolbar是在Android5.0推出的MaterialDesign風(fēng)格的導(dǎo)航控件，它比ActionBar更具設(shè)計彈性，官方推薦使用Toolbar取代ActionBarToolbar與ActionBar不同之處在于，ActionBar獨立于布局之外，會固定在界面頂部，但Toolbar直接在布局文件中定義，可以在界面布局結(jié)構(gòu)中依照需求任意配置，可以跟著ScrollView滾動，可以與布局中的其他View交互，對滑動事件的響應(yīng)等通過setSupportActionBar()或setActionBar()方法使用Toolbar來取代ActionBar可以定制導(dǎo)航欄圖標(biāo)、設(shè)置App的logo、設(shè)置標(biāo)題與子標(biāo)題，支持添加多個控件2023/12/13第4章Android高級界面設(shè)計29使用Toolbar使用Toolbar的基本步驟設(shè)置整個App的主題樣式為NoActionBar在Activity的布局文件中添加Toolbar布局在Activity類的onCreate()方法中調(diào)用setSupportActionBar()顯示Toolbar創(chuàng)建選項菜單，通過showAsAction屬性設(shè)置菜單項的展示屬性，還可以設(shè)置菜單項的操作視圖對象actionViewClass或操作提供器對象actionProviderClass處理菜單項的點擊事件案例：D0405_Toolbar2023/12/13第4章Android高級界面設(shè)計30

4.4自定義View312023/12/13第4章Android高級界面設(shè)計2023/12/13第4章Android高級界面設(shè)計32自定義ViewView類是UI的基類可以擴展View或View子類，自定義外觀和與用戶交互的行為自定義View有以下幾種形式類型使用場景實現(xiàn)方式注意點繼承特定View拓展已有View的功能在原有View的基礎(chǔ)上增加功能不需要支持wrap_content和padding繼承View實現(xiàn)某種效果的自定義控件通過重寫onDraw()實現(xiàn)繪制需要編寫支持wrap_content和padding的代碼繼承特定ViewGroup擴展某種布局的布局方式在原有ViewGroup的基礎(chǔ)上增加與自定義ViewGroup相比，較簡單，但自由度不高繼承ViewGroup實現(xiàn)某種效果的自定義布局實現(xiàn)子View的measure、layout過程需要編寫支持wrap_content、padding和Margin創(chuàng)建自定義View的步驟創(chuàng)建繼承自View或View子類的自定義類重寫View的方法繼承View：重寫onDraw()方法繪制View繼承View子類：重寫行為或外觀方法在layout布局文件中使用自定義View案例：D0406_Cust