如何更改列表项目根据其内容呈现? [英] How to change a list item rendering according to its content?

查看:156
本文介绍了如何更改列表项目根据其内容呈现?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是 ListFragment 的CursorAdapter 显示项目的列表。该XML布局是pretty简单:它只由标题,描述和评论的数量的

I am using a ListFragment with a CursorAdapter to display a list of items. The XML layout is pretty simple: it only consists of the title, a description and the number of comments.

相反,我想展现的右侧意见在号码。如果有可能,我想图像或彩色框添加为背景帧。此外,我想为根据评论数改变图像/颜色

Instead, I would like to show the number of comments on the right side. If it is possible I would like to add an image or a colored box as a background frame. Further, I would like to change the image/color according to the number of comments.

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

This is the layout file I am currently using.

<?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 ...

Here the CursorAdapter that I use ...

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

}

下面是一个色彩功能我$ P $根据蒂亚戈·莫雷拉Rocha的示例实现ppared ...

Here is a color function I prepared according to Thiago Moreira Rocha's example implementation ...

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

你会

如何实现的布局和上下文敏感的行为?

How would you implement the layout and the context sensitive behavior?

注意:

我创建了第二个问题,讨论的选项<一个href=\"http://stackoverflow.com/questions/12431592/android-how-to-attach-multiple-touch-actions-to-a-single-list-item\">make评论框点击。如果你想将信息添加到这个话题请参阅新的职位。

I created a second question to discuss the option to make the comment box clickable. Please refer to the new post if you want to add information to this topic.

推荐答案

在您的适配器 getView 方法(在你的情况, bindView )获取将被绑定的视图的家长和更新它的背景颜色与 View.setBackGroundColor

Inside your adapter's getView method(in your case, bindView) get the parent of the view that will be bound and update it's background color with 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 ,以命名后跟一个随机的 NUMBER 。我裹在的LinearLayout 这个号码,并根据它的值更改他的父母布局。

In this example, I've created a list using ArrayAdapter, with a NAME followed by a random NUMBER. I wrapped this number inside a LinearLayout and according to it's value I change his parent layout.

检查我下面的例子。

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>

结果列表(纵向和横向)如下。

The resulting list(portrait and landscape) are below.

这篇关于如何更改列表项目根据其内容呈现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆