Question

我使用ListFragment和CursorAdapter来显示项目列表。 XML布局非常简单：它只包含标题，描述和注释数量。

Simple list item layout

相反，我想在右侧显示评论数量。如果可能，我想添加图像或彩色框作为背景框。此外，我想根据评论数量更改图像/颜色。

List item layout

这是我目前使用的布局文件。

<?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);
}

您将如何实现布局和上下文敏感行为？

注意：

我创建了第二个问题来讨论make the comment box clickable的选项。如果您想为此主题添加信息，请参阅新帖子。

Answer 1

在适配器的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 。我将这个数字包裹在LinearLayout内，根据它的值，我改变了他的父布局。

查看下面的示例。

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>

结果列表（纵向和横向）位于下方。

List in portrait

List in landscape

如何根据内容更改列表项呈现？

1 个答案: