web-dev-qa-db-ja.com

各行に異なるレイアウトを持つAndroid ListView

行ごとに異なるレイアウトを含む単一のListViewを作成する最善の方法を判断しようとしています。リストビュー全体のカスタム行をサポートするカスタム行+カスタム配列アダプタを作成する方法はわかっていますが、ListViewでさまざまな行スタイルを実装する方法を教えてください。

androidlistviewlistviewitem
336
w.donahue

いくつの種類のレイアウトがあるかがわかっているので、これらの方法を使用することは可能です。

getViewTypeCount() - このメソッドは、リストにいくつの種類の行があるかという情報を返します。

getItemViewType(int position) - 位置に基づいてどのレイアウトタイプを使うべきかについての情報を返します

次に、レイアウトがnullの場合にのみレイアウトを拡張し、getItemViewTypeを使用して型を決定します。

詳しくはこのチュートリアルをご覧ください。

あなたがコメントで説明した構造のいくつかの最適化を達成するために私はお勧めします：

  • ViewHolderというオブジェクトにビューを格納します。毎回getViewメソッドでfindViewById()を呼び出す必要がないため、速度が向上します。 APIデモの List14を参照してください 。
  • プロパティのすべての組み合わせに準拠し、現在の位置にない場合はいくつかの要素を非表示にする一般的なレイアウトを1つ作成します。

お役に立てば幸いです。データ構造と情報を正確に行にマップする方法をXMLスタブに提供できれば、より正確なアドバイスを得ることができます。ピクセル単位.

410
Cristian

リストビュー全体のカスタム行をサポートするカスタム行+カスタム配列アダプタを作成する方法を知っています。しかし、1つのリストビューでさまざまな行スタイルをどのようにサポートできるのでしょうか。

あなたはすでに基本を知っています。提供されている行/カーソル情報に基づいて、カスタムアダプタが異なるレイアウト/ビューを返すようにするだけです。

ListViewは、 AdapterView から派生しているため、複数の行スタイルをサポートできます。

AdapterViewは、子がアダプタによって決定されるビューです。

Adapter を見ると、行固有のビューを使用するための方法がわかります。

abstract int getViewTypeCount()
// Returns the number of types of Views that will be created ...

abstract int getItemViewType(int position)
// Get the type of View that will be created ...

abstract View getView(int position, View convertView, ViewGroup parent)
// Get a View that displays the data ...

後者の2つのメソッドは位置を提供するので、それを使って型を決定することができます。ビューでは、その行にを使用する必要があります。

もちろん、通常はAdapterViewとAdapterを直接使用するのではなく、どちらかのサブクラスを使用するか派生させます。アダプタのサブクラスは、異なる行のカスタムレイアウトを取得する方法を変更する追加機能を追加するかもしれません。 指定された行に使用されるビューはアダプタによって駆動されるので、トリックはアダプタが指定された行に必要なビューを返すようにすることです。これはアダプタによって異なります。

たとえば、ArrayAdapterを使用すると、

  • getView()をオーバーライドして、指定された位置の目的のビューを拡大し、データを追加して返します。 getView()メソッドには、convertViewパラメータを介してビューを再利用する機会があります。

しかし、CursorAdapterの派生物を使用すると、

  • 現在のカーソルの状態（すなわち現在の "行"）に対応するビューを拡大、入力、および返すにはnewView()をオーバーライドします[ウィジェットがビューを再利用できるようにするためにbindViewもオーバーライドする必要があります）。

ただし、SimpleCursorAdapterを使用すると、

  • 指定された行（現在のカーソルの状態）とデータ "column"の目的のビューを拡大し、データを追加して返すために、setViewValue()メソッドでSimpleCursorAdapter.ViewBinderを定義します。このメソッドは、「特別な」ビューだけを定義し、「通常の」バインディングに対するSimpleCursorAdapterの標準的な動作に従うことができます。

使用するアダプタの種類については、特定の例/チュートリアルを参照してください。

62
Bert F

以下のコードを見てください。

まず、カスタムレイアウトを作成します。この場合、4種類。

even.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:background="#ff500000"
    Android:layout_height="match_parent">

    <TextView
        Android:id="@+id/text"
        Android:textColor="@Android:color/white"
        Android:layout_width="match_parent"
        Android:layout_gravity="center"
        Android:textSize="24sp"
        Android:layout_height="wrap_content" />

 </LinearLayout>

odd.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:background="#ff001f50"
    Android:gravity="right"
    Android:layout_height="match_parent">

    <TextView
        Android:id="@+id/text"
        Android:textColor="@Android:color/white"
        Android:layout_width="wrap_content"
        Android:layout_gravity="center"
        Android:textSize="28sp"
        Android:layout_height="wrap_content"  />

 </LinearLayout>

white.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:background="#ffffffff"
    Android:gravity="right"
    Android:layout_height="match_parent">

    <TextView
        Android:id="@+id/text"
        Android:textColor="@Android:color/black"
        Android:layout_width="wrap_content"
        Android:layout_gravity="center"
        Android:textSize="28sp"
        Android:layout_height="wrap_content"   />

 </LinearLayout>

black.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:background="#ff000000"
    Android:layout_height="match_parent">

    <TextView
        Android:id="@+id/text"
        Android:textColor="@Android:color/white"
        Android:layout_width="wrap_content"
        Android:layout_gravity="center"
        Android:textSize="33sp"
        Android:layout_height="wrap_content"   />

 </LinearLayout>

次に、リストビューアイテムを作成します。私たちの場合は、文字列と型です。

public class ListViewItem {
        private String text;
        private int type;

        public ListViewItem(String text, int type) {
            this.text = text;
            this.type = type;
        }

        public String getText() {
            return text;
        }

        public void setText(String text) {
            this.text = text;
        }

        public int getType() {
            return type;
        }

        public void setType(int type) {
            this.type = type;
        }

    }

その後、ビューホルダーを作成します。 Android OSは、アイテムが消えて画面に表示されたときにそのアイテムを再利用するためにレイアウト参照を保持するため、強くお勧めします。この方法を使用しないと、アイテムが画面に表示されるたびにAndroid OSによって新しいアイテムが作成され、アプリのメモリリークが発生します。

public class ViewHolder {
        TextView text;

        public ViewHolder(TextView text) {
            this.text = text;
        }

        public TextView getText() {
            return text;
        }

        public void setText(TextView text) {
            this.text = text;
        }

    }

最後に、getViewTypeCount（）とgetItemViewType（int position）をオーバーライドするカスタムアダプタを作成します。

public class CustomAdapter extends ArrayAdapter {

        public static final int TYPE_ODD = 0;
        public static final int TYPE_EVEN = 1;
        public static final int TYPE_WHITE = 2;
        public static final int TYPE_BLACK = 3;

        private ListViewItem[] objects;

        @Override
        public int getViewTypeCount() {
            return 4;
        }

        @Override
        public int getItemViewType(int position) {
            return objects[position].getType();
        }

        public CustomAdapter(Context context, int resource, ListViewItem[] objects) {
            super(context, resource, objects);
            this.objects = objects;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            ViewHolder viewHolder = null;
            ListViewItem listViewItem = objects[position];
            int listViewItemType = getItemViewType(position);


            if (convertView == null) {

                if (listViewItemType == TYPE_EVEN) {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.type_even, null);
                } else if (listViewItemType == TYPE_ODD) {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.type_odd, null);
                } else if (listViewItemType == TYPE_WHITE) {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.type_white, null);
                } else {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.type_black, null);
                }

                TextView textView = (TextView) convertView.findViewById(R.id.text);
                viewHolder = new ViewHolder(textView);

                convertView.setTag(viewHolder);

            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

            viewHolder.getText().setText(listViewItem.getText());

            return convertView;
        }

    }

そして私たちの活動はこのようなものです。

private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main); // here, you can create a single layout with a listview

        listView = (ListView) findViewById(R.id.listview);

        final ListViewItem[] items = new ListViewItem[40];

        for (int i = 0; i < items.length; i++) {
            if (i == 4) {
                items[i] = new ListViewItem("White " + i, CustomAdapter.TYPE_WHITE);
            } else if (i == 9) {
                items[i] = new ListViewItem("Black " + i, CustomAdapter.TYPE_BLACK);
            } else if (i % 2 == 0) {
                items[i] = new ListViewItem("EVEN " + i, CustomAdapter.TYPE_EVEN);
            } else {
                items[i] = new ListViewItem("ODD " + i, CustomAdapter.TYPE_ODD);
            }
        }

        CustomAdapter customAdapter = new CustomAdapter(this, R.id.text, items);
        listView.setAdapter(customAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getBaseContext(), items[i].getText(), Toast.LENGTH_SHORT).show();
            }
        });

    }
}

これでmainactivity.xml内にリストビューを作成しました

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="com.example.shivnandan.gygy.MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <ListView
        Android:layout_width="match_parent"

        Android:layout_height="match_parent"

        Android:id="@+id/listView"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentEnd="true"


        Android:layout_marginTop="100dp" />

</Android.support.design.widget.CoordinatorLayout>
41
shiv

カスタム配列アダプタでは、おそらく慣れ親しんでいるようにgetView（）メソッドをオーバーライドします。 getViewメソッドに渡されるposition引数に応じて、switchステートメントまたはifステートメントを使用して特定のカスタムビューを返すだけです。 Androidは、自分の位置や行に適したタイプのconvertViewしか表示されないという点で賢いです。正しい種類であることを確認する必要はありません。あなたは適切にgetItemViewType（）とgetViewTypeCount（）メソッドをオーバーライドすることによってこれでAndroidを助けることができます。

14
Jems

リストビューで異なる種類のビューを表示する必要がある場合は、ビューVIEW.GONEとVIEW.VISIBLEを切り替える代わりに、アダプタでgetViewTypeCount（）とgetItemViewType（）を使用するのが良いでしょう。リストのスクロールに影響します。

AdapterでgetViewTypeCount（）およびgetItemViewType（）を使用するには、これを確認してください。

リンク： get-use-of-getviewtypecount

4
kyogs

ListViewは、すべての行項目に対する同じ静的ビューのような単純なユースケースを対象としていました。
ViewHoldersを作成してgetItemViewType()を多用し、さまざまな行項目レイアウトxmlを動的に表示する必要があるので、 RecyclerView を使用してそれを試してください。 Android API 22で利用可能です。複数のビュータイプに対してより優れたサポートと構造を提供します。

あなたが探していることをするためにRecyclerViewを使用する方法に関するこの チュートリアル をチェックしてください。

1
Phileo99