Material Design之AppBarLayout總結

CoordinatorLayout

  1. 官方文檔

  2. CoordinatorLayout 是一個加強型的FrameLayout.

  3. CoordinatorLayout 主要用于兩種場景:

作為activity最外層布局

作為協調一個或多個具有特定交互的子view的父布局

子view之間的特定協調動作，通過app:layout_behavior指定，如，Google內部實現的@string/appbar_scrolling_view_behavior； 亦可以通過自定義實現特定的behavior效果（TODO： 單獨作為另外一篇文章）。

<android.support.v4.widget.NestedScrollViewandroid:id="@+id/nest_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior">
復制代碼

AppBarLayout

符合material design的加強版的垂直方向的LinearLayout，嚴重依賴于CoordinatorLayout；內部內置了響應動作，用于定義當某個可滑動的View（如：ScrollView ,ListView ,RecyclerView 等）發生滑動時，其他子view應該如何響應。（app:layout_scrollFlags）

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:title="behaviour"app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout>
復制代碼

1.appbarLayout幾個方法

  1. addOnOffsetChangedListener 當AppbarLayout 的偏移發生改變的時候回調，也就是子View滑動。

  2. getTotalScrollRange 返回AppbarLayout 所有子View的滑動范圍

  3. removeOnOffsetChangedListener 移除監聽器

  4. setExpanded (boolean expanded, boolean animate)設置AppbarLayout 是展開狀態還是折疊狀態，animate 參數控制切換到新的狀態時是否需要動畫

  5. setExpanded (boolean expanded) 設置AppbarLayout 是展開狀態還是折疊狀態,默認有動畫

AppBarLayout的ScrollFlg

注:滑動的NestedScrollView，簡稱 "滑動view"，設置了scorllFlag的子view，簡稱 "響應view"

1.scorll

app:layout_scrollFlags="scroll"

響應view相當于滑動view 的一部分，一起滑動。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

結合scroll一起使用。當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身全部顯示完后，再把滑動事件還給滑動view； 當用戶向下滑動是scrollView時，關注點不在滑動view本身，此時出現響應view的內容，符合material design設計理念

3.enterAlwaysCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...
復制代碼

結合scroll和enterAlways一起使用。可理解為enterAlways的更靈活的版本；可通過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身最小高度顯示完后，再把滑動事件還給滑動view

4.snap

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
...
復制代碼

結合scroll一起使用。可理解為"四舍五入"的效果；當停止滑動時，響應view如果已顯示了一大部分，則自動彈性滑動顯示剩余的部分；若顯示的部分很少，則自動收起隱藏

5.exitUntilCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...
復制代碼

結合scroll一起使用。可理解為enterAlways的相反的效果；可通過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向上滑動時，響應view截斷滑動view的滑動事件，待響應view縮到自身最小高度顯示完后，再把滑動事件還給滑動view

CollapsingToolbarLayout

折疊式標題欄，豐富toolbar的效果，必須作為appbarLayout的直接子布局

1.parallax

有視覺效果的滾動：app:layout_collapseMode="parallax"

2.pin

子view固定：app:layout_collapseMode="pin"

    <android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:fitsSystemWindows="true"android:layout_width="match_parent"android:layout_height="250dp"><!--豐富效果的toolbar--><!--app:contentScrim 折疊后的背景色，即toolbar顏色--><!--app:statusBarScrim 折疊后的statusBar背景色，--><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapse_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="@color/colorPrimary"app:expandedTitleGravity="center|bottom"app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"app:collapsedTitleGravity="start"app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"app:layout_scrollFlags="scroll|exitUntilCollapsed"><!--app:layout_collapseMode="parallax" 折疊過程產生一點偏移--><!--android:fitsSystemWindows="true",伸到statusBar，但需要新建style將statusBar顏色改為透明--><!--一直到最外層都需要調用android:fitsSystemWindows="true"--><ImageViewandroid:id="@+id/person_portrait"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:layout_collapseMode="parallax"/><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:title="app"app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>
復制代碼

3.設置標題

  1. Java 中設置
//  設置標題CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");復制代碼
  1. xml設置 app:title="John"

4.contentScrim

app:contentScrim：當CollapsingToolbarLayout滑動到一個確定的閥值時將顯示或者隱藏內容紗布，可以通過setContentScrim(Drawable)來設置紗布的圖片。（可以時圖片也可以是顏色）

5.statusScrim

當CollapsingToolbarLayout滑動到一個確定的閥值時，狀態欄顯示或隱藏紗布，你可以通過 app:statusBarScrim或者setStatusBarScrim(Drawable)來設置紗布圖片。（可以時圖片也可以是 顏色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

expandedTitleXXX：設置展開時的文字風格布局； app:collapsedTitleXXX：設置收縮時的文字風格布局

...
app:expandedTitleGravity="center|bottom"
app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
app:collapsedTitleGravity="start"
app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
...
復制代碼
<!--折疊時為黑色，靠右-->
<style name="PersonDetail.TitleCollapsedTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#000</item>
</style><!--展開時為白色，居中向下-->
<style name="PersonDetail.TitleExpandTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#eee</item>
</style>
復制代碼

參考鏈接

  1. Material.io
  2. Material Design之 AppbarLayout
  3. CoordinatorLayout的使用如此簡單

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/536483.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/536483.shtml
英文地址，請注明出處：http://en.pswp.cn/news/536483.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Git和GitHub快速入門

Git和GitHub快速入門

Git入門 簡介 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的分布式版本控制系統。 工具 準備工具 Git下載地址&#xff1a;https://git-scm.com Git配置 配置的內容主要是&#xff1a;用戶名和郵箱 git config --global --add user.name <用…
閱讀更多...
團隊沖刺三

團隊沖刺三

昨天我做了什么&#xff1f; 完成了登錄的布局文件&#xff0c;建立數據庫&#xff0c;建數據表&#xff0c;連接數據庫&#xff0c;將信息存儲。 遇到了什么問題&#xff1f; 數據庫存儲功能報錯 今天打算做什么&#xff1f; 解決昨天遺留的問題。轉載于:https://www.cnblogs.…
閱讀更多...
C語言進階——全局變量

C語言進階——全局變量

全局變量 定義在函數外面的變量是全局變量 全局變量具有全局的生存期和作用域 它們與任何函數都無關 在任何函數內部都可以使用它們 全局變量初始化 沒有做初始化的全局變量會得到0值 指針會得到NULL值 只能用編譯時刻已知的值來初始化全局變量 它們的初始化發生在main函數之前…
閱讀更多...
為什么我不用ViewPager或RecyclerView來做上下滑切換

為什么我不用ViewPager或RecyclerView來做上下滑切換

上下滑切換翻頁大概是這樣的效果&#xff1a; 目前網上有諸多如 “仿抖音上下滑...” “仿花椒映客直播...” 之類的技術分享&#xff0c;都有講述實現上下滑切換頁面的方案&#xff0c;其中以 ViewPager 和 RecyclerView SnapHelper 兩種方案為多&#xff0c;但是都有明顯的缺…
閱讀更多...
web項目上之深入理解Java國際化

web項目上之深入理解Java國際化

作者&#xff1a;https://blog.csdn.net/yangbo787827967/article/details/81124439 假設我們正在開發一個支持多國語言的Web應用程序&#xff0c;要求系統能夠根據客戶端的系統的語言類型返回對應的界面&#xff1a;英文的操作系統返回英文界面&#xff0c;而中文的操作系統則…
閱讀更多...
Chrome運行時性能瓶頸分析

Chrome運行時性能瓶頸分析

一&#xff0c;初探&#xff0c;根據現象發現問題 chrome的performance知道很久了&#xff0c;但總是沒有特別權威且跟上時代的學習資料&#xff0c;這次痛定思痛&#xff0c;直接看英文文檔&#xff0c;一點點把這塊啃掉&#xff0c;本筆記基于Chrome 59 step 1: 隱身模式打開…
閱讀更多...
vue-router之路由鉤子（八）

vue-router之路由鉤子（八）

路由鉤子&#xff0c;即導航鉤子&#xff0c;其實就是路由攔截器&#xff0c;vue-router一共有三類&#xff1a;全局鉤子&#xff1a;最常用路由單獨鉤子組件內鉤子1、全局鉤子在src/router/index.js中使用&#xff0c;代碼如下&#xff1a;// 定義路由配置const router new V…
閱讀更多...
java第一 ++--

java第一 ++--

大的轉換小的自動轉換 byte -> short -> int -> long -> float -> double l 自動類型轉換 表示范圍小的數據類型轉換成范圍大的數據類型&#xff0c;這種方式稱為自動類型轉換 自動類型轉換格式&#xff1a; 范圍大的數據類型 變量 范圍小的數據類型值&#xf…
閱讀更多...
在加拿大讀大學被開除了，以后該怎么辦？

在加拿大讀大學被開除了，以后該怎么辦？

在加拿大讀大學被開除了&#xff0c;以后該怎么辦&#xff1f; 一天晚上正準備睡覺的時候&#xff0c;手機振動&#xff0c;打開一看&#xff0c;是一條微消息&#xff0c;“在加拿大讀大學被開除了&#xff0c;以后該怎么辦&#xff1f;”又一個留學生遇到的棘手問題。在國內上…
閱讀更多...
GO編程程序員修煉秘籍：十本經典書單

GO編程程序員修煉秘籍：十本經典書單

隨著BAT、今日頭條、京東、抖音等大型互聯網公司對Go語言的大范圍應用&#xff0c;帶動更多互聯網企業采取技術跟隨戰略&#xff0c;Go語言發展前景一片大好。5月20日工業和信息化部信息中心發布《2018中國區塊鏈產業白皮書》&#xff0c;Go語言與區塊鏈成為“數字中國”建設的…
閱讀更多...
AngularJs 冷兵器雜談

AngularJs 冷兵器雜談

一、指令 scope.template中的dom屬性值可以直接用{{attr}}表達式取到scope中的屬性attrlink中attr.$observe可以監聽scope屬性attr的動態變化需要改變$scope上的屬性值時&#xff1a;$scope.$apply(function(){$scope.attr newValue }) 復制代碼二、服務 循環依賴&#xff08;…
閱讀更多...
02-print的用法

02-print的用法

print的常用&#xff1a; print(hello world!)print(hello,world!) # 逗號自動添加默認的分隔符&#xff1a;空格。print(hello world!) # 加號表示字符拼接。print(hello,world,sep***) # 單詞間用***分隔。print(# * 20) # *號表示重復20遍。print(are you sure?, end)…
閱讀更多...
單田芳白眉大俠全320回下載

單田芳白眉大俠全320回下載

1、搜索“十方評書網”。 2、要下載那個評書家的選擇那個評書家。 3、然后選擇自己要下載的下載可以了。 轉載于:https://blog.51cto.com/14204019/2392323
閱讀更多...
pip模塊 redis、xlrd、xlutils、nnlog、requests

pip模塊 redis、xlrd、xlutils、nnlog、requests

# import模塊的實質&#xff1a;把python文件執行一遍,# 導入模塊的順序&#xff0c;1、從當前模塊找&#xff0c;如果當前模塊沒有&#xff0c;2、就去python環境變量里面找 pip install redispip install xlrd pip install xlutilspip install nnlogpip install requests pip…
閱讀更多...
react.js基礎

react.js基礎

現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS&#xff0c;ReactJs的虛擬DOM&#xff08;Virtual DOM&#xff09;和組件化的開發深深的吸引了我&#xff0c;下面來跟我一起領略ReactJs的風采吧~~ 文章有點長&#xff0c;耐心讀完&#xff0c;你會有…
閱讀更多...
第 11 章 日志管理 - 089 - 初探 ELK

第 11 章 日志管理 - 089 - 初探 ELK

在開源的日志管理方案中&#xff0c;最出名的莫過于 ELK 了。 ELK 是三個軟件的合稱&#xff1a;Elasticsearch、Logstash、Kibana。 Elasticsearch 一個近乎實時查詢的全文搜索引擎。Elasticsearch 的設計目標就是要能夠處理和搜索巨量的日志數據。 Logstash 讀取原始日志&…
閱讀更多...
【轉】Kotlin 新版來了，支持跨平臺！

【轉】Kotlin 新版來了，支持跨平臺！

作者&#xff1a;Tamic 原文鏈接&#xff1a;juejin.im/post/5cd8f9… 谷歌在今年的 I/O 大會上宣布&#xff0c;Kotlin 編程語言現在是 Android 應用程序開發人員的首選語言(谷歌宣布 Kotlin 成為安卓開發首選)。 還有一個好消息, Kotlin 1.3.30 正式發布&#xff0c;做了對ap…
閱讀更多...
WebSocket輕松單臺服務器5w并發jmeter實測

WebSocket輕松單臺服務器5w并發jmeter實測

測試結論 nginx最多只能維持(65535*后端服務器IP個數)條websocket的長連接&#xff0c;如果后端websocket服務器IP只有一個&#xff0c;那么就只能最多支持65535條連接。瓶頸就產生在了nginx上建議采用LVS的DR模式來做負載均衡&#xff0c;這樣最大長連接數目就只和websocket服…
閱讀更多...
人工智能的歷史

人工智能的歷史

AI(Artificial Intelligence)即人工智能&#xff0c;最初是在1956 年被提出&#xff0c;人工智能研究如何用計算機去模擬、延伸和擴展人的智能&#xff1b;如何把計算機用得更聰明&#xff1b;如何設計和建造具有高智能水平的計算機應用系統&#xff1b;如何設計和制造更聰明的…
閱讀更多...
nginx配置 vue打包后的項目 解決刷新頁面404問題|nginx配置多端訪問

nginx配置 vue打包后的項目 解決刷新頁面404問題|nginx配置多端訪問

訪問vue頁面時&#xff0c;/# 使url看著不美觀&#xff0c;使用 H5 history模式可以完美解決這個問題&#xff0c;但需要后端nginx幫助。接下來我們自己配置一下。 使用前端路由&#xff0c;但切換新路由時&#xff0c;想要滾動到頁面頂部&#xff0c;或者保持原先的滾動位置&a…
閱讀更多...
最新文章

Copyright @ 2022~2023