web-dev-qa-db-ja.com

複数の行と列を持つリサイクラービュー-フローレイアウトのような自動調整[Android]

私はこのようなレイアウトを構築することに挑戦しています：

enter image description here

私の最初の洞察は、各アイテムを処理してそのレイアウトを拡張できるアダプターでRecyclerViewを使用することでした。

これまでのところ、あまり良くありません。

私はこれまでにこのレイアウトを取得しました：

enter image description here

もうすぐそこにいることはできますが、実際には... 1週間かけて、それを改善する方法、またはUIが提案する方法について考えます。

私の試みのいくつかは

  1. グリッドレイアウトを使用し、リストにあるアイテムの数に応じて最大列数を変更します
  2. StaggeredGridLayoutManagerは、それを修正して私を幸せにする強力な候補のように聞こえましたが、残念ながら、それを使おうとすると、コンストラクターで多数のspanCount（列）を渡す必要があることに気付き、この制限を回避する方法をいくつか見つけました。各行の列数は、最終的な結果が気に入らなかったのですが、興味を設定したときにFoursquareのような他のアプリで見たようなものではありませんでした。
  3. このライブラリをチェックアウトしました Flow Layout ですが、リサイクラーの表示能力全体を失いたくないので、使用し始めませんでした。それを機能させる方法があると信じています。 .....ライブラリが私が必要としていることを正確に実行していることを知っていても。

みんな、私はここで、すでに実行されたコードの平和や私の仕事をする誰かを探していません。実はトンネルの先の光を探しています。

androidlayout-managerandroid-recyclerviewflowlayoutgridlayoutmanager
15
Renan Nery

こんにちはrecyclerviewを使用したくない場合は、custom Libraryを使用した別の例があります）これはリストのように機能します GitHubLibrary TagLayout

  • サンプルコード：

    mFlowLayout.setAdapter(new TagAdapter<String>(mVals)
   {
       @Override
       public View getView(FlowLayout parent, int position, String s)
       {
           TextView tv = (TextView) mInflater.inflate(R.layout.tv,
                   mFlowLayout, false);
           tv.setText(s);
           return tv;
       }
   });

以下のコードを使用して、必要な選択を事前に設定できます：

mAdapter.setSelectedList(1,3,5,7,8,9);

以下のような結果が表示されます：-

enter image description here

5
Hardy

Chipsというコンポーネントを含む新しいGoogleマテリアルデザインライブラリを使用すると、これを簡単に行うことができます。したがって、RecyclerViewを使用する必要はありません。

チップは、連絡先などの小さなブロック内の複雑なエンティティを表します。これは、ラベル、オプションのチップアイコン、およびオプションの閉じるアイコンで構成される丸いボタンです。チェック可能な場合は、チップをクリックまたは切り替えることができます。

コンポーネントの使用方法：

1。ライブラリをインポートします

implementation 'com.google.Android.material:material:1.1.0'

2。以下のコードを使用してください

 <com.google.Android.material.chip.ChipGroup
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content">

 <!-- Your items here -->

     <com.google.Android.material.chip.Chip
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:text="Item 1"/>

     <com.google.Android.material.chip.Chip
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:text="Item 2"/>

     <com.google.Android.material.chip.Chip
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:text="Item 3"/>

 <!-- End -->

</com.google.Android.material.chip.ChipGroup>

詳細については、こちらをご覧ください： 材料コンポーネント

1
Badr

今では手遅れかもしれませんが、グーグルの FlexBoxLayout を使用することもできます

デモ

0
Jean Nelson