HarmonyOSが配布するTikTok風アプリ

[[430075]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com

プロジェクト紹介

Java UI を使用して、分散型 TikTok のようなアプリケーションを開発します。上下にスライドしてビデオを切り替える機能、コメント機能、デバイス移行機能、再生されたビデオ ページと進行状況、コメント データを記録します。

効果のデモンストレーション

1. 上下にスワイプしてビデオを切り替え、移行アイコンをクリックし、ポップアップウィンドウでオンラインデバイスを選択して、ビデオデータの移行を完了します。

2. コメントアイコンをクリックしてコメントを表示し、コメントの内容を編集して送信します。移行アイコンをクリックするとポップアップウィンドウが表示されるので、オンラインデバイスを選択してコメントデータの移行を完了します。

プロジェクト構造

メインコード

1. ページを上下にスライドします

ページ切り替えには、システム コンポーネント PageSlider を使用します。これは、デフォルトで左右に切り替わり、上下に設定されています: setOrientation(Component.VERTICAL);

 ohos.aafwk.ability.AbilitySlice をインポートします。
 ohos.aafwk.content.Intent をインポートします。
 ohos.agp.components.* をインポートします。 
 
 java.util.ArrayList をインポートします。
 java.util.List をインポートします。 
 
パブリッククラス MainAbilitySlice は AbilitySlice を拡張します {
    @オーバーライド
パブリックvoid onStart(インテント インテント) {
        super.onStart(インテント);
        UIContent をスーパーに設定します。
        // スライディングページコンポーネントを見つける
        ページスライダー pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);
        // スライド方向を上下に設定する
        pageSlider.setOrientation(Component.VERTICAL);
        //テストデータの収集
        リスト<文字列> listData=新しいArrayList<>();
        listData.add ( "最初のページ" );
        listData.add ( "2ページ目" );
        listData.add ( "ページ3" ); 
         
        // ページアダプタを設定する
        pageSlider.setProvider(新しいPageSliderProvider() {
            /**
             * 現在のアダプタで利用可能なビューの数を取得します
             */
            @オーバーライド
公共 整数getCount() {
 listData.size ()を返します。
            }
            /**
             * ページを作成する
             */
            @オーバーライド
パブリックオブジェクトcreatePageInContainer(ComponentContainerコンテナ、 int位置) {
                // レイアウトを見つける
                コンポーネント コンポーネント = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_item_page, null , false );
                テキスト textContent = (テキスト) component.findComponentById(ResourceTable.Id_text_item_page_content);
                //データを設定する
                textContent.setText(listData.get(position));
                // コンテナに追加
                コンテナにコンポーネントを追加します。
コンポーネントを返します。
            }
            /**
             * ページを破棄する
             */
            @オーバーライド
public void destroyPageFromContainer(ComponentContainer コンテナ、 int位置、Object オブジェクト) {
                // コンテナから削除
                container.removeComponent((コンポーネント) オブジェクト);
            }
            /**
             * ページがオブジェクトと一致しているかどうかを確認する
             */
            @オーバーライド
public boolean isPageMatchToObject(コンポーネントページ、オブジェクトオブジェクト) {
戻る 真実;
            }
        }); 
 
        // ページ変更リスナーを追加
        pageSlider.addPageChangedListener(新しいPageSlider.PageChangedListener() {
            /**
             * ページがスライドするときに呼び出されます
             */
            @オーバーライド
パブリックvoid onPageSliding( int itemPos, float itemPosOffset, int itemPosOffsetPixels) {}
            /**
             * ページのスライド状態が変わったときに呼び出されます
             */
            @オーバーライド
パブリックvoid onPageSlideStateChanged( int state) {}
            /**
             * 新しいページが選択されたときのコールバック
             */
            @オーバーライド
パブリックvoid onPageChosen( int itemPos) {
                // このメソッドでは、ページを切り替えて現在のページのビデオソースを取得し、再生します
                文字列データ = listData.get(itemPos);
            }
        });
    }
 }

2. ビデオを再生する

ビデオは Player を使用して再生され、ビデオ ウィンドウは SurfaceProvider を使用して表示されます。

 ohos.aafwk.ability.AbilitySlice をインポートします。
 ohos.aafwk.content.Intent をインポートします。
 ohos.agp.components.surfaceprovider.SurfaceProvider をインポートします。
 ohos.agp.graphics.SurfaceOps をインポートします。
 ohos をインポートします。グローバル.resource.RawFileDescriptor;
 ohos.media.common.Source をインポートします。
 ohos.media.player.Player をインポートします。 
 
 java.io.IOException をインポートします。 
 
パブリッククラス MainAbilitySlice は AbilitySlice を拡張します {
    // ビデオパス
    プライベート最終文字列ビデオパス = "resources/rawfile/HarmonyOS.mp4" ;
    //プレーヤー
    プライベートプレーヤー mPlayer; 
 
    @オーバーライド
パブリックvoid onStart(インテント インテント) {
        super.onStart(インテント);
        UIContent をスーパーに設定します。
        // プレーヤーを初期化する
        mPlayer = 新しいプレーヤー(getContext());
        // ビデオウィンドウコンポーネントを見つける
        サーフェスプロバイダー surfaceProvider = (サーフェスプロバイダー) findComponentById(ResourceTable.Id_surfaceProvider);
        // ビデオウィンドウを最前面に設定する
        サーフェスプロバイダー。ZTop にピンを置きます ( true );
        // ビデオウィンドウ操作監視を設定する
        （surfaceProvider.getSurfaceOps().isPresent()）の場合{
            サーフェスプロバイダー.getSurfaceOps().get().addCallback(新しいサーフェスOps.Callback() {
                /**
                 * ビデオウィンドウを作成する
                 */
                @オーバーライド
パブリックvoid サーフェス作成済み(SurfaceOps ホルダー) {
                    試す {
                        RawFileDescriptor ファイル記述子 = getResourceManager().getRawFileEntry(videoPath).openRawFileDescriptor();
                        ソースソース = new Source(fileDescriptor.getFileDescriptor(),
                                ファイル記述子.getStartPosition()、
                                ファイル記述子.getFileSize()
                        );
                        // メディアファイルを設定する
                        mPlayer.setSource(ソース);
                        // 再生ウィンドウを設定する
                        mPlayer.setVideoSurface(holder.getSurface());
                        // ループ再生
                        mPlayer.enableSingleLooping( true );
                        // 再生環境を準備し、メディアデータをバッファリングする
                        mPlayerを準備します。
                        // 再生を開始
                        mPlayer.play();
                    } キャッチ (IOException e) {
                        e.printStackTrace();
                    } 
 
                }
                /**
                 * ビデオウィンドウの変更
                 */
                @オーバーライド
パブリックvoid surfaceChanged(SurfaceOps ホルダー、 int形式、 int幅、 int高さ) {}
                /**
                 * ビデオウィンドウが破壊されました
                 */
                @オーバーライド
パブリックvoid サーフェス破棄 (SurfaceOps ホルダー) {}
            });
        }
    } 
 
    @オーバーライド
    保護されたvoid onStop() {
        スーパーのonStop();
        //ページを破棄してプレーヤーを解放する
        mPlayer != null の場合{
            mPlayerを停止します。
            mPlayer をリリースします。
        }
    }
 }

3. デバイス間の移行例

デバイス間の移行では、IAbilityContinuation インターフェースが使用されます。

1. config.jsonのエントリで権限を設定する

「必要な権限」 : [
      {
 「名前」 : 「ohos.permission.DISTRIBUTED_DATASYNC」  
      },
      {
 「名前」 : 「ohos.permission.GET_DISTRIBUTED_DEVICE_INFO」  
      },
      {
 「名前」 : 「ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE」  
      }
    ]

2. IABilityContinuation インターフェースを実装します。注: アプリケーションには複数のページが含まれる場合があります。次の方法で移行をサポートするページに IABilityContinuation インターフェイスを実装するだけで済みます。同時に、このページに含まれるすべての AbilitySlices もこのインターフェースを実装する必要があります。

 ohos.aafwk.ability.AbilitySlice をインポートします。
 ohos.aafwk.ability.IAbilityContinuation をインポートします。
 ohos.aafwk.content.Intent をインポートします。
 ohos.aafwk.content.IntentParams をインポートします。
 ohos.agp.components.Button をインポートします。
 ohos.agp.components.Text をインポートします。
 ohos.bundle.IBundleManager をインポートします。
 ohos.distributedschedule.interwork.DeviceInfo をインポートします。
 ohos.distributedschedule.interwork.DeviceManager をインポートします。 
 
 java.util.List をインポートします。 
 
パブリッククラス MainAbilitySlice は AbilitySlice を拡張し、IAbilityContinuation を実装します {
    プライベート文字列データ = "" ;
    文字列 PERMISSION = "ohos.permission.DISTRIBUTED_DATASYNC" ; 
 
    @オーバーライド
パブリックvoid onStart(インテント インテント) {
        super.onStart(インテント);
        UIContent をスーパーに設定します。
        // 権限を申請する
        （verifySelfPermission(PERMISSION) != IBundleManager.PERMISSION_GRANTED）の場合 {
            requestPermissionsFromUser(新しい文字列[]{PERMISSION}, 0);
        }
        ボタン button = (Button)findComponentById(ResourceTable.Id_button);
        テキスト text = (Text)findComponentById(ResourceTable.Id_text); 
         
        // クリックして移行
        button.setClickedListener(コンポーネント -> {
            // 分散ネットワーク内のすべてのオンライン デバイス (ローカル デバイスを除く) の情報を照会します。
            リスト<DeviceInfo> deviceList = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
            (デバイスリストのサイズ()>0)の場合{
                // 移行を開始し、デバイスIDを指定します
                継続能力(デバイスリスト.get(0).getDeviceId());
            }
        });
        // 移行したデータを表示する
        text.setText( "移行データ: " +data);
    }
    /**
     * このメソッドは移行を開始するときに初めて呼び出されます
     * @return移行するかどうか
     */
    @オーバーライド
パブリックブールonStartContinuation() {
戻る 真実;
    }
    /**
     * 移行中にデータを保存する
     */
    @オーバーライド
パブリックブールonSaveData(IntentParamsintentParams) {
        intentParams.setParam( "データ" , "テストデータ" );
戻る 真実;
    }
    /**
     * 移行に保存されたデータを取得し、ライフサイクルのonStartの前に実行する
     */
    @オーバーライド
パブリックブールonRestoreData(IntentParamsintentParams) {
        data= (文字列) intentParams.getParam( "data" );
戻る 真実;
    }
    /**
     * 移行完了
     */
    @オーバーライド
パブリックvoid onCompleteContinuation( int i) {}
 }

上記のコアコード例に従って、実装の原則を理解し、実際のニーズに応じて機能を改善できます。

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com