眾所周知，PageSlider 是用于頁面之間切換的組件，它通過響應(yīng)滑動(dòng)事件完成頁面間的切換，而 PageFlipper 可能知道的人就比較少了。

其實(shí) PageFlipper 和 PageSlider 類似，都是視圖切換組件，它們都繼承自 StackLayout，因此可以將多個(gè) component 層疊在一起，每次只顯示一個(gè)組件。

當(dāng)視圖從一個(gè) component 切換到另一個(gè) component 時(shí)，PageFlipper 支持指定動(dòng)畫效果。

區(qū)別：

PageFlipper 通過 addComponent（） 添加 component，可使用動(dòng)畫控制多個(gè) component 之間的切換效果，是個(gè)輕量級(jí)的組件，適合展示少量靜態(tài)數(shù)據(jù)。

而 PageSlide 是由 provider 來提供 component 的，更適用復(fù)雜的視圖切換，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)加載。

下面是一個(gè) PageSlider 和 PageFlipper 結(jié)合起來的使用效果，頁面中間的卡片使用的是 PageSlider，背景圖片和底部的數(shù)字指示器用的是 PageFlipper。

PageSlider

PageSlider 可以說是鴻蒙中最常用的視圖切換組件了，使用方法不用多做介紹，官方文檔有詳細(xì)的說明，這里主要說一下一個(gè)特殊的效果。

①一屏多頁效果

其實(shí)鴻蒙本身有提供一個(gè) setClipEnabled（） 的方法，作用是設(shè)置是否允許在組件超出其父布局時(shí)自動(dòng)裁剪組件。

理論上通過給 pageSlider 父布局設(shè)置 setClipEnabled（false），加上給子組件設(shè)置合適的寬度可以實(shí)現(xiàn)一屏多頁效果，但是經(jīng)過測(cè)試并沒達(dá)到效果。

這個(gè)方法我也單獨(dú)拿出來在其他場景驗(yàn)證過確實(shí)無效，下面是驗(yàn)證的效果。

但是鴻蒙卻提供了另外一個(gè)方法 setPageMargin（），它的作用是設(shè)置 PageSlider 中子組件邊距的，當(dāng)傳入一個(gè)合適的負(fù)數(shù)時(shí)（必須是負(fù)數(shù)），就能實(shí)現(xiàn)一屏同時(shí)顯示多個(gè)子組件的效果：

②動(dòng)態(tài)設(shè)置縮放透明度變化

設(shè)置透明度和縮放比例就不細(xì)說了，主要就是在 PageSlider 子組件加載完成后和頁面切換中的回調(diào)方法中改變 alpha 值和 scale 值。

直接上代碼：

public final class AlphaScalePageTransformer {

/**

* 縮放

*/

public static final float INACTIVE_SCALE = 0.8f;

/**

* 透明度

*/

public static final float INACTIVE_ALPHA = 0.5f;

/**

* 設(shè)置初始狀態(tài)的縮放和透明度

*

* @param child

* @param position

* @param current

*/

public static void defaultPage（ListContainer child， int position， float current） {

if （position ！= current） {

child.setAlpha（INACTIVE_ALPHA）;

child.setScaleX（INACTIVE_SCALE）;

child.setScaleY（INACTIVE_SCALE）;

}

}

/**

* 設(shè)置滑動(dòng)中的縮放和透明度

*

* @param childList

* @param position

* @param offset

* @param direction

*/

public static void transformPage（List《ListContainer》 childList， int position， float offset， float direction） {

Component child = childList.get（position）;

float scale = INACTIVE_SCALE + （1 - INACTIVE_SCALE） * （1 - Math.abs（offset））;

float alpha = INACTIVE_ALPHA + （1 - INACTIVE_ALPHA） * （1 - Math.abs（offset））;

child.setScaleX（scale）;

child.setScaleY（scale）;

child.setAlpha（alpha）;

if （direction 》 0） {

if （position 《 childList.size（） - 1） {

child = childList.get（position + 1）;

}

} else {

if （position 》= 1） {

child = childList.get（position - 1）;

}

}

scale = INACTIVE_SCALE + （1 - INACTIVE_SCALE） * Math.abs（offset）;

alpha = INACTIVE_ALPHA + （1 - INACTIVE_ALPHA） * Math.abs（offset）;

child.setScaleX（scale）;

child.setScaleY（scale）;

child.setAlpha（alpha）;

}

}

設(shè)置兩邊的 component 透明度和縮放效果：

//設(shè)置初始狀態(tài)縮放和透明度

AlphaScalePageTransformer.defaultPage（image， i， pageSlider.getCurrentPage（））;

//設(shè)置頁面切換中縮放和透明度

pageSlider.addPageChangedListener（new PageChangedListener（） {

@Override

public void onPageSliding（int position， float positionOffset， int positionOffsetPixels） {

AlphaScalePageTransformer.transformPage（listContainers， position，

positionOffset， positionOffsetPixels）;

}

}）;

PageFlipper（翻頁器）

PageFlipper 是一個(gè)翻頁器，當(dāng)它有兩個(gè)或多個(gè)子組件時(shí)，切換過程中可以輕松設(shè)置入場動(dòng)畫和出場動(dòng)畫，以達(dá)到意想不到的效果。

雖然 PageFlipper 的使用率遠(yuǎn)不及 PageSlider，但這并不意味著 PageFlipper 就不強(qiáng)大。

他能通過簡單的代碼實(shí)現(xiàn)許多動(dòng)畫效果，比如淘寶頭條的效果，日歷翻頁效果，背景圖淡入淡出效果等等。

常用方法：

getCurrentComponent（）//獲取當(dāng)前組件

showNext（）：顯示下一個(gè)組件（如果當(dāng)前子組件是最后一個(gè)，則顯示第一個(gè)子組件）

showPrevious（）：顯示上一個(gè)組件（如果當(dāng)前子組件是第一個(gè)，則顯示最后一個(gè)子組件）

getFlipInterval（） ：獲取自動(dòng)翻轉(zhuǎn)時(shí)間

setFlipPeriod（int period） ：設(shè)置翻轉(zhuǎn)周期

startFlipping（） ：開啟自動(dòng)翻轉(zhuǎn)

stopFlipping（） ：停止自動(dòng)翻轉(zhuǎn)

addComponent（） ：添加組件

setIncomingAnimationA（） ：設(shè)置轉(zhuǎn)入動(dòng)畫

setOutgoingAnimation（） ：設(shè)置轉(zhuǎn)出動(dòng)畫

下面通過設(shè)置文字翻頁效果來了解下它的使用方法：

代碼如下：

public class IndicatorComponent extends DirectionalLayout {

/**

* 文字大小

*/

private static final int TEXT_SIZE = 130;

/**

* 動(dòng)畫時(shí)長

*/

private static final int DURATION = 600;

private PageFlipper textSwitcher;

private Text textcomponent;

/**

* ItemsCountcomponent

*

* @param context

* @param attrSet

*/

public IndicatorComponent（Context context， AttrSet attrSet） {

super（context， attrSet）;

init（context）;

}

private void init（Context context） {

setOrientation（ComponentContainer.HORIZONTAL）;

textSwitcher = new PageFlipper（context）;

//理論上PageFlipper只需要添加兩個(gè)子component就能實(shí)現(xiàn)動(dòng)畫效果，但是實(shí)際測(cè)試發(fā)現(xiàn)如果切換速度太快就導(dǎo)致子組件銜接不上出現(xiàn)組件消失的額情況，

//因此這里通過實(shí)踐多添加了幾個(gè)子component，防止滑動(dòng)過快出現(xiàn)bug

textSwitcher.addComponent（createcomponentForTextSwitcher（context））;

textSwitcher.addComponent（createcomponentForTextSwitcher（context））;

textSwitcher.addComponent（createcomponentForTextSwitcher（context））;

textSwitcher.addComponent（createcomponentForTextSwitcher（context））;

addComponent（textSwitcher， new LayoutConfig（ComponentContainer.LayoutConfig.MATCH_CONTENT，

ComponentContainer.LayoutConfig.MATCH_CONTENT））;

textcomponent = new Text（context）;

textcomponent.setTextSize（TEXT_SIZE）;

textcomponent.setFont（Font.DEFAULT_BOLD）;

textcomponent.setTextColor（new Color（Color.getIntColor（“#8cffffff”）））;

addComponent（textcomponent， new LayoutConfig（ComponentContainer.LayoutConfig.MATCH_CONTENT，

ComponentContainer.LayoutConfig.MATCH_CONTENT））;

}

/**

* 創(chuàng)建組件

*

* @param context 上下文

* @return text

*/

private Text createcomponentForTextSwitcher（Context context） {

Text text = new Text（context）;

text.setTextSize（TEXT_SIZE）;

text.setFont（Font.DEFAULT_BOLD）;

text.setTextColor（Color.WHITE）;

text.setLayoutConfig（new PageFlipper.LayoutConfig（ComponentContainer.LayoutConfig.MATCH_CONTENT，

PageFlipper.LayoutConfig.MATCH_CONTENT））;

return text;

}

/**

* update

*

* @param newPosition 新位置

* @param oldPosition 舊位置

* @param totalElements 總數(shù)

*/

public void update（int newPosition， int oldPosition， int totalElements） {

textcomponent.setText（“ / ” + totalElements）;

int offset = textSwitcher.getHeight（）;

if （newPosition 》 oldPosition） {

//設(shè)置組件進(jìn)入和退出的動(dòng)畫

textSwitcher.setIncomingAnimation（createPositionAnimation（-offset， 0， 0f， 1f， DURATION））;

textSwitcher.setOutgoingAnimation（createPositionAnimation（0， offset， 1f， 0f， DURATION））;

} else if （oldPosition 》 newPosition） {

textSwitcher.setIncomingAnimation（createPositionAnimation（offset， 0， 0f， 1f， DURATION））;

textSwitcher.setOutgoingAnimation（createPositionAnimation（0， -offset， 1f， 0f， DURATION））;

}

//顯示下一個(gè)組件并執(zhí)行動(dòng)畫

textSwitcher.showNext（）;

Text text = （Text） textSwitcher.getCurrentComponent（）;

text.setText（String.valueOf（newPosition + 1））;

}

/**

* 創(chuàng)建屬性動(dòng)畫

*

* @param fromY

* @param toY

* @param fromAlpha

* @param toAlpha

* @param duration

* @return

*/

private AnimatorProperty createPositionAnimation（int fromY， int toY， float fromAlpha， float toAlpha， int duration） {

AnimatorProperty animatorProperty = new AnimatorProperty（）;

animatorProperty.setCurveType（Animator.CurveType.DECELERATE）;

animatorProperty.alphaFrom（fromAlpha）;

animatorProperty.alpha（toAlpha）;

animatorProperty.moveFromY（fromY）;

animatorProperty.moveToY（toY）;

animatorProperty.setDuration（duration）;

return animatorProperty;

}

}

結(jié)束

以上主要介紹了 PageSlider 和 PageFlipper 的一些簡單使用，最后補(bǔ)充一個(gè)小功能，設(shè)置漸變效果，這個(gè)簡單的效果可能很多人還不知道如何設(shè)置。

首先生成一個(gè) foreground_gradient.xml：

《shape

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:shape=“rectangle”》

//設(shè)置填充的顏色，可以根據(jù)實(shí)際需要設(shè)置多個(gè)

《solid

ohos:colors=“#000000，#00ffffff，#d8000000”/》

//設(shè)置漸變方向，有三個(gè)值可供選擇：linear_gradient，radial_gradient，sweep_gradient

《gradient

ohos:shader_type=“l(fā)inear_gradient”

/》《/shape》

然后給目標(biāo)組件設(shè)置前景色即可：

ohos:foreground_element=“$graphic:foreground_gradient”

責(zé)任編輯：haq