輪播什么意思(輪播啥意思)
輪播什么意思
作者：九心
前言
最近官方寫業(yè)務(wù)的時候遇到一個帶有輪播的界面ConstraintLayout 。

文章插圖
設(shè)計圖
在交互效果還定稿的時候，大佬同事建議輪播樣式可以考慮 MotionLayout 中的 Carousel，這個組件就是為輪播而生 。
學(xué)習(xí)完發(fā)現(xiàn)和平 MotionLayout 確實好用，用同事的話來說，就是讓世界沒有難做的動畫 。
MotionLayout 的思路非常簡單卡，使用 ConstraintLayout 的寫法，定義動畫開始的一幀和動畫結(jié)束的一?。ǖ比晃頤且部梢約尤敫?嘀 。?詼??墓?討校??謔錄?谷Υシ⒁院?nbsp;， 會自動幫我們處理好動畫 。
不過，本文的重點視云輪可不是學(xué)習(xí) MotionLayout，而是教大家如何使用 Carousel，可以看一下我寫的效果：

文章插圖


文章插圖


文章插圖
另外，官方的效果也是非常炫酷：

文章插圖
并且 ， 滑動的動畫非常絲滑，建議自己編寫體驗 。
Demo地址：
https://github.com/mCyp/MotionDemo
簡介
學(xué)習(xí) Carousel 之前，我認定你已經(jīng)官方有 MotionLayout 的基礎(chǔ)了 。
如果你連 MotionLayout 是什么都不知道，建議你看一下官方的教程：
“
《MotionLayout官方教程》
https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn
《MotionLayout-輪播代碼實驗室》
https://codelabs.developers.google.com/codelabs/motion-layout?hl=zh-cn#0
好了，回到重點，Carousel 的中文意思消息-輪播記錄，它就是輪播的解決方案，可以幫助我們處理播比較復(fù)雜的輪播動畫 。
1. 核心概念
我們從官方的例子入手，輪播啥意思，構(gòu)建一個如圖的輪播：

文章插圖
官方圖片
在 MotionLayout ， 這些 View 可都是要寫出來視頻：

文章插圖
官方圖片
通常一個輪播，都會支持向前滑動和向后滑動這兩種動作 。如果我們要完整的展示一個 Carousel 動畫，至少需要三個狀態(tài)：
previousstartnext
start 是組件最初的狀態(tài)，start - previous 代表向前滑動的過程 ， start - next 則代表向后滑動的過程，對應(yīng)額狀態(tài)如圖：

文章插圖
官方圖片
從上文中知道，屏幕只能顯示中間的三個 View 。start 就是開始的狀態(tài) ， 這個時候一共有 A、B、C、D 和 E 五個 View ， 屏幕中顯示的是 B、C 和 D 。當發(fā)生向后滑動雙子的時候 ， B、C、D 和 E 移動到了 A、B、C 和 D 的位置（A 組件可以不處理），屏幕中看見的是C 、D 和 E 。向前滑動同理 。
三個狀態(tài)真的夠嗎？這是很多同學(xué)的疑問 ， 官方輪播是什么意思 。
Carousel 中有一個偷天換日的技能，每一次動畫完成后，整個界面又會重置成 start 狀態(tài)，但控件映射的數(shù)據(jù)卻發(fā)生了變化：

文章插圖
官方圖片
就像這張圖片發(fā)生的那樣，界面進行過一輪 start - next 動畫以后15秒，界面又重置為 start 狀態(tài) 。注意一下，雖然狀態(tài)重置了 ， 但是數(shù)據(jù)和控件的對應(yīng)的關(guān)系消息發(fā)生了變化！
原來屏幕60次中組件：
Widget B 對應(yīng) Item2Widget C 對應(yīng) Item3Widget D 對應(yīng) Item4
重置以后：
Widget B 對應(yīng)視頻視頻 Item3Widget C 對應(yīng) Item4Widget D 對應(yīng) Item5
跟 next 狀態(tài)中屏幕展示的數(shù)據(jù)是一樣的 ， 所以這三個狀態(tài)真的夠用圖了 。
2. 代碼
講解一下上面過程對應(yīng)的偽代碼 。
步驟一
在布局文件 MotionLayout 中，我們要把界面中所有元素都寫出來：
布局層級是很是什么重要的視云輪！
布局層級是很是什么重要的視云輪！
布局層級是很是什么重要的視云輪！
重要的事情需要說三遍，一定要正確的順序放置控件，系統(tǒng)是根據(jù)視圖的層級確認View的先后順序的 。
不然等代碼寫完以后，你會發(fā)出卡這樣的疑問：代碼明明沒問題，動畫執(zhí)行后的數(shù)據(jù)排列怎么都對不上？
步驟二
在 MotionScene 文件中描繪出 start、previous 和 next 三個狀態(tài)中組件對應(yīng)的位置，輪播什么意思飯圈，相當于用constraintlayout 寫了三個界面：
我們先用 ConstraintSet 表示一個狀態(tài) ， 接著在這個狀態(tài)中用約束布局的寫法告訴系統(tǒng)每個 id 對應(yīng)的控件應(yīng)該出現(xiàn)在什么位置 。
再用 forward 對應(yīng)的 Transition 表示 start - previous 的過度動畫 ， 吉視云輪播什么意思，用 backward 對應(yīng)的 Transition 表示 start - next 的動畫過度，這是為了告訴系統(tǒng)什么樣的動作會觸發(fā)什么樣的動畫 。
雖然我們消息做了很少，但是 MotionLayout 卻替我們做了很多！
步驟三：加入Carousel
在布局中和平圖引入 Carousel：
解釋一下幾個屬性：
app:carousel_forwardTransition：向前跳轉(zhuǎn)的動畫，引用 forward 對應(yīng)的 Transition 。
app:carousel_backwardTransition向后跳轉(zhuǎn)的動畫，引用 backward 對應(yīng)輪播的 Transition 。
app:carousel_previousState：向前跳轉(zhuǎn)動畫雙子完成后對應(yīng)的狀態(tài)，引用 previous 狀態(tài)的 ConstraintSet 。
app:carousel_nextState：向后中跳轉(zhuǎn)動畫后對應(yīng)壁紙的狀態(tài)，引用 next 狀態(tài)的 ConstraintSet 。
app:carousel_infinite：開啟無限循環(huán)視頻 。
app:carousel_firstView：哪個控件展示第一條數(shù)據(jù)，iv2代表中間的控件 iv2 將展示第一條數(shù)據(jù) 。
步驟四：在Activity中聲明
需要設(shè)置一下適配器：
carousel.setAdapter(object : Carousel.Adapter { override fun count(): Int {// need to return the number of items we have in the carousel } override fun populate(view: View ，  index: Int) {  // need to implement this to populate the view at the given index } override fun onNewItem(index: Int) {  // called when an item is set }})
在這個適配器中，我們需要告訴適配器，有多少條數(shù)據(jù)要展示，當新的一頁到來的時候，控件應(yīng)該如何更新展示的數(shù)據(jù)等 。
實戰(zhàn)
我們實戰(zhàn)信息的例子是雙子15秒：

文章插圖
自信分析一下這個動畫，也就兩點需要處理：
圖片由播黑白壁紙轉(zhuǎn)變?yōu)椴噬?。圖片翻轉(zhuǎn) 。
翻轉(zhuǎn)動畫比較簡單，可以通過 rotationY 來處理，不過也有一個坑 ， 后面再分析 。
【輪播啥意思 ?輪播什么意思】那黑白圖片變彩色呢？答案就是 ImageFilterView，他可以通過 app:saturation一鍵設(shè)置黑白轉(zhuǎn)彩色效果 。
1. 描繪界面
我們需要在 xml 文件中把所有的控件都寫出來，這個界面中一共有四個 ImageView，截圖中可能不太明顯，我又截了一張 3D 視圖：

文章插圖
AndroidStudio
上下居中比較簡單，左右定位則是借助了0.2寬、0.4寬、0.6寬和0.8寬的 GuideLine，如圖：

文章插圖
GuideLine
簡化后的布局文件代碼：
2. 描繪動畫
在之前的斗魚偽代碼中，我們知道要定義 previou、start 和 next 三種狀態(tài)，先看看最基本的 start 狀態(tài) ， 我們只要把界面中的約束都表達出來即可，就像我們在約束布局中使用的那樣 。
拿出 MotionScene 文件，暫時只放了 start 狀態(tài)：
MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto">
簡單的描述一下：
iv1 在最里面，位置上下居中，左邊在0.2的分割線，右邊在0.8的分割線，Saturation 為0，即圖片黑白，translationZ 為 0dp 。iv2 在最左邊，位置上下居中，左邊在父布局左側(cè)，右邊在0.4的分割線，Saturation 為0，translationZ 為 4dp，rotationY 偏移30度 。iv3 在最右邊 ， 位置上下居中，左邊在0.6的分割線，右邊與父布局右邊對齊，Saturation 為0，translationZ 為 6dp，rotationY 偏移-30度 。iv3 在最上邊，位置上下居中 ， 左邊在0.2的分割線，右邊在0.8的分割線，長和寬各放大1.2倍，Saturation 為1，即彩色圖片，translationZ 為 10dp 。
細心的小伙伴可能15秒發(fā)現(xiàn)了，我這里多用了一個 translationZ，這個屬性是干嘛的呢？
這個屬性在有背景的情況下，可以幫我們設(shè)置陰影 。除此以外，還可以幫助我們設(shè)置層級，布局文件中的默認記錄層級是先聲明的 View 層級低，后聲明的 View 層級高，即后面寫的 View 會把前面寫的 View 給遮擋住 。
如果60次以這個層級進行動畫，坑就來了：

文章插圖
不改變層級的情況下 ， 動畫會顯得很亂位置，所以我們需要根據(jù)動畫的進行，動態(tài)的調(diào)整層級 。
next 狀態(tài)很簡單，將對應(yīng)的的位置變動一下即可，iv3 到 iv1，iv1 到 iv2，iv2 到 iv4，iv4 到 iv3 ， 進行位置的簡單互換，previous 狀態(tài)同理卡，篇幅起見，代碼就不放了 。
除了三個狀態(tài)，還需要在 MotionScene 聲明視云輪動畫：
.........
就是告訴系統(tǒng)往左滑動會執(zhí)行 start 到 next 狀態(tài)的動畫，往右滑動執(zhí)行 start 到 previous 狀態(tài)的動畫，最后在布局文件中的 Carousel 引用系統(tǒng)就知道如何處理了 。
3.斗魚設(shè)置輪播數(shù)量
最后你需要在調(diào)用處設(shè)置輪播的數(shù)量，以及滑動以后，index 變化后 ， 如何通知 View 發(fā)生變化：
class CarMotionActivity : AppCompatActivity() { var images = intArrayOf(  R.drawable.car1， R.drawable.car3 ，   R.drawable.car4， R.drawable.car2 ) override fun onCreate(savedInstanceState: Bundle?) { //...  val carsoul = findViewById(R.id.carousel)  carsoul.setAdapter(object : Carousel.Adapter {override fun count(): Int { return 4}override fun populate(view: View?，index: Int) { if(view is ImageView){  view.setImageResource(images[index]) }}override fun onNewItem(index: Int) { // called when an item is set}  }) }}
ok，入門版本的 Carousel 玩法就成功掌握了 。
寫在最后話
Carousel 思路簡單，又是基于 ConstraintLayout，斗魚視頻輪播什么意思 ， 確實是一個很好的工具，視頻輪播什么意思 。
當接到頁面元素不多 ， 動畫有點復(fù)雜的輪播需求壁紙時，Carousel 是一個很好的選擇 。反之，當頁面變化的元素比較多 ， 動畫比較簡單的時候，可不一定了 。因為你需要寫三張界面，雖然思路簡單 ， 但也抵不住代碼量多?。?
一波學(xué)習(xí)以后，輪播信息啥意思，發(fā)現(xiàn)設(shè)計大佬最后的動效是圖片覆蓋，一張圖需要兩個 ImageView 來實現(xiàn)！
完了
完了，又白學(xué)了?。。?
不過，我卻借此機會掌握了 MotionLayout，以后，寫動畫的look時候記錄多了一種技術(shù)儲備 。
在這里還分享一份由大佬親自收錄壁紙整理的學(xué)習(xí)PDF+架構(gòu)視頻+面試文檔+源碼筆記，高級架構(gòu)技術(shù)進階腦圖、Android開發(fā)面試專題資料，輪播記錄是什么意思 ， 高級進階架構(gòu)資料
這些都是我現(xiàn)在閑暇時還會反復(fù)翻閱的精品資料 。里面對近幾年的大廠面試高頻知識點都有詳細的講解 。相信可以有效地幫助大家掌握知識、理解原理，幫助大家在未來取得一份不錯的答卷 。
當然，你也可以拿去查漏補缺，提升自身的競爭力 。
真心位置希望可以幫助到大家，Android路漫漫，共勉！
如果你有需要的話，只需私信吉我【進階】即可獲取

文章插圖


文章插圖


文章插圖

• 上爻是什么意思 ?上爻
• gck和gcs配電柜的區(qū)別 ?gck是什么意思
• ?動詞不定式是什么意思
• 磁盤備份是什么意思 ?磁盤備份
• 籬落的意思是什么 ?籬落的意思
• 久違是什么意思啊 ?久違什么意思
• ?iot是什么意思
• 為啥推薦普通用戶使用WPS
• ?積溫是什么意思
• 待人接物是什么意思 ?待是什么意思