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の分散構成については、この記事を読んでください

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

推薦する

ウェブサイトの降格理由の分析

多くの人のウェブサイトのコレクションが突然減少し、スナップショットが後退しました。これは、ウェブサイ...

【ASO最適化】App Storeのおすすめカタログに入るための3つのヒント！

超越のヒント: Robleh Jama は経験豊富なアプリ開発者です。彼は「WakeAlarm」、「...

製品は無料で配布されているのに、なぜビジネスはどんどん良くなっているのでしょうか?

月給5,000～50,000のこれらのプロジェクトはあなたの将来ですいつから始まったのかは分かりませ...

ユーザーエクスペリエンスを向上させ、パンケーキの成功を促進する

今日、私はTitanium Mediaで「パンケーキのインターネットの夢」というタイトルの黄太極に関...

[更新] 2019 年の世界で最も安いクラウド サーバーは何ですか?格安クラウドサーバーのおすすめ

安価なクラウドサーバーにはどのようなものがありますか?世界で最も安いクラウドサーバーはどれですか?ど...

ホームページ広告見積書公開：JD.comがトラフィック収益化を加速

JD.comホームページ広告見積書（写真提供：テンセントテクノロジー）電子商取引の専門家であるGon...

新型コロナウイルス治療薬の開発では一秒一秒が重要です。 Alibaba の高性能コンピューティングはどのように貢献できるのでしょうか?

[[318091]]アリ姉の紹介：新型コロナウイルスの発生後、流行との闘いを支援するために、アリババ...

ステーションBには天敵はいない

正式名称が「ビリビリ」であるBステーションは、「小毓」という愛称で呼ばれています。 Bilibili...

リベートウェブサイトの爆発的な成長の裏にある真実

近年、Rebate.com、Rebate.com など、数多くのリベート Web サイトが雨後の筍の...

11月、ユーザー行動はASOキーワードからリストに戻りました。

ASOキーワード検索ランキングはAPP プロモーションに万能であるという神話の下、キーワード検索は自...

Ecshop トピック最適化のための 5 つのヒントを共有

今日は、ecshopの特設ページを最適化するためのヒントをいくつか紹介します。ホームページでは一般的...

360度動画から見る動画マーケティングの道

動画サイトの今後の発展展望は？360の総合検索エンジンと同時に立ち上げられた360 Videoはその...

Kubernetes を使用する際に注意すべき落とし穴

Kubernetes を実践する過程で、ギャップを埋める経験を積んできました。簡単に要約して皆さんと...

テンセントクラウドは、クラウドネイティブレイアウトの拡大を継続するため、3つの新しいクラウドネイティブ製品をリリースしました。

クラウド ネイティブの人気が高まるにつれ、業界はクラウドの価値を探求する新たな段階に入りました。テン...

家具の電子商取引 Niuwo.com は 3 か月で閉鎖され、1 億元以上の資金が浪費されたとみられる - A5 Webmaster Network

新快報記者ハン・ジェンが報告最近、設立からわずか3か月の家具EC会社Niuwo.comが倒産しそうに...