|
[[386676]] 詳細については、以下をご覧ください。 51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。 https://harmonyos..com 序文 Androidベースのバナーコンポーネント（https://github.com/youth5201314/banner/tree/release-1.4.10）は、HarmonyOSへの移行とリファクタリングが完了しました。コードはオープンソース化（https://gitee.com/isrc_ohos/banner_ohos）されており、既に多くのスターとフォークを獲得しています。皆様のダウンロード、ご利用、そして貴重なフィードバックをお待ちしております。 背景 バナーは通常、アプリの上部または中央に配置され、ループ再生や手動スワイプで画像を表示します。下部の円形インジケーターは通常、現在表示されている画像のページ番号を示します。バナーコンポーネントは見た目が美しく、ページレイアウトのスペースを節約できるため、現在では様々なアプリで広く使用されています。 機能デモンストレーション HarmonyOSシステムをベースに、コントロールプロパティをカスタマイズすることでバナーコンポーネントを実装しました。このコンポーネントは、画像のループと手動スワイプの2つの機能をサポートしています。 1. ループ再生 ページ上でユーザー操作がない場合、バナー内の画像は事前に設定された時間間隔と順序に従って自動的に回転します。この方法はループ再生と呼ばれます（図1を参照）。 図1はループ再生機能を示しています。 2. 手動スライド 指でコンポーネントをスライドさせたときに画像を再生することもできます。この場合、画像の再生順序はユーザーのスワイプ方向によって決定され、再生時間間隔はユーザーのスワイプ速度によって決定されます。 図2は手動スライド機能を示しています。 サンプル分析 図3: バナーコンポーネントのタイトルとインジケーター このサンプルでは、カルーセルに5枚の画像を配置し、各画像の下にページ番号インジケーターとタイトルを追加しています。ページ番号インジケーターには現在再生中の画像のページ番号が表示され、タイトルには画像に関する主要な情報が表示されます（図3を参照）。また、サンプルには画像のクリックイベントも含まれています。ユーザーがページコンテンツに興味を持った場合、画像をクリックすると、図4に示すように別の表示画面にリンクされます。 図 4 はクリック イベントの効果を示しています。 サンプル セクションのコードについては、以下で詳しく説明します。 1. Banner クラスと OnBannerListener クラスをインポートします。 - // Bannerオブジェクトのインスタンス化に使用されます
- com.youth.banner.Banner をインポートします。
- //画像のクリックイベントを受信するために使用します
- com.youth.banner.listener.OnBannerListener をインポートします。
2. オブジェクトをインスタンス化する - バナー banner = new Banner(this);
3. バナーのレイアウトパラメータを設定する - // コンポーネントの幅は親コントロールの幅に従い、高さは 800 に固定されます。
- DirectionalLayout.LayoutConfig レイアウト構成 = 新しい DirectionalLayout.LayoutConfig (ComponentContainer.LayoutConfig.MATCH_PARENT、800);
4. コンポーネントリスナーを構成する - banner.setOnBannerListener(this); // 画像のクリック イベントを受信するために使用されます。
- @オーバーライド
- パブリックvoid OnBannerClick( int位置) {
- // 画像のクリック イベント機能を示すために、画像 0、2、3 にクリック イベントが設定されました。
- if (position == 0){ // 「タイトル1」を含む画像
- 提示(新しい forthAbilitySlice()、新しい Intent());
- }
- if (position == 2){ // 「Red Ferrari Big Sale」を含む画像
- present(新しい 5 つの AbilitySlice()、新しい Intent());
- }
- if (position == 3){ // 「ボクシング」を含む画像
- 新しい SecondAbilitySlice() と新しい Intent() が存在します。
- }
- }
5. コンポーネントが再生するために必要な画像を準備します。 - List<Integer> list = new ArrayList<>(); // リストの先頭に5枚の画像を追加します
- リストにリソーステーブル.Media_1を追加します。
- リストにリソーステーブル.Media_2を追加します。
- リストにリソーステーブル.Media_3を追加します。
- リストにリソーステーブル.Media_4を追加します。
- リストにリソーステーブル.Media_5を追加します。
6. 画像のタイトルを準備する - List<String> title = new ArrayList<>(); // 5 つのタイトルをリストの先頭に追加します。
- title.add ( "ブルージャケット" );
- title.add ( "スターになる夢を実現しよう" );
- title.add ( "ボクシング" );
- title.add ( "赤いフェラーリの大セール" );
- title.add ( "閲覧しながら購入する" );
7. コンポーネントパラメータを設定する このステップでは、画像モード、画像カルーセルの表示間隔、コンポーネントスタイル、タイトルサイズの4つの属性を未設定のままにすることができます。ユーザーがこれらの属性を設定しない場合は、デフォルト値が使用されます。 - banner.setImages(list) // 画像リストをコンポーネントに読み込みます
- .setBannerTitles(title) // コンポーネントに画像タイトルのリストを読み込みます
- .setScaleType(3) // 画像モード設定
- .setDelayTime(3000) // 画像カルーセルの時間間隔を設定します
- .setBannerStyle(5) // コンポーネントのスタイル設定
- .setTitleTextSize(60) // タイトルのサイズを設定する
- 。始める（）;
8. レイアウトにバナーを追加します。 - myLayout.addComponent(バナー);
ライブラリ分析 1. 関数の実装 （1）ループ再生 図5. ループ再生原理の模式図 図5に示すように、画像(1)から(5)は、コンポーネントに読み込む5枚のオリジナル画像です。画像(1)をコピーして位置(6)に配置します。画像(1)と画像(6)は同じ画像です。コンポーネントがループ再生される場合、画像(1)から(5)が順番に再生され、各画像に一時停止時間を設定します。画像(6)を再生する場合、一時停止時間は設定されず、直接画像(1)にジャンプして再生されます。画像(1)と(6)は同じ画像であるため、ユーザーは肉眼で画像の遷移を確認できません。同様に、画像(5)をコピーして位置(0)に配置する必要があります。これは、ユーザーが手動スワイプモードで画像を左にスライドさせる状況に適しています。 上記のループ再生原理を用いて、図6(b)に示す画像(5)と(1)の切り替え効果はスライド再生効果である。上記の原理を用いず、画像(5)を直接再生した後に画像(1)を再生すると、図6(a)に示すように、2つの画像が点滅する再生効果となり、最初の4つの画像の切り替え効果と矛盾する。したがって、ここでは図5に示すループ再生原理を用いる必要がある。 (a) 画像点滅再生効果 b) 画像スライド再生効果 図 6 は、画像の点滅とスライド再生の効果を比較しています。 ループ再生原理のコード分析は次のとおりです。 - スイッチ（状態）{
- case 0: // 操作は実行されません
- if (currentItem == 0) { // 0番目の画像を再生するとき
- viewPager.setCurrentPage( count , true ); // 再生する 5 番目の画像にジャンプします。
- } else if (currentItem == count + 1) { // 6番目の画像を再生するとき
- viewPager.setCurrentPage(1, true ); // 再生する最初の画像にジャンプします
- }
- 壊す
- ケース1: //スワイプ開始時
- if (currentItem == count + 1) {
- viewPager.setCurrentPage(1, true );
- }それ以外の場合 (currentItem == 0) {
- viewPager.setCurrentPage( count , true );
- }
- 壊す
- ケース2: //スワイプ終了
- break; // これ以上の操作は実行されません。
- }
2. 指標の構築 HarmonyOSのバナーコンポーネントには、円形インジケーター、数値インジケーター、数値インジケーターとタイトル、円形インジケーターとタイトル（縦表示）、円形インジケーターとタイトル（横表示）の5種類のインジケーターが用意されています。このセクションでは、円形インジケーターを例に、インジケーターの作成方法を説明します。 （1）インジケータの初期化 コンポーネントの実行が開始されると、最初の画像を含むドットは黒く選択され、他のドットは赤く選択されていません。 - if (i == 0) { // 初期状態: 最初の画像を再生する
- パラメータ = 新しい DirectionalLayout.LayoutConfig(mIndicatorSelectedWidth、mIndicatorSelectedHeight);
- component1.setBackground( ElementScatter.getInstance(getContext()).parse(mIndicatorSelectedResId)); // 選択されたときにドットの背景を黒に設定します。
- } else { // 最初の画像以外のすべての画像
- パラメータ = 新しい DirectionalLayout.LayoutConfig(mIndicatorWidth、mIndicatorHeight); component1.setBackground(ElementScatter.getInstance(getContext()).parse(mIndicatorUnselectedResId));
- //ドットの背景を赤（非選択状態）に設定する
（２）指標の更新 画像カルーセルが次の画像に進むと、インジケーターのステータスが更新され、新しく再生された画像を含むドットが黒 (選択済み) に設定され、他のドットが赤 (未選択) に設定されます。 - // 前の画像を含むドットを赤に設定し、選択されていないことを示します。
- indicatorImages.get((lastPosition - 1 + count ) % count ).setBackground( ElementScatter.getInstance(getContext()).parse(mIndicatorUnselectedResId));
- indicatorImages.get((lastPosition - 1 + count ) % count ).setLayoutConfig(Unselectedparams);
- //現在再生中の画像を含む円を黒くして選択します。
- indicatorImages.get((position - 1 + count ) % count ).setBackground( ElementScatter.getInstance(getContext()).parse(mIndicatorSelectedResId));
- indicatorImages.get((position - 1 + count ) % count ).setLayoutConfig(Selectedparams);
3. 移植方法 HarmonyOSのBannerコンポーネントを移植する際には、主にAPIの置き換え、つまりAndroidのAPIをHarmonyOSのAPIに置き換える手法が用いられます。例えば、AndroidのViewPageクラスをHarmonyOSのPageSliderクラスに置き換えます。 プロジェクト貢献者 チェン・コンシャオ、ジェン・センウェン、ジュー・ウェイ、チェン・メイルー 詳細については、以下をご覧ください。 51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。 https://harmonyos..com | 