輪播啥意思 ?輪播什么意思 _生活知道

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

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

文章插圖

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

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

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

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

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

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

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

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

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

文章插圖
不改變層級(jí)的情況下，動(dòng)畫會(huì)顯得很亂位置，所以我們需要根據(jù)動(dòng)畫的進(jìn)行，動(dòng)態(tài)的調(diào)整層級(jí) 。
next 狀態(tài)很簡(jiǎn)單，將對(duì)應(yīng)的的位置變動(dòng)一下即可，iv3 到 iv1，iv1 到 iv2，iv2 到 iv4，iv4 到 iv3 ，進(jìn)行位置的簡(jiǎn)單互換，previous 狀態(tài)同理卡，篇幅起見，代碼就不放了。
除了三個(gè)狀態(tài)，還需要在 MotionScene 聲明視云輪動(dòng)畫：
.........
就是告訴系統(tǒng)往左滑動(dòng)會(huì)執(zhí)行 start 到 next 狀態(tài)的動(dòng)畫，往右滑動(dòng)執(zhí)行 start 到 previous 狀態(tài)的動(dòng)畫，最后在布局文件中的 Carousel 引用系統(tǒng)就知道如何處理了。
3.斗魚設(shè)置輪播數(shù)量
最后你需要在調(diào)用處設(shè)置輪播的數(shù)量，以及滑動(dòng)以后，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 思路簡(jiǎn)單，又是基于 ConstraintLayout，斗魚視頻輪播什么意思，確實(shí)是一個(gè)很好的工具，視頻輪播什么意思。
當(dāng)接到頁面元素不多，動(dòng)畫有點(diǎn)復(fù)雜的輪播需求壁紙時(shí)，Carousel 是一個(gè)很好的選擇。反之，當(dāng)頁面變化的元素比較多，動(dòng)畫比較簡(jiǎn)單的時(shí)候，可不一定了。因?yàn)槟阈枰獙懭龔埥缑妫m然思路簡(jiǎn)單，但也抵不住代碼量多?。?
一波學(xué)習(xí)以后，輪播信息啥意思，發(fā)現(xiàn)設(shè)計(jì)大佬最后的動(dòng)效是圖片覆蓋，一張圖需要兩個(gè) ImageView 來實(shí)現(xiàn)！
完了
完了，又白學(xué)了?。。?
不過，我卻借此機(jī)會(huì)掌握了 MotionLayout，以后，寫動(dòng)畫的look時(shí)候記錄多了一種技術(shù)儲(chǔ)備。
在這里還分享一份由大佬親自收錄壁紙整理的學(xué)習(xí)PDF+架構(gòu)視頻+面試文檔+源碼筆記，高級(jí)架構(gòu)技術(shù)進(jìn)階腦圖、Android開發(fā)面試專題資料，輪播記錄是什么意思，高級(jí)進(jìn)階架構(gòu)資料
這些都是我現(xiàn)在閑暇時(shí)還會(huì)反復(fù)翻閱的精品資料。里面對(duì)近幾年的大廠面試高頻知識(shí)點(diǎn)都有詳細(xì)的講解。相信可以有效地幫助大家掌握知識(shí)、理解原理，幫助大家在未來取得一份不錯(cuò)的答卷。
當(dāng)然，你也可以拿去查漏補(bǔ)缺，提升自身的競(jìng)爭(zhēng)力。
真心位置希望可以幫助到大家，Android路漫漫，共勉！
如果你有需要的話，只需私信吉我【進(jìn)階】即可獲取

文章插圖