2011年3月27日日曜日

ListViewにグループタイトルをつける


上記のようにアルファベットなどでグルーピングされたリストに
グループタイトルをつける方法を考えてみた。
(PreferenceCategoryのタイトルのようなものです)

まず、ListViewの1行分のレイアウトを用意する。
その際、グループタイトル+通常要素(アルバム)となるようにする。
上記のようなアルバム一覧の場合、下記のようなレイアウトを用意する。


具体的なレイアウトのXMLは下記のようになる。
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <!-- グループタイトル -->
    <TextView
        android:id="@+id/groupTitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#280030"
        android:textColor="#c62b00"
        android:textStyle="bold"
        android:paddingLeft="5dp"
        />
    <!-- アルバム名 -->
    <TextView
        android:id="@+id/albumName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:paddingLeft="5dp"
        />
    <!-- アーティスト名 -->
    <TextView
        android:id="@+id/artistName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        />
</LinearLayout>

続いてArrayAdapterを継承したクラスを実装する。
MyAdapter.java
package jp.u1aryz.products.grouptitle;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

class BindData {
    String groupTitle;
    String albumName;
    String artistName;

    public BindData(String groupTitle, String albumName, String artistName) {
        this.groupTitle = groupTitle;
        this.albumName = albumName;
        this.artistName = artistName;
    }
}

class ViewHolder {
    TextView groupTitle;
    TextView albumName;
    TextView artistName;
}

public class MyAdapter extends ArrayAdapter<BindData> {

    private LayoutInflater inflater;

    public MyAdapter(Context context, List<BindData> objects) {
        super(context, 0, objects);
        this.inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public boolean isEnabled(int position) {
        // BindDataのgroupTitleが!nullの場合、選択不可にする
        return getItem(position).groupTitle == null;
    }

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

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.list_item, parent, false);
            holder = new ViewHolder();
            holder.groupTitle = (TextView) convertView.findViewById(R.id.groupTitle);
            holder.albumName = (TextView) convertView.findViewById(R.id.albumName);
            holder.artistName = (TextView) convertView.findViewById(R.id.artistName);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        BindData data = getItem(position);
        // グループタイトル
        if (!isEnabled(position)) {
            holder.groupTitle.setVisibility(View.VISIBLE);
            holder.groupTitle.setText(data.groupTitle);
            holder.albumName.setVisibility(View.GONE);
            holder.artistName.setVisibility(View.GONE);
        // アルバム
        } else {
            holder.groupTitle.setVisibility(View.GONE);
            holder.albumName.setVisibility(View.VISIBLE);
            holder.albumName.setText(data.albumName);
            holder.artistName.setVisibility(View.VISIBLE);
            holder.artistName.setText(data.artistName);
        }
        return convertView;
    }
}

ここでは選択不可の項目を設定する際、BindDataのgroupTileが!nullだった場合と
ルール決めをしている。
ポイントは63行目〜75行目になり、View#setVisibility(int visibility)を使用し、
各項目を表示、非表示と切り替える。

最後にActivityから以下のようにしてadapterを設定する。
package jp.u1aryz.products.grouptitle;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;

public class MyActivity extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        setTitle("アルバム一覧");

        List<BindData> list = new ArrayList<BindData>();
        // ここにlistに項目を追加する処理が入る

        MyAdapter adapter = new MyAdapter(this, list);
        setListAdapter(adapter);
    }
}

正直もっといい方法がありそうなので、より良い方法が見つかったら更新するかも。。。

0 件のコメント:

コメントを投稿

'},ClipboardSwf:null,Version:'1.5.1'}};dp.SyntaxHighlighter=dp.sh;dp.sh.Toolbar.Commands={ExpandSource:{label:'+ expand source',check:function(highlighter){return highlighter.collapse;},func:function(sender,highlighter) {sender.parentNode.removeChild(sender);highlighter.div.className=highlighter.div.className.replace('collapsed','');}},ViewSource:{label:'view plain',func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/'+code+'');wnd.document.close();}},CopyToClipboard:{label:'copy to clipboard',check:function(){return window.clipboardData!=null||dp.sh.ClipboardSwf!=null;},func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(//g,'>').replace(/&/g,'&');if(window.clipboardData) {window.clipboardData.setData('text',code);} else if(dp.sh.ClipboardSwf!=null) {var flashcopier=highlighter.flashCopier;if(flashcopier==null) {flashcopier=document.createElement('div');highlighter.flashCopier=flashcopier;highlighter.div.appendChild(flashcopier);} flashcopier.innerHTML='';} alert('The code is in your clipboard now');}},PrintSource:{label:'print',func:function(sender,highlighter) {var iframe=document.createElement('IFRAME');var doc=null;iframe.style.cssText='position:absolute;width:0px;height:0px;left:-500px;top:-500px;';document.body.appendChild(iframe);doc=iframe.contentWindow.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write('

'+highlighter.div.innerHTML+'

');doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();alert('Printing...');document.body.removeChild(iframe);}},About:{label:'?',func:function(highlighter) {var wnd=window.open('','_blank','dialog,width=300,height=150,scrollbars=0');var doc=wnd.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write(dp.sh.Strings.AboutDialog.replace('{V}',dp.sh.Version));doc.close();wnd.focus();}}};dp.sh.Toolbar.Create=function(highlighter) {var div=document.createElement('DIV');div.className='tools';for(var name in dp.sh.Toolbar.Commands) {var cmd=dp.sh.Toolbar.Commands[name];if(cmd.check!=null&&!cmd.check(highlighter)) continue;div.innerHTML+=''+cmd.label+'';} return div;} dp.sh.Toolbar.Command=function(name,sender) {var n=sender;while(n!=null&&n.className.indexOf('dp-highlighter')==-1) n=n.parentNode;if(n!=null) dp.sh.Toolbar.Commands[name].func(sender,n.highlighter);} dp.sh.Utils.CopyStyles=function(destDoc,sourceDoc) {var links=sourceDoc.getElementsByTagName('link');for(var i=0;i');} dp.sh.Utils.FixForBlogger=function(str) {return(dp.sh.isBloggerMode==true)?str.replace(/
|
/gi,'\n'):str;} dp.sh.RegexLib={MultiLineCComments:new RegExp('/\\*[\\s\\S]*?\\*/','gm'),SingleLineCComments:new RegExp('//.*$','gm'),SingleLinePerlComments:new RegExp('#.*$','gm'),DoubleQuotedString:new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),SingleQuotedString:new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'",'g')};dp.sh.Match=function(value,index,css) {this.value=value;this.index=index;this.length=value.length;this.css=css;} dp.sh.Highlighter=function() {this.noGutter=false;this.addControls=true;this.collapse=false;this.tabsToSpaces=true;this.wrapColumn=80;this.showColumns=true;} dp.sh.Highlighter.SortCallback=function(m1,m2) {if(m1.indexm2.index) return 1;else {if(m1.lengthm2.length) return 1;} return 0;} dp.sh.Highlighter.prototype.CreateElement=function(name) {var result=document.createElement(name);result.highlighter=this;return result;} dp.sh.Highlighter.prototype.GetMatches=function(regex,css) {var index=0;var match=null;while((match=regex.exec(this.code))!=null) this.matches[this.matches.length]=new dp.sh.Match(match[0],match.index,css);} dp.sh.Highlighter.prototype.AddBit=function(str,css) {if(str==null||str.length==0) return;var span=this.CreateElement('SPAN');str=str.replace(/ /g,' ');str=str.replace(/');if(css!=null) {if((/br/gi).test(str)) {var lines=str.split(' 
');for(var i=0;ic.index)&&(match.index/gi,'\n');var lines=html.split('\n');if(this.addControls==true) this.bar.appendChild(dp.sh.Toolbar.Create(this));if(this.showColumns) {var div=this.CreateElement('div');var columns=this.CreateElement('div');var showEvery=10;var i=1;while(i<=150) {if(i%showEvery==0) {div.innerHTML+=i;i+=(i+'').length;} else {div.innerHTML+='·';i++;}} columns.className='columns';columns.appendChild(div);this.bar.appendChild(columns);} for(var i=0,lineIndex=this.firstLine;i0;i++) {if(Trim(lines[i]).length==0) continue;var matches=regex.exec(lines[i]);if(matches!=null&&matches.length>0) min=Math.min(matches[0].length,min);} if(min>0) for(var i=0;i