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

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

推薦する

優れたマーケティングプランを作成する方法

マーケティング プランとは何ですか? マーケティング プランはなぜビジネスの成功にとってそれほど重要...

独立したeコマースサイトを構築する前に市場の状況を理解する必要がある理由

2018年最もホットなプロジェクト：テレマーケティングロボットがあなたの参加を待っています昨今、独立...

pqhosting: オランダの大容量ハードドライブ VPS + 無制限のトラフィック + DMCA を無視、月額 3.77 ユーロから

pqhosting は、新しいオランダの大容量ハード ドライブ VPS (ストレージ VPS ではな...

SEOプロセスにおける最高レベルのユーザーエクスペリエンス

この業界に入って以来、私は常にユーザーエクスペリエンスの重要性を第一に考えてきました。ウェブサイトの...

コンテナオーケストレーションについて1つの記事で学ぶ

コンテナ オーケストレーションは、現代のソフトウェア開発の鍵の 1 つであり、企業が大規模なコンテナ...

テンセントQQモバイルブラウザカーネルがオープン

Tencent QQ モバイル ブラウザ X5 カーネルはモバイル アプリにオープンであり、組み込み...

毎日のトピック: 垂直B2C変革は冬に課題に直面

春節が近づいていますが、垂直型電子商取引企業にとっては難しい年です。 2012年を通じて、電子商取引...

新サイトが1ヶ月以内に旧サイトのランキングを上回った3つの理由

ほとんどのウェブマスターは「早起きは三文の徳」という慣用句を聞いたことがあると思いますが、この慣用句...

ソリューション共有 | インターネット住宅リフォームのブランド企画とマーケティングプロモーションのご提案！

新しいメディアマーケティングの世界では競争が激しく、多くの人は自分の計画を他の人と話し合うよりも自分...

raksmart: 高速クラウドサーバー、月額 1.99 ドルから、トラフィック無制限、香港、日本、韓国、シンガポール、米国のデータセンター、無料スナップショット + 無料バックアップ、Windows をサポート

シンガポールのクラウドサーバー raksmart は、米国のクラウドサーバー、香港のクラウドサーバー...

Virtwire - 4.4 USD/年/512 MB RAM/5 GB HDD/1 TB トラフィック/1 GB ポート/オランダ

EvoBurst のサブブランド virtwire.com は、エイプリルフールにオランダのデータセ...

Docker Swarm: コンテナオーケストレーションを大幅に簡素化

翻訳者 |チェン・ジュンレビュー |チョンロウコンテナ化とクラウド コンピューティングの文脈では、分...

#推奨: WLS - $15/年/リセラー/60ssd/1Tトラフィック/WHM/Cpanel

weloveservers は、仮想ホストと仮想ホスト再販業者を含む、独立記念日特別オファーを 7 ...

arkecxはどうですか？ベトナムのハノイにあるクラウドサーバーの簡単なレビュー

市場に出回っているベトナムのクラウドサーバーは多くなく、帯域幅が大きく使いやすいものもほとんどありま...

#11.11# racknerd: 今年最も安い価格、VPS は 9 つのデータセンターを選択可能、年間 9 ドル、KVM/1g メモリ/1 コア/17g SSD/3T トラフィック、PayPal/Alipay 支払い

11月1日から、racknerdは「Double Eleven」のために複数のコンピュータルームで多...