HarmonyOSが配布するTikTok風アプリ

HarmonyOSが配布するTikTok風アプリ

[[430075]]

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

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

https://harmonyos..com

プロジェクト紹介

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

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

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

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

プロジェクト構造

メインコード

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

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

  1.  ohos.aafwk.ability.AbilitySlice をインポートします。
  2.  ohos.aafwk.content.Intent をインポートします。
  3.  ohos.agp.components.* をインポートします。 
  4.  
  5.  java.util.ArrayList をインポートします。
  6.  java.util.List をインポートします。 
  7.  
  8. パブリッククラス MainAbilitySlice は AbilitySlice を拡張します {
  9.     @オーバーライド
  10. パブリックvoid onStart(インテント インテント) {
  11.         super.onStart(インテント);
  12.         UIContent をスーパーに設定します。
  13.         // スライディングページコンポーネントを見つける
  14.         ページスライダー pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);
  15.         // スライド方向を上下に設定する
  16.         pageSlider.setOrientation(Component.VERTICAL);
  17.         //テストデータの収集
  18.         リスト<文字列> listData=新しいArrayList<>();
  19.         listData.add ( "最初のページ" );
  20.         listData.add ( "2ページ目" );
  21.         listData.add ( "ページ3" ); 
  22.          
  23.         // ページアダプタを設定する
  24.         pageSlider.setProvider(新しいPageSliderProvider() {
  25.             /**
  26.              * 現在のアダプタで利用可能なビューの数を取得します
  27.              */
  28.             @オーバーライド
  29. 公共 整数getCount() {
  30.  listData.size ()を返します。
  31.             }
  32.             /**
  33.              * ページを作成する
  34.              */
  35.             @オーバーライド
  36. パブリックオブジェクトcreatePageInContainer(ComponentContainerコンテナ、 int位置) {
  37.                 // レイアウトを見つける
  38.                 コンポーネント コンポーネント = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_item_page, null , false );
  39.                 テキスト textContent = (テキスト) component.findComponentById(ResourceTable.Id_text_item_page_content);
  40.                 //データを設定する
  41.                 textContent.setText(listData.get(position));
  42.                 // コンテナに追加
  43.                 コンテナにコンポーネントを追加します。
  44. コンポーネントを返します。
  45.             }
  46.             /**
  47.              * ページを破棄する
  48.              */
  49.             @オーバーライド
  50. public void destroyPageFromContainer(ComponentContainer コンテナ、 int位置、Object オブジェクト) {
  51.                 // コンテナから削除
  52.                 container.removeComponent((コンポーネント) オブジェクト);
  53.             }
  54.             /**
  55.              * ページがオブジェクトと一致しているかどうかを確認する
  56.              */
  57.             @オーバーライド
  58. public boolean isPageMatchToObject(コンポーネントページ、オブジェクトオブジェクト) {
  59. 戻る 真実;
  60.             }
  61.         }); 
  62.  
  63.         // ページ変更リスナーを追加
  64.         pageSlider.addPageChangedListener(新しいPageSlider.PageChangedListener() {
  65.             /**
  66.              * ページがスライドするときに呼び出されます
  67.              */
  68.             @オーバーライド
  69. パブリックvoid onPageSliding( int itemPos, float itemPosOffset, int itemPosOffsetPixels) {}
  70.             /**
  71.              * ページのスライド状態が変わったときに呼び出されます
  72.              */
  73.             @オーバーライド
  74. パブリックvoid onPageSlideStateChanged( int state) {}
  75.             /**
  76.              * 新しいページが選択されたときのコールバック
  77.              */
  78.             @オーバーライド
  79. パブリックvoid onPageChosen( int itemPos) {
  80.                 // このメソッドでは、ページを切り替えて現在のページのビデオソースを取得し、再生します
  81.                 文字列データ = listData.get(itemPos);
  82.             }
  83.         });
  84.     }
  85.  }

2. ビデオを再生する

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

  1.  ohos.aafwk.ability.AbilitySlice をインポートします。
  2.  ohos.aafwk.content.Intent をインポートします。
  3.  ohos.agp.components.surfaceprovider.SurfaceProvider をインポートします。
  4.  ohos.agp.graphics.SurfaceOps をインポートします。
  5.  ohos をインポートします。グローバル.resource.RawFileDescriptor;
  6.  ohos.media.common.Source をインポートします。
  7.  ohos.media.player.Player をインポートします。 
  8.  
  9.  java.io.IOException をインポートします。 
  10.  
  11. パブリッククラス MainAbilitySlice は AbilitySlice を拡張します {
  12.     // ビデオパス
  13.     プライベート最終文字列ビデオパス = "resources/rawfile/HarmonyOS.mp4" ;
  14.     //プレーヤー
  15.     プライベートプレーヤー mPlayer; 
  16.  
  17.     @オーバーライド
  18. パブリックvoid onStart(インテント インテント) {
  19.         super.onStart(インテント);
  20.         UIContent をスーパーに設定します。
  21.         // プレーヤーを初期化する
  22.         mPlayer = 新しいプレーヤー(getContext());
  23.         // ビデオウィンドウコンポーネントを見つける
  24.         サーフェスプロバイダー surfaceProvider = (サーフェスプロバイダー) findComponentById(ResourceTable.Id_surfaceProvider);
  25.         // ビデオウィンドウを最前面に設定する
  26.         サーフェスプロバイダー。ZTop にピンを置きます ( true );
  27.         // ビデオウィンドウ操作監視を設定する
  28.         （surfaceProvider.getSurfaceOps().isPresent()）の場合{
  29.             サーフェスプロバイダー.getSurfaceOps().get().addCallback(新しいサーフェスOps.Callback() {
  30.                 /**
  31.                  * ビデオウィンドウを作成する
  32.                  */
  33.                 @オーバーライド
  34. パブリックvoid サーフェス作成済み(SurfaceOps ホルダー) {
  35.                     試す {
  36.                         RawFileDescriptor ファイル記述子 = getResourceManager().getRawFileEntry(videoPath).openRawFileDescriptor();
  37.                         ソースソース = new Source(fileDescriptor.getFileDescriptor(),
  38.                                 ファイル記述子.getStartPosition()、
  39.                                 ファイル記述子.getFileSize()
  40.                         );
  41.                         // メディアファイルを設定する
  42.                         mPlayer.setSource(ソース);
  43.                         // 再生ウィンドウを設定する
  44.                         mPlayer.setVideoSurface(holder.getSurface());
  45.                         // ループ再生
  46.                         mPlayer.enableSingleLooping( true );
  47.                         // 再生環境を準備し、メディアデータをバッファリングする
  48.                         mPlayerを準備します。
  49.                         // 再生を開始
  50.                         mPlayer.play();
  51.                     } キャッチ (IOException e) {
  52.                         e.printStackTrace();
  53.                     } 
  54.  
  55.                 }
  56.                 /**
  57.                  * ビデオウィンドウの変更
  58.                  */
  59.                 @オーバーライド
  60. パブリックvoid surfaceChanged(SurfaceOps ホルダー、 int形式、 int幅、 int高さ) {}
  61.                 /**
  62.                  * ビデオウィンドウが破壊されました
  63.                  */
  64.                 @オーバーライド
  65. パブリックvoid サーフェス破棄 (SurfaceOps ホルダー) {}
  66.             });
  67.         }
  68.     } 
  69.  
  70.     @オーバーライド
  71.     保護されたvoid onStop() {
  72.         スーパーのonStop();
  73.         //ページを破棄してプレーヤーを解放する
  74.         mPlayer != null の場合{
  75.             mPlayerを停止します。
  76.             mPlayer をリリースします。
  77.         }
  78.     }
  79.  }

3. デバイス間の移行例

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

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

  1. 「必要な権限」 : [
  2.       {
  3.  「名前」 : 「ohos.permission.DISTRIBUTED_DATASYNC」  
  4.       },
  5.       {
  6.  「名前」 : 「ohos.permission.GET_DISTRIBUTED_DEVICE_INFO」  
  7.       },
  8.       {
  9.  「名前」 : 「ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE」  
  10.       }
  11.     ]

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

  1.  ohos.aafwk.ability.AbilitySlice をインポートします。
  2.  ohos.aafwk.ability.IAbilityContinuation をインポートします。
  3.  ohos.aafwk.content.Intent をインポートします。
  4.  ohos.aafwk.content.IntentParams をインポートします。
  5.  ohos.agp.components.Button をインポートします。
  6.  ohos.agp.components.Text をインポートします。
  7.  ohos.bundle.IBundleManager をインポートします。
  8.  ohos.distributedschedule.interwork.DeviceInfo をインポートします。
  9.  ohos.distributedschedule.interwork.DeviceManager をインポートします。 
  10.  
  11.  java.util.List をインポートします。 
  12.  
  13. パブリッククラス MainAbilitySlice は AbilitySlice を拡張し、IAbilityContinuation を実装します {
  14.     プライベート文字列データ = "" ;
  15.     文字列 PERMISSION = "ohos.permission.DISTRIBUTED_DATASYNC" ; 
  16.  
  17.     @オーバーライド
  18. パブリックvoid onStart(インテント インテント) {
  19.         super.onStart(インテント);
  20.         UIContent をスーパーに設定します。
  21.         // 権限を申請する
  22.         （verifySelfPermission(PERMISSION) != IBundleManager.PERMISSION_GRANTED）の場合 {
  23.             requestPermissionsFromUser(新しい文字列[]{PERMISSION}, 0);
  24.         }
  25.         ボタン button = (Button)findComponentById(ResourceTable.Id_button);
  26.         テキスト text = (Text)findComponentById(ResourceTable.Id_text); 
  27.          
  28.         // クリックして移行
  29.         button.setClickedListener(コンポーネント -> {
  30.             // 分散ネットワーク内のすべてのオンライン デバイス (ローカル デバイスを除く) の情報を照会します。
  31.             リスト<DeviceInfo> deviceList = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
  32.             (デバイスリストのサイズ()>0)の場合{
  33.                 // 移行を開始し、デバイスIDを指定します
  34.                 継続能力(デバイスリスト.get(0).getDeviceId());
  35.             }
  36.         });
  37.         // 移行したデータを表示する
  38.         text.setText( "移行データ: " +data);
  39.     }
  40.     /**
  41.      * このメソッドは移行を開始するときに初めて呼び出されます
  42.      * @return移行するかどうか
  43.      */
  44.     @オーバーライド
  45. パブリックブールonStartContinuation() {
  46. 戻る 真実;
  47.     }
  48.     /**
  49.      * 移行中にデータを保存する
  50.      */
  51.     @オーバーライド
  52. パブリックブールonSaveData(IntentParamsintentParams) {
  53.         intentParams.setParam( "データ" , "テストデータ" );
  54. 戻る 真実;
  55.     }
  56.     /**
  57.      * 移行に保存されたデータを取得し、ライフサイクルのonStartの前に実行する
  58.      */
  59.     @オーバーライド
  60. パブリックブールonRestoreData(IntentParamsintentParams) {
  61.         data= (文字列) intentParams.getParam( "data" );
  62. 戻る 真実;
  63.     }
  64.     /**
  65.      * 移行完了
  66.      */
  67.     @オーバーライド
  68. パブリックvoid onCompleteContinuation( int i) {}
  69.  }

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

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

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

https://harmonyos..com

<<:  ZooKeeperの分散構成については、この記事を読んでください

>>:  エッジコンピューティングをクラウドコンピューティングアーキテクチャに統合することの利点と欠点

推薦する

新規サイトの「三度参入」現象をどう分析するか

昨日、私は医療ウェブサイトの最適化における成功体験を共有しました。医療最適化に不慣れな友人たちの間で...

百度ニュースはニュースサイト上の広告スタイルのニュースを拒否するために剣を抜く

現在、6月中旬に始まった「百度地震」は、依然として大多数のウェブマスターとSEO担当者の注目を集めて...

#10% オフ プロモーション# turnkeyinternet - $1/cpanel パネル/仮想ホスト/無制限の Web サイト構築

Turnkeyinternet のブラック フライデー プロモーションには、専用サーバーと VPS ...

企業の制御と可視性に対するニーズが依然としてクラウド導入を遅らせている

クラウド コンピューティング アプリケーションが突然重要になっても、魔法のように信頼性が高くなるわけ...

一歩先へ：百度諾米O2Oチェスゲームでリンクされた馬

2014年、BATが地元の生活の場に参入すると、ほとんど忘れ去られていた共同購入業界が突如として熱を...

マスターすべき「Kubernetes」、Service、Ingress

[[404005]]この記事はWeChatの公開アカウント「小蔡良基」から転載したもので、著者は蔡歩...

マーケティングは充実しているが、経験は乏しい：Diaoye Beef Brisketの国境を越えた事業の疲れる旅

インターネットユーザーとして、私は釣魚牛ブリスケットの名声を長い間聞いており、何度も試して学びたいと...

ファーウェイクラウドが「AIベストゴールドマイニングケース年間選抜」で「ベストデジタルツインシティソリューション賞」を受賞

12月17日、Leiphone.comが主催する「年間最優秀AIゴールドマイニング事例選」の結果が正...

Hostodo: 4 月は VPS が 40% オフ、年間 60 ドル、4G メモリ/2 コア/40g NVMe/6T データ転送

Hostodo は 4 月のプロモーションを発表しました。このプロモーションでは、米国ラスベガスのデ...

「銅鑼戦馬超」のフォーラムSEOモチベーション管理より

前回、私がマネジメントに関する記事（「諸葛亮が涙を流して馬蘇を処刑」から学ぶSEOマネジメント）を書...

Aizhan.com の成功したウェブサイトのプロモーション プロセス

立ち上げからわずか数か月で、Aizhan.com のランキングは 300 を超え、すべてのウェブマス...

Baidu ウェブマスター プラットフォームが福祉ウェブサイトの検証アップグレードを追加

個人的には、Baidu Webmaster Platform の以前のウェブサイト検証方法は少し面倒...

#ブラックフライデー#: 予算VM特別価格サーバー、珍しい低価格、掘り出し物探し

budgetvm（アメリカの商人、自社コンピュータールーム、8年のブランド）はブラックフライデーに特...

インターネット企業の急速な興亡の全過程

インターネット企業の急速な興亡の全過程については、「MySpace を盗んだのは誰か: ソーシャル ...

ウェブサイトのSEO信頼性の低い360検索

第3世代の技術を持つと主張する360 Searchは、ウェブマスターに何をもたらすのでしょうか？権威...