web-dev-qa-db-ja.com

ListViewにセクションセパレーター/ディバイダーを追加する方法は？

現在、アプリのメニューを作成しています。DrawerLayoutとArrayAdapterサブクラスを使用して、Facebookの引き出しメニューのような外観を実現しています。

現在、リストの作成に問題はありませんが、見栄えが良いので、さまざまな種類のオプション（つまり、ユーザー関連オプションとアプリケーション関連オプション）の間にセパレーターを追加し、メニューの上部に検索バーを追加したいと思います。

現在のArrayAdaptorサブクラスのコードは次のとおりです。

public class DrawerMenuAdapter extends ArrayAdapter<String>{
    private Context context;
    private String[] values;
    private int resId;

    public DrawerMenuAdapter(Context context, int textViewResourceId, String[] values) {
        super(context, textViewResourceId, values);
        this.context = context;
        this.values = values;
        this.resId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = inflater.inflate(this.resId, parent, false);

        TextView elementText = (TextView)rowView.findViewById(R.id.element_text);
        ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon);
        String textValue = values[position];

        elementText.setText(textValue);

        //This switch adds the icons to the related elements
        switch (position){
            case 0:
                elementImage.setImageResource(R.drawable.search);
                break;
            case 1:
                elementImage.setImageResource(R.drawable.facebook_friends);
                break;
            case 2:
                elementImage.setImageResource(R.drawable.flirts_history);
                break;
            case 3:
                elementImage.setImageResource(R.drawable.premium);
                break;
            case 4:
                elementImage.setImageResource(R.drawable.settings);
                break;
            case 5:
                elementImage.setImageResource(R.drawable.share_app);
                break;
            case 6:
                elementImage.setImageResource(R.drawable.cgu);
                break;
        }


        return rowView;
    }
}

GetView関数を呼び出して、ListViewに入力する関数をオーバーライドする必要があると思いますが、どの関数かがわかりません。

androidandroid-layoutandroid-listviewandroid-adapterseparator
33
Jivay

ListViewのシンプルなsectionsが必要な場合は、このチュートリアルをご覧ください。

http://cyrilmottier.com/2011/07/05/listview-tips-tricks-2-section-your-listview/

またはこのチュートリアル：

http://bartinger.at/listview-with-sectionsseparators/

2番目はそれほど詳細ではありませんが、おそらく理解しやすいでしょう/シンプルに保ちます。

基本的な考え方は、ListAdapterに異なる種類のビューを作成することです。たとえば、1つの種類が情報を表示する実際のリストアイテムであり、他の種類がビューのセクション区切りです。

チュートリアルから：

ListViews、より具体的にはAdaptersはいくつかの種類のビューを処理できます。アダプタインターフェースを見ると、2つの特定のメソッドが含まれていることがわかります。

  • getViewTypeCount()は、AdapterViewが管理するビューのタイプの数を返します。 ListViewのすべてのアイテムが類似しているため、ほとんどの場合、このメソッドは1を返します。この場合、2を返すことにより、ListViewは2種類のビューを処理します。通常のアイテムビューとセパレータビューです。
  • getItemViewType(int)は、整数between0（包括的）およびgetViewTypeCount()（排他的）を返す必要があります。指定された番号は、指定された位置でのビューのタイプを表します。たとえば、通常のアイテムビューの戻り値が0で、セパレータの値が1であることを確認できます。
38
Philipp Jahoda

私はこれに別の方法を考え出したので、ここに答えを追加しています。 @Philが投稿したリンクに少し似ています。

まず、表示したいメニューの文字列配列を設定します。個人の利便性のために、この配列をXMLリソースファイルに記述しました。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array
            name="drawer_menu_options">
        <item>Username</item>
        <item>-sep-Flirter</item>
        <item>Recherche</item>
        <item>Amis Facebook</item>
        <item>Flirts</item>
        <item>Compte premium</item>
        <item>-sep-Menu</item>
        <item>Réglages</item>
        <item>Inviter des amis</item>
        <item>CGU</item>
    </string-array>
</resources>

接頭辞-sep-を使用する2つの要素があることに注意してください。これらはセパレーターになります。

次に、以前に示したDrawerMenuAdapterがありますが、これはまだArrayAdapterであり、その上にいくつかの機能を追加しました。

public class DrawerMenuAdapter extends ArrayAdapter<String>{
    private Context context;
    private String[] values;
    private int resId;
    private int separatorId = 0;
    private int userbarId = 0;

    public DrawerMenuAdapter(Context context, int textViewResourceId, String[] values) {
        super(context, textViewResourceId, values);
        this.context = context;
        this.values = values;
        this.resId = textViewResourceId;
    }

    public void setSeparator(int resId){
        separatorId = resId;
    }

    public void setUserbarId(int resId){
        userbarId = resId;
    }

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

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if(userbarId != 0 && values[position].equals("Username")){
            rowView = inflater.inflate(this.userbarId, parent, false);

        }else if(separatorId != 0 && values[position].startsWith("-sep-")){
            rowView = inflater.inflate(this.separatorId, parent, false);

        }else{
            rowView = inflater.inflate(this.resId, parent, false);
        }

        TextView elementText = (TextView)rowView.findViewById(R.id.element_text);
        String textValue = values[position];

        /* If the current line is a separator, just display a separator. Otherwise, set the
        matching picture
         */
        if(textValue.startsWith("-sep-")){
            elementText.setText(textValue.substring("-sep-".length()));

        }else{
            if(textValue.equals("Username")){
                elementText.setText(context.getSharedPreferences("LovRUserSettings", 0)
                        .getString("firstName", "Username"));
            }else{
                elementText.setText(textValue);
            }
            ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon);
            switch (position){
                case 2:
                    elementImage.setImageResource(R.drawable.search);
                    break;
                case 3:
                    elementImage.setImageResource(R.drawable.facebook_friends);
                    break;
                case 4:
                    elementImage.setImageResource(R.drawable.flirts_history);
                    break;
                case 5:
                    elementImage.setImageResource(R.drawable.premium);
                    break;
                case 7:
                    elementImage.setImageResource(R.drawable.settings);
                    break;
                case 8:
                    elementImage.setImageResource(R.drawable.share_app);
                    break;
                case 9:
                    elementImage.setImageResource(R.drawable.cgu);
                    break;
            }
        }


        return rowView;
    }
}

このコードには、userBarというオブジェクトがあります。本当にこれに注意を払う必要はありませんが、興味があれば、それは別のメニュー要素であり、通常のメニュー要素に使用するのではなく、特定のレイアウトファイルを使用します。これは、文字列を読み取るだけで、任意の種類の特定のレイアウトを任意の場所に追加できることを示す方法です。

ここでの主なポイントは、コードが区切り文字（-sep-プレフィックスを持つ文字列）を検索する方法です。見つかった場合、接頭辞は削除され、一致するレイアウトはセパレータに起因します。

それは私が見つけたものです。この後、クリックリスナーを追加する独自の方法を見つける必要があります。地雷はDrawerLayout.setOnCliclListenerで実装されます。これは基本的に、Googleのドキュメントに記載されているのとまったく同じ方法でジョブを実行します。ただし、ビューにsetOnclickListenerを使用して追加し、独自のonClick属性を設定できるXMLファイルを使用することもできます...

それが役立つことを願っています=）

7
Jivay