Android - (ListView) 区切りフィールド付き+インデクス表示付きのスクロール

ListViewで区切りフィールド付き+インデクス表示付きのスクロールをしたい！

なにが言いたいかというと, 下のように,

①「セクションの区切りの部分のフィールド」
②「右の部分の高速スクロール用のつまみ」
③「中央に表示されているインデックス文字の表示」

を行う方法について, ちょっと解説していきます。(諸事情により, 画像の内容加工して文字を先頭以外見えなくしています。笑)

これは調べてもなかなか情報がなかったため、いっそのことまとめておけば、こんな自分でも役立つかなー(?)と。笑
方針としては,

①「セクションの区切りの部分のフィールド」 => isEnabledのオーバーライドを使用して, 区切りの場合はViewを変更する
②「右の部分の高速スクロール用のつまみ」=> ListViewに対して android:fastScrollEnabled="true" 設定
③「中央に表示されているインデックス文字の表示」=> SectionIndexerをimplementsする

必要な部分のみ記述してます。

<list.xml> メインのレイアウトファイル

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical"  
6.     >  
7.       
8.     <ListView  
9.         android:id="@+id/ListViewSample"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="0dip"  
12.         android:layout_weight="1"  
13.         android:fastScrollEnabled="true" <!-- スクロール用のつまみ表示 -->  
14.         >  
15.     </ListView>  
16.       
17. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >
    
    <ListView
        android:id="@+id/ListViewSample"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:fastScrollEnabled="true" <!-- スクロール用のつまみ表示 -->
        >
    </ListView>
    
</LinearLayout>

<listview_item.xml> リストの各項目のためのレイアウトファイル

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"  
6.     >  
7.     <TextView        android:id="@+id/listview_name"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         />  
11. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <TextView        android:id="@+id/listview_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

<listview_sep.xml> 区切り部分のレイアウトファイル

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"  
6.     android:background="#AAA"  
7.     android:paddingLeft="10px"  
8.     >  
9.     <TextView  
10.         android:textColor="#FFFFFF"  
11.         android:layout_width="fill_parent"  
12.         android:layout_height="wrap_content"  
13.         android:id="@+id/listView_initial"  
14.         >  
15.     </TextView>  
16. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#AAA"
    android:paddingLeft="10px"
    >
    <TextView
        android:textColor="#FFFFFF"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView_initial"
        >
    </TextView>
</LinearLayout>

<CustomAdapter.java>

view plainprint?

1. public class CustomAdapter extends ArrayAdapter<Contentvalues> implements SectionIndexer{  
2.     private LayoutInflater layoutInflater_;  
3.     private int separetorResourceId = R.layout.listview_sep; // 区切り用のフィールド  
4.     private final String SEP_FLAG = "sepFlag";  
5.     private HashMap<String, Integer> indexer = new HashMap<String, Integer>();  
6.     private String[] sections;  
7.       
8.     // Constructor  
9.     public CustomAdapter(Context context, int textViewResourceId, List<Contentvalues> objects) {  
10.          // 一度空のobjectで初期化 (addで区切りを入れながら追加するため)  
11.         super(context, textViewResourceId, new ArrayList<contentvalues>());  
12.         layoutInflater_ = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
13.           
14.         /// 区切りを挿入しながらデータを追加  
15.         int listLength = objects.size();  
16.             String pre_initial = ""; int sep_num = 0;  
17.             for(int index=0; index<listLength; index++){  
18.                 ContentValues cv = objects.get(index);  
19.   
20.                 String initial = cv.getAsString("name").substring(0, 1); // nameの頭文字を基準に区切る  
21.                 if(!initial.equalsIgnoreCase(pre_initial)){ // 頭文字の判定(頭文字が変わったら追加)  
22.                     ContentValues cv_sep = new ContentValues();  
23.                     cv_sep.put(SEP_FLAG, true); cv_sep.put("text", initial);  
24.                     this.indexer.put(initial, index + sep_num);  
25.                     add(cv_sep); sep_num++;  
26.                     pre_initial = initial;  
27.                 }  
28.             add(cv); // ArrayAdapterにObjectを追加  
29.           }  
30.           
31.         ArrayList<string> sectionList = new ArrayList<String>(indexer.keySet());   
32.         Collections.sort(sectionList);  
33.         sections = new String[sectionList.size()];  
34.         sectionList.toArray(sections);  
35.     }  
36.       
37.     // ViewHolderクラス  
38.     static class ViewHolder{  
39.         TextView textView_name;  
40.     }  
41.       
42.     @Override  
43.     public View getView(int position, View convertView, ViewGroup parent){  
44.           
45.         // 特定の行(position)のデータを得る  
46.         final ContentValues cv = (ContentValues)getItem(position);  
47.         ViewHolder holder;  
48.           
49.         // convertViewは使い回しされている可能性があるのでnullの時と, 区切り用のビューに設定されている場合に新しく作成  
50.         if (null == convertView || convertView.getId() != R.layout.listview) {  
51.             convertView = layoutInflater_.inflate(R.layout.listview, null);  
52.             holder = new ViewHolder();  
53.             holder.textView_name = (TextView)convertView.findViewById(R.id.listview_name);  
54.             convertView.setTag(holder);  
55.         }else{  
56.             holder = (ViewHolder) convertView.getTag();  
57.         }  
58.           
59.         if(!isEnabled(position)){ // 区切りの場合は, 区切り用のビューを変更する  
60.             convertView =  layoutInflater_.inflate(separetorResourceId, null);  
61.             TextView sep_text = (TextView)convertView.findViewById(R.id.listView_initial);  
62.             sep_text.setText(cv.getAsString("text")); // 区切りに表示するテキストを設定  
63.         }else{ // 区切りでない場合   
64.             holder.textView_name.setText(cv.getAsString("name"));  
65.         }  
66.           
67.         return convertView;  
68.     }  
69.   
70.     @Override  
71.     public boolean isEnabled(int position){ // 区切りの場合はfalse, そうでない場合はtrueを返す  
72.         ContentValues cv = getItem(position);  
73.         if(cv.containsKey(SEP_FLAG)){ // 区切りフラグの有無チェック  
74.             return !cv.getAsBoolean(SEP_FLAG);  
75.         }else{  
76.             return true;  
77.         }  
78.     }  
79.       
80.     // 以下は, SectionIndexerの実装部分  
81.       
82.     @Override  
83.     public int getPositionForSection(int section) {  
84.         return indexer.get(sections[section]);  
85.     }  
86.   
87.     @Override  
88.     public int getSectionForPosition(int position) {  
89.         return 1;  
90.     }  
91.   
92.     @Override  
93.     public Object[] getSections() {  
94.         return sections;  
95.     }  
96.   
97. }  

public class CustomAdapter extends ArrayAdapter<Contentvalues> implements SectionIndexer{
    private LayoutInflater layoutInflater_;
    private int separetorResourceId = R.layout.listview_sep; // 区切り用のフィールド
    private final String SEP_FLAG = "sepFlag";
    private HashMap<String, Integer> indexer = new HashMap<String, Integer>();
    private String[] sections;
    
    // Constructor
    public CustomAdapter(Context context, int textViewResourceId, List<Contentvalues> objects) {
         // 一度空のobjectで初期化 (addで区切りを入れながら追加するため)
        super(context, textViewResourceId, new ArrayList<contentvalues>());
        layoutInflater_ = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        
        /// 区切りを挿入しながらデータを追加
        int listLength = objects.size();
            String pre_initial = ""; int sep_num = 0;
            for(int index=0; index<listLength; index++){
                ContentValues cv = objects.get(index);

                String initial = cv.getAsString("name").substring(0, 1); // nameの頭文字を基準に区切る
                if(!initial.equalsIgnoreCase(pre_initial)){ // 頭文字の判定(頭文字が変わったら追加)
                    ContentValues cv_sep = new ContentValues();
                    cv_sep.put(SEP_FLAG, true); cv_sep.put("text", initial);
                    this.indexer.put(initial, index + sep_num);
                    add(cv_sep); sep_num++;
                    pre_initial = initial;
                }
            add(cv); // ArrayAdapterにObjectを追加
          }
        
        ArrayList<string> sectionList = new ArrayList<String>(indexer.keySet()); 
        Collections.sort(sectionList);
        sections = new String[sectionList.size()];
        sectionList.toArray(sections);
    }
    
    // ViewHolderクラス
    static class ViewHolder{
        TextView textView_name;
    }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        
        // 特定の行(position)のデータを得る
        final ContentValues cv = (ContentValues)getItem(position);
        ViewHolder holder;
        
        // convertViewは使い回しされている可能性があるのでnullの時と, 区切り用のビューに設定されている場合に新しく作成
        if (null == convertView || convertView.getId() != R.layout.listview) {
            convertView = layoutInflater_.inflate(R.layout.listview, null);
            holder = new ViewHolder();
            holder.textView_name = (TextView)convertView.findViewById(R.id.listview_name);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }
        
        if(!isEnabled(position)){ // 区切りの場合は, 区切り用のビューを変更する
            convertView =  layoutInflater_.inflate(separetorResourceId, null);
            TextView sep_text = (TextView)convertView.findViewById(R.id.listView_initial);
            sep_text.setText(cv.getAsString("text")); // 区切りに表示するテキストを設定
        }else{ // 区切りでない場合 
            holder.textView_name.setText(cv.getAsString("name"));
        }
        
        return convertView;
    }

    @Override
    public boolean isEnabled(int position){ // 区切りの場合はfalse, そうでない場合はtrueを返す
        ContentValues cv = getItem(position);
        if(cv.containsKey(SEP_FLAG)){ // 区切りフラグの有無チェック
            return !cv.getAsBoolean(SEP_FLAG);
        }else{
            return true;
        }
    }
    
    // 以下は, SectionIndexerの実装部分
    
    @Override
    public int getPositionForSection(int section) {
        return indexer.get(sections[section]);
    }

    @Override
    public int getSectionForPosition(int position) {
        return 1;
    }

    @Override
    public Object[] getSections() {
        return sections;
    }

}

ブログに載せるために, 本来のソースではなく, 余分な部分をカットしながら記事を書いていて、今回記述したソース自体は実行していないので、もしかしたら細かいエラーがあるかも。その場合はご連絡してもらえるとありがたいです。でもまぁ、方針的にはこれでできるので許してください。。。

また、ArrayAdapter<Contentvalues> の型で行っていますが、別にContentvaluesじゃなくて専用のクラスをつくっちゃってもいいですね（そっちの方が分かりやすくていいかも。笑）そして、メモ書きという程度で書いていて、今回頭文字の判定の部分はテキトーです(英字のUpperCaseとLowerCaseの判定や, 「カ」と「ガ」を同じセクションにしたり・・・などという細かいことはしてません)。すいません。。

一度案件がおちついて整理する時間があったら書き直そうかと思ってます。