web-dev-qa-db-ja.com

2列のGridView、最初の項目は両方の列にまたがる

1つのImageviewと1つのグリッドビューがあります。

私のレイアウトデザインはこちら。

enter image description here

これら2つのビューを1つのグリッドビューに結合したい

私の質問：

グリッドビューの最初の項目スパンを両方の列に設定するにはどうすればよいですか？

androidandroid-scrollview
26
AndroidDev

あなたの質問を調査したところ、私は何か新しいことを学びました。たまたまGridLayoutManagerのRecyclerViewを調べたところ、カスタムSpanSizeLookupを設定できることに気付きました。これで、「スパン」は、垂直方向にスクロールしている場合は列になり、水平方向にスクロールしている場合は行になります。したがって、SpanSizeLookupでは、たとえば、アイテム0は2列、アイテム1は1列などを指定できます。

RecyclerViewをGridLayoutManagerと一緒に使用すると、解決策は簡単です。

_    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create a grid layout with two columns
        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);

        // Create a custom SpanSizeLookup where the first item spans both columns
        layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return position == 0 ? 2 : 1;
            }
        });

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new MyGridAdapter());
    }
_

試してみて、期待したとおりに動作することを確認するためだけにテストプロジェクトを作成しました。

アダプターに関する注意：_RecyclerView.Adapter_はListAdapterと互換性がありません。 _RecyclerView.Adapter_からアダプターを拡張し、適切な変更を行う必要があります。

これが、テストプロジェクト用に作成したアダプタです。

_    public static class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView mImageView;
        TextView mTextView;

        public MyViewHolder(View itemView) {
            super(itemView);
            mImageView = (ImageView) itemView.findViewById(R.id.imageView);
            mTextView = (TextView) itemView.findViewById(R.id.textView);
        }
    }

    public static class MyGridAdapter extends RecyclerView.Adapter<MyViewHolder> {

        private int[] mDrawables;

        public MyGridAdapter() {
            this.mDrawables = new int[] {
                    R.drawable.images_01,
                    R.drawable.images_02,
                    .
                    .
                    .
            };
        }

        @Override
        public int getItemCount() {
            return mDrawables.length;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = inflater.inflate(R.layout.layout_grid_item, parent, false);
            MyViewHolder holder = new MyViewHolder(view);
            // set up any onClickListener you need on the view here
            return holder;
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {

            holder.mImageView.setImageResource(mDrawables[position]);
            holder.mTextView.setText("Image " + position);
        }
    }
_

最初に、_RecyclerView.ViewHolder_サブクラスを作成します。ビューホルダーパターンは、アダプタービューを実行するこの新しい方法の不可欠な部分です。 ViewHolderは、ビューのすべての子ビューを設定します。

次に、_RecyclerView.Adapter_サブクラスで、onCreateViewHolder()およびonBindViewHolder()をオーバーライドします。 onCreateViewHolder()では、ビューを拡張してViewHolderを構築します。 onBindViewHolder()では、positionを使用してアダプターデータを取得し、ViewHolderを使用して子ビューを設定します。したがって、RecyclerViewはViewHoldersを含むViewsを技術的にリサイクルします。

アダプターにこれらの変更を加えると、すべての準備が整います。

55
kris larson