android - コンテンツに応じてリスト項目のレンダリングを変更する方法は?

Question

とを使用してListFragmentアイテムCursorAdapterのリストを表示しています。XML レイアウトは非常に単純です。タイトル、説明、およびコメント数だけで構成されています。

シンプルなリストアイテムのレイアウト

代わりに、右側にコメントの数を表示したいと思います。可能であれば、背景フレームとして画像または色付きのボックスを追加したいと思います。また、コメントの数に応じて画像・色を変えていきたいです。

リストアイテムのレイアウト

これは私が現在使用しているレイアウトファイルです。

<?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="fill_parent"
    android:orientation="vertical" android:padding="@dimen/padding_small" >

    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </TextView>

    <TextView
        android:id="@+id/description"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </TextView>

    <TextView
        android:id="@+id/comments_count"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </TextView>

</LinearLayout>

ここで私が使用する CursorAdapter ...

public class CustomCursorAdapter extends CursorAdapter {

    private LayoutInflater mInflater;

    public CustomCursorAdapter(Context context, Cursor cursor, int flags) {
        super(context, cursor, flags);
        mInflater = LayoutInflater.from(context);
    }

    public void bindView(View view, Context context, Cursor cursor) {
        ViewHolder holder = (ViewHolder)view.getTag();
        if (holder == null) {
            holder = new ViewHolder();
            holder.title = (TextView)view.findViewById(R.id.title);
            holder.comments_count = (TextView)view.findViewById(R.id.comments_count);
            view.setTag(holder);
        }
        String title = cursor.getString(cursor.getColumnIndex(TITLE));
        holder.title.setText(title);
        int comments_count = cursor.getInt(cursor.getColumnIndex(COMMENTS_COUNT));
        holder.comments_count.setText(comments_count + "");
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) {
        return mInflater.inflate(R.layout.list_item, parent, false);
    }

    private static class ViewHolder {
        TextView title;
        TextView comments_count;
    }

}

これは、 Thiago Moreira Rocha の実装例に従って作成した色関数です ...

if (comments_count == 0) {
    holder.comments_count.getParent().setBackgroundColor(Color.WHITE);
}
else if (comments_count != 0) {
    float saturation = (comments_count * 15) / 100.f;
    // The value gets pinned if out of range.
    int color = Color.HSVToColor(new float[] {110f , saturation, 1f});
    holder.comments_count.getParent().setBackgroundColor(color);
}

レイアウトと状況依存の動作をどのように実装しますか?

ノート：

コメントボックスをクリック可能にするオプションについて議論するために、2 つ目の質問を作成しました。このトピックに情報を追加したい場合は、新しい投稿を参照してください。

score 1 · Accepted Answer

アダプタのgetViewメソッド内（あなたの場合bindView）で、バインドされるビューの親を取得し、その背景色をView.setBackGroundColor！で更新します。

public void bindView(View view, Context context, Cursor cursor) {
   //usual stuff
   //...
   Color newColor = colorFunction(comments_count);//calculate your new color
   View v = (View)view.getParent();
   v.setBackgroundColor(newColor);
}

この例では、を使用してリストを作成しましArrayAdapterた。NAMEの後にランダムなNUMBERが続きます。私はこの番号をaLinearLayoutで囲み、その値に応じて彼の親のレイアウトを変更します。

以下の私の例を確認してください。

public class MainActivity extends ListActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setListAdapter(new ColorAdapter(this, R.layout.row, mockData));
}

String[] mockData = { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6",
        "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12" };

public class ColorAdapter extends ArrayAdapter<String> {

    public ColorAdapter(Context context, int textViewResourceId,
            String[] objects) {
        super(context, textViewResourceId, objects);

    }

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

        View row = convertView;

        if (row == null) {
            LayoutInflater inflater = getLayoutInflater();
            row = inflater.inflate(R.layout.row, parent, false);
        }

        TextView label = (TextView) row.findViewById(R.id.title);
        label.setText(mockData[position]);

        TextView desc = (TextView) row.findViewById(R.id.description);
        desc.setText("Description: "+ mockData[position]);

        TextView value = (TextView) row.findViewById(R.id.comments_count);

        //Here is the object you need to change the colors.
        LinearLayout background = (LinearLayout) value.getParent();

        Random random_number = new Random();
        int comments_count = random_number.nextInt(256);

        value.setText(comments_count+"");

        //Calculates a random color
        int newBackgroundColor = colorFunction(comments_count); 

        //Set the new background color on the comments_count parent
        background.setBackgroundColor(newBackgroundColor);

        return row;
    }

    private int colorFunction(int commentsNumber) {
        if (commentsNumber == 0) {
            return Color.WHITE;
        }
        else if(commentsNumber < 0) {
            return new Random().nextInt(256);
        }
        else {
            int color;
            Random rnd = new Random(); 
            color = Color.argb(commentsNumber, rnd.nextInt(commentsNumber), rnd.nextInt(256), rnd.nextInt(commentsNumber));

            return color;
        }
    }
}

}

row.xml：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dip" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.7" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/title"
            android:ellipsize="end"
            android:lines="1"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_weight="1"
        android:background="@drawable/border"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/comments_count"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:padding="10dip"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

border.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="4dp" android:color="#000000" />
    <solid android:color="#ffffff" />
    <padding android:left="15dp" android:top="15dp"
            android:right="15dp" android:bottom="15dp" />
    <corners android:radius="4dp" /> 
</shape>

結果のリスト（ポートレートとランドスケープ）は以下のとおりです。

縦向きのリスト

横向きのリスト

android - コンテンツに応じてリスト項目のレンダリングを変更する方法は?

1 に答える 1

Related

Reference