21

多くの方がFlipboardについて聞いたことがあると思います。このiPadアプリの最も驚くべき点の1つは、iPadの向きとストリーミングコンテンツに基づいて動的に変化するコンテンツをレイアウトする方法です。

ここに画像の説明を入力してください

したがって、一連の記事を考えると、最適なレイアウトを実現するためにどのアルゴリズムを使用するのでしょうか。最良の定義は、（回路設計の場合のように）最も効率的なレイアウトまたは最も美的に見えるレイアウトである可能性があります。

誰かがそのようなアルゴリズムを知っていますか？またはそのような問題への基本的なアプローチ？これは「計算幾何学」に該当しますか？

4

7 に答える 7

14

ジェイソン・ムーアの回答にリンクされているブログ投稿のスクリーンショットと理論に基づいて、コンテンツが配置される事前定義されたブロック サイズが 10 ほどあると言えます。コンテンツが配置されるボックスのサイズは、さまざまなパラメーターに基づいています。多くの人がリツイートしたりいいねしたりしたものは優先度が高いと見なされるため、より大きなボックスが割り当てられ、写真、ビデオ、または大量のテキストを含むアイテムも優先される場合があります。 . これらのボックス (できればよく考え抜かれたサイズ) は、ページ上で最適にパックされます (ただし、これは単純な問題ではありません。以前の Facebook ストリームの 2 番目のレンダリングの奇妙な空白によって証明されるように、Flipbook でさえ失敗しているようです)。リンクされたブログ投稿)。

レンダリングされた Facebook フィードの外観から、Flipbook には (少なくとも) 次の事前定義されたボックス サイズがあります (幅と高さは、全幅/高さのパーセンテージとして指定されます)。

Designation | Width | Height | Example                         
---------------------------------------------------------------
full page   | 100%  | 100%   | #12                             
2/3 page    | 100%  | 67%    | #1                              
1/3 note    | 50%   | 33%    | #3, #11                         
1/9 quote   | 50%   | 11%    | #2, #8, #10, #15, #17, #18, #22
1/2 note    | 50%   | 50%    | #16, #19                       
2/3 note    | 50%   | 67%    | ?

これらのいくつかはかなり明確なグループ化パターンを持っています (たとえば、1/9 引用符は常に一度に 3 つ積み上げられ、1/3 音符と同じサイズのブロックを形成します)、他のものはより自由にパックできます。レンダリングされた Twitter フィードを同様に分析すると、追加のボックスがいくつか表示されます。

概要

したがって、要約すると、アルゴリズムはかなり単純に見えます。いくつかの事前定義された (適切に選択された) ボックス サイズから始めます。新しいフィードがレンダリングされたら、次の操作を行います。

  1. 人気や画像が含まれているかどうかなど、特定のプロパティに応じてサイズが異なるボックスを各アイテムに割り当てます。
  2. ボックスを最適にパックします (これは本質的にビン パッキング問題であり、効率的なアルゴリズムがないように見える NP 困難な問題です。貪欲な近似アルゴリズムで問題ありません)。

ここでは、ステップ 1 と、事前定義されたボックスの作成に重点を置く必要があります。

明確にするために:ここで説明する定義済みのボックス サイズは、縦向き用に定義されています。横向きの場合は、質問の写真からわかるように、別のボックス サイズのセットが使用されます。

于 2011-06-20T01:29:07.297 に答える
6

私はFlipboardのレイアウト配置を理解して多くのことを試みました。これが私がhttps://github.com/reefaq/FlipViewで思いついたものです

その背後にある複雑なアルゴリズムも複雑なコードもありません。すべての人が理解できる単純なコードだけです。

次のような機能のいくつかを実装しました

  • マルチフリップ（錯覚）
  • Flipboardのように向きが変わった場合のビューの配置
  • ランダムレイアウトの選択

それがあなたに役立つことを願っています:)

于 2011-07-20T15:08:01.730 に答える
5

ナップサックアルゴリズムに関連する音。ウィキペディアサイトのパッキング問題も参照してください。

于 2011-06-07T13:44:00.340 に答える
4

評判カルマが低くて画像を投稿できませんでした:-)が、レイアウト方法に関するブログ投稿としていくつかの注意事項があります。

于 2011-06-25T17:47:25.587 に答える
3

この JavaScript ライブラリをご覧ください。面白そう

http://masonry.desandro.com

(0,1) - ナップザック アプローチ。

于 2012-02-17T22:45:30.360 に答える
2

私の推測では、ストリーミング コンテンツはさまざまなカテゴリ (引用、記事、写真など) に分類されています。各カテゴリに含まれるアイテムの数と、それらのカテゴリ内の各アイテムのランキングに基づいて、ソフトウェアはおそらくそれらをいくつかの事前に作成されたレイアウトに配置します.

次のブログ エントリは、Flipboard の動的レイアウトを解読しようとする多くの詳細な分析を示しています。

Flipboard の複製パート III – Flipboard がコンテンツをレイアウトする方法

于 2011-06-18T01:20:31.850 に答える
2

貪欲なアルゴリズムがうまく機能すると思います。データをロードしようとする順序に依存します。コンテンツの各セクションに重みまたは「値」を指定し、そこから選択する量を大きくすると、貪欲なアルゴリズムが最高の値を持つ最適なレイアウトを見つけることができます。

貪欲なアルゴリズム

于 2011-06-07T13:45:14.687 に答える