web-dev-qa-db-ja.com

Android gridviewの行に異なる列を設定する方法

これに似たグリッドビューが欲しい

enter image description here

奇数行ごとに大きなサイズの2つのイメージがあり、偶数行には4つの小さいイメージがあります。これを実現するにはどうすればよいですか。

androidgridview
34
mungaih pk

似たようなものがあり、新しいRecyclerViewで解決しました。

RecyclerView でFragmentを作成しました。 XMLのRecyclerView：

<Android.support.v7.widget.RecyclerView xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/filter_subtypes" Android:layout_width="match_parent" Android:layout_height="match_parent" />

フラグメント/アクティビティ（フラグメントの場合はOnViewCreated）。私はRecyclerViewを見つけてアダプタを設定します-通常のアダプタクラスはRecyclerView.Adapter <YOUR VIEW HOLDER class>-を継承しますGridLayoutManager

final GridLayoutManager mng_layout = new GridLayoutManager(this.getActivity(), TOTAL_CELLS_PER_ROW/*In your case 4*/);


次に、このメソッドをオーバーライドして、動的な列数（セル）を設定します

mng_layout.setSpanSizeLookup( new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                switch( adapterSubtype.getItemViewType(position) ) {
                    case FilterSubtypesAdapter.TYPE_LOW:
                        return TOTAL_CELLS_PER_ROW;
                    case FilterSubtypesAdapter.TYPE_HIGH:
                        return 2;
                    default:
                        return -1;
                }
            }
        });
myRecyclerView.setLayoutManager(mng_layout);

これにより、行のセルの動的な数が取得されます。

追加：次に、アダプタで同じビュー/タイプビューを使用している場合、同じw＆hビューが表示されます。 TYPE_HIGH用に2つのxmlビューを作成し、TYPE_LOW用に他のビューを作成する必要があります。

したがって、アダプターには、2種類のデータ（高イメージ用に1つ、低イメージ用に1つ）が必要です。このメソッドをオーバーライドする必要があります

@Override
public SubtypeViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = null;
    if (viewType==TYPE_HIGH) {
        view = inflater.inflate(R.layout.item_image_high, parent, false);
    } else {
        view = inflater.inflate(R.layout.item_image_low, parent, false);
    }
    return new SubtypeViewHolder(view, viewType);
}

 @Override
 public int getItemViewType(int position) {
     return (list.get(position).getType()==Subtype_type.HIGH) ? TYPE_HIGH : TYPE_LOW;
 }

私は明確だったと思います、どんな問題でも教えてくれます。

33
Sulfkain

単一の画像ビューを考慮する代わりに、3つの画像のグループを単一のグリッドアイテムとして取得していますが、

enter image description here

グリッドアダプター内でこれを試してください

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/linear"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/green"
    Android:orientation="vertical">
<ImageView
    Android:id="@+id/image"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:scaleType="fitXY"
    Android:src="@drawable/user"
     />
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal">
        <ImageView
            Android:id="@+id/image_1"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:scaleType="fitXY"
            Android:src="@drawable/user"

            />
        <ImageView
            Android:id="@+id/image_2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:src="@drawable/user"
            Android:scaleType="fitXY"
            Android:layout_weight="1"
            />

        </LinearLayout>

    </LinearLayout>

グリッドビューは次のようになります

<GridView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/RelativeLayout1"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:numColumns="2"
    >

</GridView>

あなたが世話をしなければならない唯一のものは、あなたのイメージのシーケンスです。これはあなたを助けるかもしれない

22
Abhishek

RecyclerViewにGridViewを使用している場合、解決策があります。

GridLayoutManager layoutManager = new GridLayoutManager(this, 4);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
         int mod = position % 6;    

         if(position == 0 || position == 1)
              return 2;
         else if(position < 6)
              return 1;
         else if(mod == 0 || mod == 1)
              return 2;
         else
              return 1;
    }
});

recyclerView.setLayoutManager(layoutManager);

この仕事があなたのために願っています！

10
Xcihnegn

私のプロジェクトではどのように機能しますか？セルの高さとヘッダーも異なります

enter image description here

アダプタ：

public class AdapterRecViewMain
    extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List<BaseMarkerElement> mainCardList;
private final int HEADER_VIEW = 0;
private final int FOOTER_VIEW = 1;

public AdapterRecViewMain() {
}

public void setData(List<BaseMarkerElement> mainCardList) {
    this.mainCardList = mainCardList;
}

@Override public int getItemViewType(int position) {
    if (position == 0) {
        return HEADER_VIEW;
    }
    return FOOTER_VIEW;
}

@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {
    if (type == FOOTER_VIEW) {
        View v = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.card_main_activity, viewGroup, false);
        return new MainCardViewHolder(v);
    } else {
        View v = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.header_view_main_activity, viewGroup, false);
        return new HeaderViewHolder(v);
    }
}

@Override public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int positionItem) {
    final int position = viewHolder.getAdapterPosition();

    if (viewHolder instanceof HeaderViewHolder) {
        StaggeredGridLayoutManager.LayoutParams layoutParams =
                (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
        layoutParams.setFullSpan(true);

        BaseMarkerElement item = mainCardList.get(position);
        if (item instanceof HeaderView) {
            HeaderView header = (HeaderView) mainCardList.get(position);
            // need to add implementation
        }
    } else if (viewHolder instanceof MainCardViewHolder) {
        MainCardViewHolder currentView = (MainCardViewHolder) viewHolder;
        CardMainActivity currentCard = (CardMainActivity) mainCardList.get(position);

        currentView.ivMainCard.setImageResource(currentCard.getIvMainCard());
        currentView.tvBrandName.setText(currentCard.getTvBrandName());
        currentView.tvPrice.setText(currentCard.getTvPrice());
        currentView.tvType.setText(currentCard.getTvType());
    }
}

@Override public int getItemCount() {
    return mainCardList.size();
}

private class MainCardViewHolder extends RecyclerView.ViewHolder {
    ImageView ivMainCard;
    TextView tvBrandName;
    TextView tvType;
    TextView tvPrice;

    MainCardViewHolder(View view) {
        super(view);
        ivMainCard = (ImageView) view.findViewById(R.id.imageViewMainCard);
        tvBrandName = (TextView) view.findViewById(R.id.tvBrandName);
        tvType = (TextView) view.findViewById(R.id.tvType);
        tvPrice = (TextView) view.findViewById(R.id.tvPrice);
    }
}

private class HeaderViewHolder extends RecyclerView.ViewHolder {

    public HeaderViewHolder(View itemView) {
        super(itemView);

    }
}
}

あなたの活動で：

private AdapterRecViewMain adapter;
private RecyclerView rvMain;

@Override protected void onResume() {
    super.onResume();
    Logger.logGeneral("onResume()");

    if (adapter == null) {
        setUpRecView();
    }
}

private void setUpRecView() {
    adapter = new AdapterRecViewMain();
    adapter.setData(controller.loadData());
    rvMain = (RecyclerView) findViewById(R.id.rvMain);
    final StaggeredGridLayoutManager layoutManager =
            new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
    rvMain.setLayoutManager(layoutManager);

    rvMain.addOnScrollListener(scrollListener);
    rvMain.setAdapter(adapter);
    adapter.notifyDataSetChanged();
    rvMain.invalidate();
}
1
Aleksey Timoshchenko

私が行うための最良の方法は、リサイクラービューを使用することだと思います。また、パフォーマンスのためにリスト/グリッドよりも推奨されます

リンクが非常に役立つ可能性があります-すべてはルーカスによる双方向表示に関連しています

https://github.com/lucasr/twoway-view

https://plus.google.com/+LucasRocha/posts/WBaryNqAHiy

http://lucasr.org/2014/07/31/the-new-twowayview/

1
Chimu

StaggeredGridLayoutManager と組み合わせて RecyclerView を試しましたか？

この組み合わせにより、次のような結果になります： video 。

これがあなたが探しているものだと思います。

0
ivtoto

以下のように、2つの異なるXMLファイルを作成し、アダプター内の位置に基づいて膨張させます。

if(position%2==0){
//Inflate Even number layout with 4 images
}else{
//Inflate ODD number layout with 2 images
}
0
Bharath Kumar Bachina

これを試して 、

https://github.com/etsy/AndroidStaggeredGrid

千鳥格子ビュー、

非常にシンプルで使いやすい。

0
TheAnimatrix