自動レイアウトを取り除く

はじめに

こんにちは、私の名前はNick Snyderで、LinkedInのソフトウェアエンジニアです。 今日、自動レイアウトに関するストーリーをお伝えしたいと思います。

1. LinkedInでの使用方法。
2. 出会った問題。
3. 状況によっては、自動レイアウトの使用を停止したのはなぜですか。
4. そして、代わりに使用するもの。

良いニュース

良いニュースから始めたいと思います。

1. LinkedInでは、自動レイアウトを広範囲に使用しています。 これは、すべてのアプリケーションでインターフェースを構築する主な方法です。
2. 自動レイアウトは、サポートを促進する強力なツールです。
   
   
   1. さまざまな画面サイズ。
   2. 右から左に綴る言語。

悪いニュース

悪いニュースは、自動レイアウトのパフォーマンスが十分ではないことです。

1. 複雑なビュー階層には対応していません（後続のプレゼンテーションから、ビュー数の線形増加に伴う計算時間の非線形増加について話していることは明らかです。
2. 一部のiOSリリースでパフォーマンスの低下が見られました。
3. 一部のインターフェイスレイアウトでは、パフォーマンスが予測できないほど低下する場合があります（以降、レイアウトは「レイアウト」-およそTransl。と翻訳されます）。

（さらに、トランスクリプトのテキストとスライドのテキストが大幅に重複している場合、情報を失うことなくマージします。テキストとスライドは、著者の許可を得て使用されます。-およそTransl。）

自動レイアウトの問題

LinkedInアプリケーションのマークアップの例を考えてみましょう。 2つのラベルがあります（以降、「ラベル」というテキストで使用されます-およそTransl。）。左側に複数行のラベル、右側に単一行のラベルがあります。 すべてのコンテンツを表示するのに十分なスペースを確保するには、適切なラベルが必要です。 左のラベルには、特定の量のテキストのみが含まれており、最大2行を占める必要があります。





ご注意 自動レイアウトのパフォーマンスを低下させます。 左側には、最大2行のラベルがあります。 右側には、次のプロパティを持つラベルがあります。

1. コンテンツの圧縮-すなわち ラベルは、含まれるテキストを表示するのに十分な最小スペースのみを占有します。
2. 耐圧縮性-すなわち ラベルは、含まれるテキストを表示するのに必要な最小サイズよりも小さいサイズに縮小することに抵抗します。

自動レイアウトを使用して説明したマークアップを実装するには、適切なラベルに適切なプロパティを設定します。つまり、コンテンツの圧縮と圧縮に対する耐性です。 これはiOS 8でうまく機能し、開発中のすべてのテストデータでうまく機能しました。 しかし、iOS 9のリリースでは、この実装により一部のユーザーに大きなパフォーマンスの問題が発生しました。 そして、ユーザーが不平を言うまで、これらの問題については知りませんでした。



ご注意 iPhone 6の自動レイアウトランタイム。横軸はビューの数です。 縦軸は自動レイアウトランタイムです。 青いグラフ-2行の自動レイアウトを備えたUIScrollView。 赤いグラフ-1行の自動レイアウトを備えたUIScrollView。



明らかに、パフォーマンスの問題に関するユーザーからの通知を受け取るのは決してクールではありません。 あなたは、「それはどれほど悪いのでしょうか？」 この状況では、左側のラベルに複数の行が含まれている場合、青い線は、特定のビュー数に対してマークアップにかかる時間を示します。 ご覧のとおり、ビューの数とともに青い線がすぐに上がります。 これが問題の原因でした。



左側のラベルに1行または他のデータタイプのみが含まれている場合、このような問題はありません。 そのため、特定のデータ型が問題を引き起こしました。

LinkedInニュースフィード。

1. しばらくの間、パフォーマンスの問題のため、自動レイアウトは使用されていません。
2. 各ビューは、マークアップコードを手動で実装します。
   
   
   1. 維持するのは難しい
   2. プロファイル画面に適用するための再利用可能なソリューションが欲しいです。

LinkedInニュースフィードの場合、Auto Layoutのパフォーマンスが完璧とはほど遠いことを実際に知っていました。 このため、LinkedInは長い間Auto Layoutを使用していません。 フィードでは、各ビューまたはセルは、layoutSubviewsを使用して独自のマークアップコードを実装します。 このマークアップは手動ではるかに高速に動作します。 ただし、問題は、そのようなコードのサポートが使い果たされることです。 2つの機能があります。 最初は高さを計算するので、セルの高さをテーブルまたはUICollectionViewに伝えることができます。 そして、2番目は実際のマークアップを実行します。 このロジックを共有した理由は、マークアップを完全に完了する必要なく、高さの計算をすばやく実行できるためです。



アプリケーションの他の部分にも同様のものが必要でした。 しかし、さまざまな問題を解決するのに適したものであり、多くの人が使用できるようにしたかったのです。

レイアウトソリューション

レイアウトソリューションの要件

1. 速い。 手動で記述されたコードと一緒にソリューションを高速にしたかったのは、これがすでにテープに含まれていたからです。
2. Swiftアプリケーションで自然なAPI。 メインアプリケーションを含むほとんどのLinkedInアプリケーションは、Swiftで書かれています。
3. 深刻なプロジェクトでサポートされ、使用されています。 製品にベータ版ソフトウェアを使用したくありません。
4. オープンソース（何か問題が発生した場合のデバッグ）。 自動レイアウトで作業するときの苦痛の1つの原因は、自動レイアウトがブラックボックスであることです。 そして、何かがうまくいかないとき、私たちには理由を発掘する方法がありません。
5. 受け入れ可能なライセンス（会社の弁護士の観点から）。

既存のソリューション

1. React Native、AsyncDisplayKit、ComponentKit-Facebookには多くの優れたオープンソースライブラリがあります。 残念ながら、ライセンスのために使用できません。
2. ライブラリはほとんどありませんが、見捨てられたライブラリのように見えます-1年以上前の最後のコミット。
3. Render-2016年5月に作成されました。今、別のライブラリRenderが見つかりました。 しかし、彼女は決定の時に存在しませんでした。

これらのプロジェクトのいずれも、私たちのすべての要求を満たしていない。

新しい何かを構築する時...

そのため、ネットワークで見つかったプロジェクトのいずれも、私たちのすべての要件を満たしていませんでした。 そして、LayoutKitと呼ばれるものを作成しました。



LayoutKitは、iOS、macOS、tvOSでビューをすばやく配置するためのライブラリです。 次に、その使用方法と動作を説明します。

LayoutKit「hello world」

上位レベルでは、マークアップは3段階で実行されます。

1. 開発者は、不変のデータ構造を使用してマークアップを定義します。
2. LayoutKitは、各ビューのフレームを計算し、必要に応じてバックグラウンドストリームで計算します。
3. メインスレッドのLayoutKitは、すべてのビューを作成し、それらにフレームを割り当てます。

理解を深めるために、シンプルだが完全に実装されたマークアップの例を検討してください。 このマークアップには、ワールド、画像、テキストラベルがあります。





最初の部分は、UIImageViewのマークアップを作成することです。 そのため、UIImageViewを含み、幅と高さが50ピクセルであるSizeLayoutと呼ばれる固定サイズのレイアウトが必要です（およそ、元のピクセルでの翻訳）。 構成ブロックで、UIImageViewの画像を設定します。

let image = SizeLayout<UIImageView>( width: 50, height: 50, config: { imageView in imageView.image = UIImage(named: “earth.jpg”) } )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ラベルのマークアップが必要です。 利用可能なスペースのテキストと中央揃えを設定します。

 let label = LabelLayout( text: “Hello World!”, alignment: .center )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのビューを隣り合わせに配置するため、4ピクセルの間隔で水平スタックを作成します。

 StackLayout( axis: .horizontal, spacing: 4, sublayouts: [image, label] )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、エッジの周りにパディングが必要です。 新しく作成されたStackLayoutをラップするInsetLayoutを作成します。

 helloWorld = InsetLayout( insets: UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 8), sublayout: stack )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「hello world」マークアップの準備ができたので、配置メソッドを呼び出します。 このメソッドは、すべてのビューとレイアウトのすべてのフレームを再帰的に計算します。 これは、バックグラウンドスレッドで実行できます。



開始以来、配置（ 配置 -およそTransl。）は変更されていないデータ構造であるため、メインスレッドに戻してmakeViewsを作成できます。

 //     . let arrangement = helloWorld.arrangement() //     . arrangement.makeViews(in: rootView)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

rootViewパラメーターをmakeViewsメソッドに渡し、必要なビューがすぐに作成されるようにします。 パラメータが渡されない場合、makeViewsは、必要な処理を実行できるビューを返します。





それで、マークアップを終了しました。

別の例

上記の例では、パラメーターなしの配置を呼び出しました。

 //   . //   . helloWorld.arrangement()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別にやってみましょう：

 //    . helloWorld.arrangement(width: 200)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明示的な幅を指定でき、メソッドはそれにマークアップします：





インデントが増加し、使用可能なすべてのスペースが占有されていることがわかります。 この幅は、たとえば画面の幅になります。

別の例-アニメーションあり

マークアップはアニメーション化できます。 例として単純なSizeLayoutを使用してこれを行います。 ボックスと呼びましょう。 viewReuseIdパラメーターを使用して、ビューまたはマークアップに一意の識別子を設定できます。 これにより、LayoutKitは、「前」状態のどのビューが「後」状態のどのビューに対応するかを認識します。



この例では、「前」状態では「ボックス」は50x50ピクセルの正方形であり、後状態では25x25ピクセルの正方形です。

 //     viewReuseId //  "" let before = SizeLayout( width: 50, height: 50, viewReuseId: “box”) //  "" let after = SizeLayout( width: 25, height: 25, viewReuseId: “box”)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらは2つの異なるマークアップです。 doマークアップを使用してビューレイアウトを作成します。 この配置から作成されたビューは、ルートビュー（rootView）に配置されます。 次に、「アフター」マークアップを使用して、アニメーションの準備を行います。アニメーションメソッドを持つアニメーション用の特別なオブジェクトを作成します。

 //   ""   view      rootView. before.arrangement().makeViews(in: rootView) //   . let animation = after.arrangement() .prepareAnimation(for: rootView)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アニメーションオブジェクトを受け取った後、通常の呼び出しUIView.animate withDurationを使用して、animation.applyメソッドを渡すと、あるマークアップから別のマークアップへの変更がアニメーション化されます。

 //  . UIView.animate(withDuration: 5.0, animations: animation.apply)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

少し複雑なアニメーションの例

（残念ながら、ソースのビデオでもアニメーションは表示されません-およその翻訳です。）



赤と2つの灰色の正方形があります。 唯一の注意点は、先頭の赤い正方形が上の正方形の子ビューであり、下の正方形の子ビューになることです。 両方の正方形が左から右に移動します。 下の正方形のサイズが小さくなり、赤い正方形が大きくなります。



「アニメーションの準備」の段階では、親ビューを変更してこのような複雑なアニメーションを作成できます。 「アニメーションの準備」をスキップすると、予期した結果が得られません。

LayoutKitの仕組み

Swiftの利点についてお話ししたいと思います。 LayoutKitは、クリーンなAPIを提供することができた機能のおかげで、Swiftで書かれています。 イニシャライザでは、ジェネリック、プロトコル拡張、およびデフォルトパラメータを使用します。 上記の例では、既に得られた利点を見ることができます。



LayoutKitはどのように機能しますか？ すべてのLayoutKitの中心にレイアウトプロトコルがあり、マークアップとは何かを決定します。 誰でもこのプロトコルを実装でき、LayoutKitはそれを実装する事前定義済み（基本）マークアップの小さなセットを提供します。





ご注意 図の左側には多くのマーキングがあり、中央にはマークアッププロトコルがあり、右側にはマークアップエンジンがあります。



クラスのコレクションであるマークアップエンジンもあります。 これらのクラスは、マークアッププロトコルのみに基づいて機能します。フレームのサイズを計算し、インスタンスを作成します（ プレースメントの作成について-ほぼ翻訳）、アニメーションロジックを実行します。

基本的なマークアップ

基本的なマークアップは、マークアッププロトコルにパックされた計算です。

1. LabelLayout-124行のコード、
2. SizeLayout-164行のコード、
3. InsetLayout-39行のコード、
4. StackLayout-175行のコード。

これらのマークアップはすべて例ですでに見ています。 これらはメインブロックであり、適切な数の異なるユーザーインターフェイスを構築することができます。

カスタムマークアップを作成する

4つの基本的なレイアウトでユーザーインターフェイスを説明できない場合は、次のことを実行できます。

1. 4つの基本的な構成とネストを使用して、目的のマークアップを作成します。
2. 「レイアウト」と呼ばれるレイアウトプロトコルを実装して、独自のマークアップを作成します。

LayoutKitを高速化する理由

2つの主な理由：

1. LayoutKitは、自動レイアウトなどの制約システムに一般的なソリューション検索アルゴリズムを使用しません。 対照的に、各マークアップは特殊なアルゴリズムを使用します。 これにより、マークアップごとに効果的な実装を取得できます。
2. LayoutKit全体で最も遅いのは、StackLayout内の柔軟性によって子レイアウトをソートすることです。 それ以外の場合、アルゴリズムの複雑さはO（n）です。

実際に達成されたパフォーマンスのレベルを数字で見てみましょう。 これは、iOS 9を搭載したiPhone 6の実装例です。20個のセルを含むUICollectionViewFlowLayoutを備えたUICollectionViewが使用されました。 各セルは全体として、LinkedInニュースフィードの対応するセルに似ています。 これはかなりの画面スペースを占有します。



このグラフでは、「もっと」は「より良い」です。 1x基準点として指定した自動レイアウト。 UIStackViewを使用すると、自動レイアウトよりも動作が遅くなることがわかります。 これは、UIStackViewが自動レイアウトの上に構築されているためです。 右端は、マークアップを手動で適用した結果を示しています。 手動レイアウトは、自動レイアウトよりも9.4倍高速です。 緑色のバーはLayoutKitであり、自動レイアウトよりも7.7倍高速です。 手動のマークアップほど高速ではありませんが、このためには、多くのコードを記述することなく多くの優れた機能を利用できます。





ご注意 パフォーマンスマークアップの実装。 多いほど良い。



一方、それを見ることができます：2つのフレームのシーケンシャル表示の間隔で独自のコードを実行するのにどれくらい時間が必要ですか？ 黒い水平線は16ミリ秒です。 UIStackViewを使用する場合、フィード項目のマークアップには46ミリ秒かかることがわかります。 自動レイアウトを使用する場合-28ミリ秒。 このグラフが示すことは、自動レイアウトまたはUIStackViewを使用すると、メインスレッドの各マークアップ中に1つまたは2つのフレームがスキップされることです。



LayoutKitと手動レイアウトはほぼ同じです。 LayoutKitまたは手動レイアウトを使用する場合、6ミリ秒しかかかりません。 さらに、LayoutKitを使用すると、バックグラウンドスレッドでマークアップを実行できます。





ご注意 単一のセルを持つUICollectionViewのレイアウト時間。 少ないほど良い。



次に言いたいのは、不変のデータ構造です。

不変のデータ構造

マークアップオブジェクトとすべての中間データ構造は不変です。 これにより、次の結果が得られます。

1. スレッドセーフ。 メインストリームとバックグラウンドストリーム間でデータをやり取りする機能。
2. 事前にマークアップを簡単に計算してキャッシュできます。 たとえば、ユーザーが実際に画面を回転する前に、バックグラウンドスレッドで画面回転のマークアップを事前計算できます。
3. 簡単なデバッグ。 変数が変更できないことが事前にわかっている場合、これをチェックする必要はありません。

LayoutKitのその他の利点

1. 右から左へのスペルによる自動言語サポート。
2. 宣言型マークアップの読み取り、書き込み、作成、テストの容易さ。
3. サンドボックスでのラピッドプロトタイピング。
4. iOS、macOS、tvOSをサポートします。

申込み

LayoutKitは業界で使用する準備ができていますか？ はい、メインのLinkedInアプリケーションと求人検索アプリケーションで使用しています。



私たちの経験では、LayoutKitエンジニアのトレーニングは非常に簡単でした。 一方、自動レイアウトの学習はそれほど簡単ではありませんでした。

おわりに

オープンソース

1）LayoutKit-オープンソースソフトウェア。 コードはlayoutkit.orgで入手できます。

2）Apache 2.0ライセンス。特許詐欺なし。

3）2016年6月22日のリリース日。

4）今日（2017年5月の初めに実際のデータを取りました-およそTransl。）GitHubで：59オブザーバー、1996星、136フォーク

謝辞

LayoutKitを手伝ってくれたみんなに感謝します。 ありがとう、セルゲイ・タグアー（セルゲイ・タガー）、アンディ・クラーク（アンディ・クラーク）、ピーター・リバシー（ピーター・リバシー）。

著者について

Nick Snyderは、LinkedInソフトウェア開発エンジニアです。 彼は現在、会社のすべてのアプリケーションにスケーラブルなモバイルアプリケーションのインフラストラクチャの構築に取り組んでいます。 彼は、メインアプリケーションの最新バージョンを含む、会社の3つのアプリケーションの準備に参加しました。 私のお気に入りは、きれいなAPIで再利用可能なコンポーネントを作成することです。