使用CoordinatorLayout打造各種炫酷的效果
使用CoordinatorLayout打造各種炫酷的效果
自定義Behavior —— 仿知乎,FloatActionButton隱藏與展示
NestedScrolling 機制深入解析
一步步帶你讀懂 CoordinatorLayout 原始碼
自定義 Behavior -仿新浪微博發現頁的實現
ViewPager,ScrollView 巢狀ViewPager滑動衝突解決
自定義 behavior - 完美仿 QQ 瀏覽器首頁,美團商家詳情頁
CoordinatorLayout簡介
CoordinatorLayout是在 Google IO/15 大會發布的,遵循Material 風格,包含在 support Library中,結合AppbarLayout, CollapsingToolbarLayout等 可 產生各種炫酷的效果
CoordinatorLayout簡介通常用來 幹什麼
Google官方地址
CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views
簡單來說就是
- 作為最上層的View
- 作為一個 容器與一個或者多個子View進行互動
下面我們一起先來看一下我們實現的效果圖
動態圖
結合ToolBar
結合ViewPager
結合ViewPager的視覺特差
AppBarLayout
它是繼承與LinearLayout的,預設 的 方向 是Vertical
型別 | 說明 |
---|---|
int SCROLL_FLAG_ENTER_ALWAYS | When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. |
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED | An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height. |
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED | When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'. |
int SCROLL_FLAG_SCROLL | The view will be scroll in direct relation to scroll events. |
int SCROLL_FLAG_SNAP | Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. |
型別 | 說明 |
---|---|
int SCROLL_FLAG_ENTER_ALWAYS | W((entering) / (scrolling on screen))下拉的時候,這個View也會跟著滑出。 |
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED | 另一種enterAlways,但是隻顯示摺疊後的高度。 |
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED | ((exiting) / (scrolling off screen))上拉的時候,這個View會跟著滑動直到摺疊。 |
int SCROLL_FLAG_SCROLL | 這個View將會響應Scroll事件 |
int SCROLL_FLAG_SNAP | 在Scroll滑動事件結束以前 ,如果這個View部分可見,那麼這個View會停在最接近當前View的位置 |
我們可以通過兩種 方法設定這個Flag
- 方法一
setScrollFlags(int)
- 方法二
app:layout_scrollFlags="scroll|enterAlways"
注意事項
AppBarLayout必須作為CoordinatorLayout的直接子View,否則它的大部分功能將不會生效,如layout_scrollFlags等。
首先我們先來看一下我們 效果圖一是怎樣實現的
程式碼
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
.
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp"
android:src="@drawable/add_2"/>
</android.support.design.widget.CoordinatorLayout>
思路 分析
從圖中我們可以知道 layout_scrollFlags="scroll|enterAlways,
前面已經說到layout_scrollFlags=scroll的時候,這個View會 跟著 滾動 事件響應,
layout_scrollFlags=“enterAlways”的時候 這個View會響應下拉事件
所以呈現出來的結果應該是我們在上拉的時候toolBar 會隱藏,下拉的時候toolBar會出來
那如果當我們的toolBar 等於 app:layout_scrollFlags="scroll|snap"的時候 ,
layout_scrollFlags=scroll的時候,這個View會 跟著 滾動 事件響應,
layout_scrollFlags=“snap”的時候 在Scroll滑動事件結束以前 ,如果這個View部分可見,那麼這個View會停在最接近當前View的位置。
綜上呈現的效果如下,程式碼見ToolBarSampleSnar的佈局檔案
結合ViewPager
佈局程式碼如下
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp">
<ImageView android:layout_width="match_parent"
android:layout_height="200dp"
android:background="?attr/colorPrimary"
android:scaleType="fitXY"
android:src="@drawable/tangyan"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp"
android:src="@drawable/add_2"/>
</android.support.design.widget.CoordinatorLayout>
思路分析
其實相對於前 一個例子,只是把 擺放RecyclerView 的位置替換成ViewPager而已,為了有頁面導航器的效果,再使用 TabLayout而已,而TabLayout 在我們滑動的時候最終會停靠在 最頂部,是因為我們沒有設定其layout_scrollFlags,即TabLayout是靜態的
執行以後,即可看到以下的結果
下面我們一起來看一下 TabLayout是怎樣結合ViewPager直線 導航器的效果的
程式碼註釋 裡面已經解釋地很清楚了 ,這裡我就不解釋了
public class ViewPagerSample extends AppCompatActivity {
ViewPager mViewPager;
List<Fragment> mFragments;
String[] mTitles = new String[]{
"主頁", "微博", "相簿"
};
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_third);
// 第一步,初始化ViewPager和TabLayout
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tabs);
setupViewPager();
}
private void setupViewPager() {
mFragments = new ArrayList<>();
for (int i = 0; i < mTitles.length; i++) {
ListFragment listFragment = ListFragment.newInstance(mTitles[i]);
mFragments.add(listFragment);
}
// 第二步:為ViewPager設定介面卡
BaseFragmentAdapter adapter =
new BaseFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
mViewPager.setAdapter(adapter);
// 第三步:將ViewPager與TableLayout 繫結在一起
mTabLayout.setupWithViewPager(mViewPager);
}
}
如果我們想更改Indicator的相關樣式,我們可以在佈局檔案裡面使用
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff"/>
如果你不想使用Google 幫我們 封裝好的控制元件的話,你也可以自己自定義一個控制元件,你可以參考我的這一篇部落格仿網易新聞的頂部導航指示器
在看例子結合ViewPager的視覺特差之前 ,我們需要先了解CollapsingToolbarLayout這個控制元件
CollapsingToolbarLayout
CollapsingToolbarLayout繼承與FrameLayout,官網地址,請自備梯子。
簡單來說 ,CollapsingToolbarLayout是工具欄的包裝器,它通常作為AppBarLayout的孩子。主要實現以下功能
- Collapsing title(可以摺疊 的 標題 )
- Content scrim(內容裝飾),當我們滑動的位置 到達一定閥值的時候,內容 裝飾將會被顯示或者隱藏
- Status bar scrim(狀態列布)
- Parallax scrolling children,滑動的時候孩子呈現視覺特差效果
- Pinned position children,固定位置的 孩子
下面我們一起來看一下幾個常量
常量 | 解釋說明 |
---|---|
int COLLAPSE_MODE_OFF | The view will act as normal with no collapsing behavior.(這個 View將會 呈現正常的結果,不會表現出摺疊效果) |
int COLLAPSE_MODE_PARALLAX | The view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.(在滑動的時候這個View 會呈現 出 視覺特差效果 ) |
int COLLAPSE_MODE_PIN | The view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.(當這個View到達 CollapsingToolbarLayout的底部的時候,這個View 將會被放置,即代替整個CollapsingToolbarLayout) |
我們有兩種方法可以設定這個常量,
方法一:在程式碼中使用這個方法
setCollapseMode(int collapseMode)
方法 二:在佈局檔案中使用自定義屬性
app:layout_collapseMode="pin"
到此 ,CollapsingToolbarLayout的一些重要屬性已經講解完畢,下面我們一起來看一下我們是怎樣結合ViewPager實現視差效果的
結合ViewPager的視覺特差
佈局程式碼
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/tangyan"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="15dp"
android:src="@drawable/add_2"/>
</android.support.design.widget.CoordinatorLayout>
效果圖如下
思路解析
結構圖如圖片所示,先說明CollapsingToolbarLayout的變化
CollapsingToolbarLayout裡面 包含ImageView 和ToolBar,ImageView的app:layout_collapseMode="parallax",表示視差效果,ToolBar的 app:layout_collapseMode="pin",當這個TooBar到達 CollapsingToolbarLayout的底部的時候,會代替整個CollapsingToolbarLayout顯示
接著說明TabLayout的變化
從前面的描述我們已經知道當 沒有指定app:layout_scrollFlags的時候,最終TabLayout會靜止,不會隨著滑動的 時候消失不見
拓展
如果我們僅僅 改變CollapsingToolbarLayout的app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"的時候,其它程式碼不變,執行以後,我們將可以看到如下效果圖
總結
這篇部落格主要講解了CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout的一些相關屬性。
- 對於AppBarLayout,我們主要 講解了這個屬性app:layout_scrollFlags,設定不同 的屬性我們可以在滾動的時候顯示不同 的效果
- 對於CollapsingToolbarLayout,我們主要講解了app:layout_collapseMode這個屬性,設定不同的值,我們可以讓其子View呈現不同的 炫酷效果,如parallax和pin等
CoordinatorLayout的相關用法還有很多,有興趣 瞭解的請自行閱讀: 官方文件地址
題外話
CoordinatorLayout這個控制元件真的很強大,使用它可以實現各種炫酷的效果,簡化了開發者的許多工作,有能力的話可以去研究一下原始碼 ,看是怎樣實現的?
參考文章:android-[譯]掌握CoordinatorLayout
原始碼下載地址:https://github.com/gdutxiaoxu/CoordinatorLayoutExample.git
歡迎大家關注我的微信公眾號號 stormjun949(徐公碼字),即可關注。 目前專注於 Android 開發,主要分享 Android開發相關知識和一些相關的優秀文章,包括個人總結,職場經驗等。
相關推薦
使用CoordinatorLayout打造各種炫酷的效果
使用CoordinatorLayout打造各種炫酷的效果 自定義Behavior —— 仿知乎,FloatActionButton隱藏與展示 NestedScrolling 機制深入解析 一步步帶你讀懂 CoordinatorLayout 原始碼 自定義 Behavior -仿新浪微博發現頁的實現 ViewP
Android 從無到有打造一個炫酷的進度條效果
fault ref size art href 一個 font itl top 從無到有打造一個炫酷的進度條效果Android 從無到有打造一個炫酷的進度條效果
從無到有打造一個炫酷的進度條效果
今天這篇文章要介紹的是一個酷炫的進度條的設計和實現,在進度的文字內容、顏色以及切換的圖片等都可以自由設定。我們先看下效果 (創意受Dribbble的啟發): 整體效果還是不錯的吧,哈哈,我自己還是比較滿意的~專案地址已上傳至 github ,歡迎
純CSS程式碼實現翻轉選單的炫酷效果
1、思路分析 滑鼠移入選單出現並翻轉 滑鼠移出收回選單 2、完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta char
Atom程式碼編輯軟體炫酷效果外掛activate-power-mode安裝方法
前言:程式碼不在花哨,華而不實;技術好才是王道。 Atom程式碼編輯軟體炫酷效果外掛activate-power-mode安裝方法 1.下載atom並安裝(這點較簡單,資源很容易找到) 2.下載activate-power-mode資料夾(資源易得) 3.將activate-p
Android 流星雨,紅包雨,大爆炸,瀑布飛花以及漣漪等炫酷效果
Leonids是一個與標準Android UI配合使用的粒子系統庫。該庫非常輕巧,LeonidsLib.jar只有81Kb。 首先宣告一點:因為我也是剛瞭解ParticleSystem,因為我只是需要用裡面的效果,說的不對的地方大家可以指出來。 我瞭解的效果有紅包雨,流星雨,大爆炸,瀑布飛花
仿製慕課網app實現鬥魚,全民k歌視訊引導頁(ViewVideoViewPaper)炫酷效果
在幾個月前,我第一次玩全民k歌,下載完app,它彈出來的引導頁吸引了我,不像以前的引導頁一樣千篇一律,而是用了視訊的方式,用一種動態的方式來實現。在今天,我突然又想起了這個效果,就抽出了一點時間在網上也借鑑了一些人的想法自己寫了一下這個炫酷的視訊引導頁。 現在我們先來看一下
【Android開發】安卓炫酷效果集合
1. android-ripple-background 能產生波浪效果的背景圖片控制元件,可以自定義顏色,波浪擴充套件的速度,波浪的圈數。 github地址 2. android-shapeLoadingView-master 高仿新版58 載入動畫 github地址 3. Arr
預設終端 + iTerm2 + oh_my_zsh + agnoster theme + Powerline fonts + solarized 打造macOS炫酷終端
先上圖 iTerm2效果 macOS自帶終端效果 iTerm2 iTerm是一個非常好的終端模擬器,官網地址:http://iterm2.com/ ,下載安裝之。 oh_my_zsh 檢視系統支援
原生js實現div跳動效果---很多炫酷效果的基本原理
效果預覽:這塊實現起來很簡單,原生的js實現更簡單。為什麼寫這個呢?因為這個其實是很多網頁動態效果的一個原型,不管是什麼大型的網站,其實底層的原理都是一樣的,基本思路是,畫出DIV,然後載入頁面的時候載入到每一個div元素,然後就是控制滑鼠的事件,移入和移出的時候執行偏移函式
炫酷效果集錦
這幾天開發的時候,想做一些好看而且酷炫的特效,於是又開始從網上收集各種特效資源。下面給大家一些我喜歡的把,附程式碼,喜歡的看原始碼,然後加到自己專案去把!! 1.很簡單卻很酷的粒子破碎效果 介紹: 實現思路 1.新建一個 Bean Particle,表示一個粒子物件;新建一個 View Expl
CSS3自定義Checkbox特效 5種炫酷效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS
Android探索之旅(第十四篇)Android中實現炫酷效果的Demo(持續收錄中......)
浪起來!使用 drawBitmapMesh 實現模擬水波紋效果 簡書傳送門 三十秒實現QQ首頁動畫特效 BMoveView為RadioGroup新增移動的特
android listview & toolbar形成的一種炫酷效果(外加一個圓形圖片的實現)
介面的效果用到的技術都很基本, 但實現的思路很新穎, 程式碼和佈局充滿各種技巧, 值得學習和借鑑. 效果圖: 原理圖: 佈局程式碼: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res
Linux實現黑客帝國炫酷效果
cmatrix是Linux環境下黑客帝國風格的屏保,綠色的字母在螢幕上刷刷如雨水落下,偶爾看看能回憶起程式
學習 CSS 之用 CSS 3D 實現炫酷效果
一、前言 把大象關進冰箱需要幾步?三步,把冰箱門開啟,把大象關進去,把冰箱門關上。 用 CSS 實現 3D 效果需幾步?三步,設定透視效果 perspective,改變元素載體為 preserve-3d,對元素進行 3D 轉換操作。 perspective 屬性決定了我們從什麼地方檢視元素,定義時
js網站輪播圖怎麽做如何做?雞哥教你簡單制作效果炫酷
多人 tle 哪裏 round 下載 簡單的 文件 但是 cell 日了狗啦,剛剛雞哥辛苦碼了那麽多字全丟了又要重新寫,這是第二遍寫了...今天雞哥給小白寫個不需要寫js原生代碼,只需要幾個插件和一段通俗易懂得jquery代碼就能搞定的輪播圖,當然js原生代碼寫著也不算很繁
讓文字發出炫酷的光效果
round 分享 bgp 發出 .com gre bsp mask ini .colorful { /* -webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, b
C語言實現粒子運動效果,最美C語言!最炫酷C語言!
eight src tps space hit size fad mar font 效果 我有一個微信公眾號,經常會分享一些C語言/C++技術相關的幹貨;如果你喜歡我的分享,可以用微信搜索“C語言學習部落”關註歡迎大家加入千人交流答疑裙:627+012+464C語
Android炫酷廣東快樂十分搭建的播放效果
tar operation container animation text one ESS eal ola 使用廣東快樂十分搭建述 dsluntan.com 貝塞爾曲線實現滑動效果,在使用屬性動畫實現水波紋效果,然後就能實現以上效果 三、實現 1、先封裝動畫框架,創建動