如何根据其内容更改列表项呈示？ [英] How to change a list item rendering according to its content?
问题描述
我使用 ListFragment 与 CursorAdapter 来显示项目列表。 XML布局很简单：它只包含标题，说明和注释数量。
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;
}
}
函数我根据Thiago Moreira Rocha的示例实现准备...
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?
注意：
问题，以讨论使可点击评论框。
推荐答案
在您的适配器的 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 ，其中包含 NAME 和随机的 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.
img src =https://i.stack.imgur.com/SmXso.pngalt =景观列表>
这篇关于如何根据其内容更改列表项呈示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
