はじめに： モバイルインターネット機器とテクノロジーの開発に伴い、さまざまなモバイルデバイスの画面サイズが無限の流れで出現します。たとえば、折りたたみ画面、分割画面、フローティングウィンドウなど、各サイズを個別に調整すると、ますます多様な画面に直面します。時間と手間がかかるだけでなく、エンドサイドコードの開発と保守へのプレッシャーも増大します。コードのセットをすべてのサイズ変更に適応させ、アプリの一般的な機能を強化するにはどうすればよいですか？アリババのエンターテインメントテクノロジーであるTritiumRainは、iOSレスポンシブレイアウトテクノロジーでのYoukuAPPの実践と実装を共有します。
レスポンシブは同じコードセットに基づいています。APPの開発は、複数のサイズと複数の端末デバイスの表示と互換性があり、ページのレイアウトとコンテナのレイアウトを動的に調整し、現在の画面サイズを最大限に活用し、ユーザーにより良いブラウジング体験を提供し、改善することができます。 APP開発効率と反復効率。
1つのiOSレイアウトサイズの事前調査
現在、iOS側のサイズには、iPhone、iPad垂直画面、iPad水平画面、iPadフローティングウィンドウ、iPad分割画面の5つの主要なタイプがあります。通常、アプリはiPhoneのサイズに応じて開発され、残りの4つのiPadのサイズに適合させる必要があります。
iPadの水平画面と垂直画面がより一般的です。デバイスを回転させるだけで、フローティングウィンドウと分割画面モードがより特別なものになります。AppleのiPadiOS 9以降、ユーザーがアプリを開いたら、下から上にスライドしてDockを開き、別のアプリをフローティングウィンドウモードにドラッグします。
分割画面モードを有効にするには、分割画面をサポートするiPadの端にドラッグアンドドロップします。
その中で、フローティングウィンドウモードは、iOS 9にアップグレードされたすべてのデバイスでサポートされています。分割画面モードは、最新バージョンのハードウェアデバイスであるiPad mini 4、iPad Air 2、およびiPadProでのみサポートされています。
2つのYoukuiOSレスポンシブソリューション
レスポンシブレイアウトの中核は、統一された適応ルールを設計し、画面サイズが異なる画面サイズに適応するように変更されたときにレイアウトルールに従って再レイアウトすることです。ほとんどのアプリは通常、開発中にiPhoneバージョンしかありません。より多くのモデルに応答的に適応する場合、解決すべき3つの主要な問題があります。つまり、対応する適応のために応答状態を取得および更新する方法と、アプリコンテンツの幅やさまざまな画面幅での列数などのレイアウトパラメータを計算する方法です。 、適応困難なコンポーネントの解決、ページの空白の削減などに対応してデータ処理を実行する方法。これに基づいて、応答状態の統合管理、レイアウトロジックの処理、マッピングデータの調整などを担当する応答レイアウトSDKを開発しました。
1レスポンシブアプリの構成
ユニバーサルバージョンとして構成されていることに加えて、アプリはフローティングウィンドウまたは分割画面モードをサポートするためにいくつかの構成が必要です。
（1）起動マップとしてLaunchScreen.storyboardを提供する必要があります。アプリがサポートする実行サイズが多すぎるため、起動マップとして画像を使用することはできなくなりました。
（2）info.plistのすべての画面方向をサポートするように構成する必要があります。
（3）[フルスクリーンが必要]構成項目をチェックしたり、UIRequiresFullScreenを[はい]に構成したりできないことに注意してください。これにより、アプリでフルスクリーン操作が必要であることが宣言されます。つまり、フローティングウィンドウまたは分割画面はサポートされていません。
（4）分割画面をサポートするアプリのメインウィンドウでは、システムUIWindowを使用する必要があります。これは継承できず、initメソッドまたはinitWithFrame：[UIScreen mainScreen] .boundsで初期化する必要があります。
上記の手順でフローティングウィンドウと分割画面機能を開いた後、アプリの関連コードでデバイスの方向を制御できなくなりました。以前は、次のコードでViewControllerを垂直画面に制御できました。分割画面がサポートされると、システムから次のメソッドが呼び出されなくなります。 ViewControllerは、すべての画面の向きをサポートしています。
次のように画面の向きを強制する黒い方法も無効です。
この設計の主な理由は、アプリが分割画面をサポートしている場合、画面全体を占めるだけではなくなったためです。別のアプリが同時に実行されている場合、同じ画面に水平画面と別の垂直画面を配置することはできません。この種の問題に対する完全な解決策はありません。ユーザーエクスペリエンスを確保するために、分割画面をサポートするアプリは、すべてのページをすべての画面の向きに適合させる必要があります。これは、Appleのユーザーエクスペリエンスの究極の追求も反映しています。開発者フォーラムの開発者のディスカッションを参照してください：
https： //developer.apple.com/forums/thread/19578
2レスポンシブSDK
応答性の高い状態管理
レスポンシブ状態は、レスポンシブが有効かどうかの現在のステータス、レスポンシブレイアウトサイズタイプ、現在のレイアウトウィンドウサイズなどを提供します。レスポンシブSDKは、画面サイズが変更された後、システム通知とカスタム通知メカニズムを通じて、レスポンシブ状態を更新します。関連するビジネスパーティに通知します。
// 响应式开启关闭状态
typedefNS_ENUM(NSInteger, YKRLLayoutStyle) {
YKRLLayoutStyleNormal =0, // 响应式状态关闭
YKRLLayoutStyleResponsive =1, // 响应式状态开启};
// 响应式屏幕尺寸类型，页面可依据此类型区分是否分屏等
typedefNS_ENUM(NSInteger, YKRLLayoutSizeType) {
YKRLLayoutSizeTypeS =0, // eg. phone pad浮窗
YKRLLayoutSizeTypeL =1, // pad
YKRLLayoutSizeTypeXL =2, // 预留
};
// 响应式屏幕状态类型（一共有十种类型）
typedefNS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {
YKRLLayoutScreenTypeUnknown = (1<<0), //未知
YKRLLayoutScreenTypePortrait = (1<<1), //竖屏全屏
YKRLLayoutScreenTypeLandscapeLeft = (1<<2), //横屏全屏左
… …
};レスポンシブSDKは、YKRLLayoutStyle、YKRLLayoutSizeType、およびYKRLLayoutScreenTypeの3つの列挙状態を宣言して、現在のレスポンシブ状態をマークします。これらはそれぞれ、レスポンシブのオンとオフのステータス、現在のサイズタイプ、および特定の画面タイプを示します。一般的なビジネス側は、レスポンシブデバイスの状態かどうかを取得するだけで済みます。 、異なる幅で一貫性のないページレイアウトを持つビジネスパーティの場合、サイズタイプのステータスで区別して適応できますが、現在の画面ステータスを知る必要があるビジネスパーティは、画面タイプで取得できます。画面タイプには、現在のiOSデバイスでサポートされている画面のみが含まれます。ステータス、折りたたみ式スクリーンなどの豊富なデバイスタイプにより、それに応じてスクリーンタイプが拡張されます。デバイスが回転するか、ユーザーが分割画面を開くと、レスポンシブSDKはシステムコールバックの現在のレスポンシブ状態を更新し、レスポンシブ状態の変化をビジネス側に通知します。
レスポンシブレイアウトルール
Youkuのレスポンシブレイアウトルールには、主に列番号適応ルール、幅適応ルールなどがあります。たとえば、複数列の均等に分割されたコンポーネントの列数は、画面幅によって異なり、レスポンシブSDKは現在のレスポンシブ状態に応じて適切に出力します。レスポンシブSDKには、レイアウトルールごとに、対応するレイアウト適応ロジックがあります。レスポンシブレイアウトルールは、Youku Appの全体的なUI仕様を満たしています。ビジネスパーティは、いくつかを除いて、必要なルールを直接指定できます。特別なルールに加えて、ほとんどのレイアウトルールがコンポーネントの列番号とコンポーネントの幅のレイアウトに使用されます。このようなレスポンシブレイアウトルールは、標準の幅を指定し、元のレイアウトの列番号とコンポーネントの標準の幅に基づいてコンポーネントの標準の幅を計算し、次に現在の画面幅に従って、適合したコンポーネント列の数を計算します。これは、次の式で表すことができます。
応答適応列数（標準画面幅でのコンポーネント列数）=（現在の画面幅÷（標準画面幅÷標準画面幅でのコンポーネント列数×スケール））
その中で、スケールはコンポーネントの拡大パラメータです。iPadに配置すると、標準画面幅でのコンポーネントの元の幅が小さすぎます。スケールパラメータを使用して適切に拡大できます。
コンポーネント幅の適応の場合、応答ルールは最初に標準画面幅の下のコンポーネント列の数を計算し、列番号の適応を実行してから、適応後の列数に基づいて適応幅を計算します。
応答適応幅（標準画面幅でのコンポーネント幅）=（現在の画面幅-マージン間隔）÷応答適応列の数（標準画面幅÷標準画面幅でのコンポーネント幅）
上記の式で、標準画面幅とコンポーネント倍率スケールを調整して、より良い適応効果を持つ一般的なレイアウトルールを取得します。さまざまなデバイスサイズでの設計学生の調整と要約の後、Youkuで使用されている現在の標準画面幅は440dp、スケールです。 1.2倍で、適応効果が最高です。コンポーネント適応ロジックは、ビジネスパーティが直接呼び出すことができるレスポンシブSDKレイアウトルールに均一に実装されており、設計学生がアプリ全体のコンポーネント適応を均一に調整するのにも便利です。
レスポンシブSDKのYKRLCompLayoutManagerクラスは、関連するレイアウトロジックをカプセル化します。ビジネスパーティは、YKRLCompLayoutAdapterProtocolプロトコルを介してレスポンシブレイアウトロジックをカスタマイズし、レスポンシブレイアウトロジックをカスタマイズすることもできます。アプリ統合アーキテクチャのYKRLCompLayoutManagerの関連インターフェイスを直接呼び出して、レスポンシブルールに従って計算を取得できます。列数、幅などのレイアウトパラメータを再レイアウトして、応答状態が変化したときに応答レイアウトを完成させることができます。
レスポンシブデータ処理
レスポンシブデータ処理には、データマッピング、データフィルタリング、データマージ、およびデータ補完が含まれます。データ処理ロジックは両端で一貫しています。詳細については、以下を参照してください。1つのAPPが複数のAndroid端末にどのように適応するか。、以下では、iOSレスポンシブデータマッピングの実装について簡単に紹介します。
携帯電話の画面幅全体を占めるコンポーネント（下図の左側には動画再生予約コンポーネント）など、ルールによって異なる画面サイズに適応できないコンポーネントもあります。比例倍率の適応ルールを採用すると、iPadでは過剰に表示されます。大きなこのようなコンポーネントは、さまざまな画面サイズに適応するために、比較的単純なコンポーネントにマッピングできます。
Youkuは、コンポーネントマッピングの観点から比較的簡単に実装できる、統一された抽象的なデータ構造を採用しています。対応するコンポーネントのロゴを変更するだけで済みます。ユニファイドアーキテクチャのユニバーサルプロモーションと使用のおかげで、さまざまなビジネスパーティの呼び出しを容易にするために、ユニファイドアーキテクチャにコンポーネントマッピング機能が追加されました。レスポンシブSDKは、データ調整マッピングルールを提供し、ビジネスパーティは対応する調整マッピングルールを照会および追加できます。 。統合アーキテクチャに接続されていないビジネスパーティの場合、ビジネスパーティは関連するデータ処理を実装する必要があります。
3応答性の高いビジネスプロセス
Youkuのレスポンシブビジネスプロセスは両端で一貫しています。レスポンシブレイアウトには、データ処理、レスポンシブ状態管理、トリガーレイアウトなどが必要です。YoukuレスポンシブSDKは、インターフェイスが戻った後に関連データを処理し、統合アーキテクチャに対応するレイアウトインターフェイスを提供し、画面を監視します。サイズが変更され、レイアウトなどがトリガーされます。
4Youkuのレスポンシブソリューションが上陸しました
アブソリュートレイアウトはiOS開発でよく使用され、応答性を実現するための主な作業は、「アブソリュートレイアウト」をAndroidよりも面倒な「相対レイアウト」に変更することです。
iOSレスポンシブには、ウィンドウ->ビューコントローラー->コンテナ->コンポーネントのレベルに応じてアクセスできます。
ウィンドウが分割画面をサポートするように構成された後、システムによって自動的にレイアウトされます。RootViewControllerツリーの子ViewControllerもウィンドウとともに自動的にレイアウトされます。複数のタブページの子ViewControllerなどの特別なViewControllerは、RootViewControllerツリーに追加されないため、相対に対して手動で変更する必要があります。レイアウト、ページは自動サイズ変更または応答状態の監視を通じて相対的なレイアウトを実現できます。
ユニファイドアーキテクチャに接続されたページコンテナはユニファイドアーキテクチャによって提供されます。ユニファイドアーキテクチャコンテナのレイアウト列番号管理とレイアウト幅管理はレスポンシブSDKに接続されているため、ビジネス側がアクセスする手間が省けます。ビジネス側は独自に指定するだけで済みます。使用されるレイアウトルールは十分です。ViewControllerとコンテナが相対レイアウトを認識した後、画面サイズが変更されるたびに、レスポンシブSDKはコンテナに再レイアウト、コンポーネントの列数や幅の変更などを通知します。コンポーネントカードは、コンテナによって提供されるサイズに従ってレイアウトするだけで済みます。できる。
フレーム絶対レイアウトは通常、コンポーネントカードで使用され、相対レイアウトに変更する必要があります。単純なレイアウトロジックは、便利で高速な自動サイズ変更を使用して実装できます。複雑なレイアウトは、AutoLayoutまたはMasonryおよびその他の自動レイアウトフレームワーク（パフォーマンスが低い）、またはlayoutSubviewsを使用して実装できます。この方法では、レイアウトが再計算され、ビジネス側は自動レイアウトを実現するための適切な方法を選択して、アクセスコストを削減できます。
統合アーキテクチャに接続されていないページの場合、このページレイアウトロジックでレスポンシブSDK関連のレイアウトインターフェイスに手動でアクセスする必要があります。
着陸プロセス中に、多くのコンポーネントカードのレイアウトが画面の幅に依存していることがわかりました。これはレスポンシブ開発仕様に準拠していないため、レスポンシブに適応する際に大きな作業負荷が発生します。ビューの各レイヤーは、親レイヤーのビューレイアウトのみに依存する必要があります。ビューの各レイヤーが相対レイアウトを認識した後、画面サイズが変更されるたびに、ビューの各レイヤーが自動的に適応します。同時に、コンテナーのコンポーネントの列番号とサイズは、応答ルールに従って適応されます。 、1セットのコードですべての画面サイズに適応し、応答性の高いレイアウトを実現できます。
Sanyoukuの応答結果
現在、Youkuのフルターミナルはレスポンシブレイアウト機能を備えています。ユニバーサルバージョンは8月に発売されました。一連のコードは、iPhone、iPad垂直画面、iPad水平画面、フローティングウィンドウ、およびさまざまな比率の分割画面をサポートし、ユーザーにより良い、より豊かなものを提供します。ユーザー体験。
4つの要約
レスポンシブ機能は、マルチターミナル配信機能の最初のステップです。Youkuのレスポンシブレイアウトが実装された後、Youkuは開発、設計、製品に対するより高い要件を提唱しました。同時に、ローエンドのiPadデバイスの割合が比較的高いため、ビジネス開発プロセスで通信を考慮する必要があるだけではありません。投資能力は、アプリが常により高いパフォーマンスと安定性を維持することを必要とします。これは私たちが取り組んでいることです。
Appleは2020年末にARMベースのMacBookを発売します。メディアへの露出もあります。Appleは折りたたみ式スクリーンに関連する特許を申請しています。Appleデバイスのサイズは今後ますます豊富になると考えられています。アプリの適応と効率の向上は避けられないトピックであり、Youkuレスポンシブ開発は、アプリのiPhoneバージョンの該当するシナリオを大幅に拡張し、複数のデバイスのサポートを解決するためのより良い方法であり、将来、より複雑なデバイスシナリオに適応するための強固な基盤を築きます。
元のリンク
この記事は、AlibabaCloudの元のコンテンツです。