如何自定义列表视图行的外观

Question

我想要一个列表视图，其中的行：

有圆角；
部分着色（每行的左侧部分）；
在其彩色区域中包含一个形状，该形状用另一种颜色填充。

这是来自另一个应用程序的示例：

我目前有两个线索，但我没有成功。

我的第一条线索（形状）

我找到了如何通过使用形状来获得圆角并将其用作列表视图的背景。

可绘制形状文件"rounded_rectangle.xml":

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <corners
        android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>

</shape>

activity 文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    // ...
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/splitView"
        android:id="@+id/lv_player"
        android:layout_alignParentTop="true"
        android:background="@drawable/rounded_rectangle"/>

    // ...

</FrameLayout>

但是，我不知道如何使用形状使行部分着色或绘制图标。我可以用颜色填充形状，但行完全着色。

我的第二个线索（矢量）

我还发现我可以使用矢量作为我的列表视图的背景。优点是我可以使用路径绘制任何我想要的东西。

矢量文件示例：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >

    <path
        android:name="w"
        android:fillColor="#000000"
        android:pathData="m 290,103 l-200,0 c -50,0 -50,-100 0,-100 l200,0 z"
    />
</vector>

我可以轻松地为行的彩色区域创建路径，为图标创建另一个路径。但是，现在的问题是我不知道如何将矢量的大小缩放到线的大小。

你知道什么是最好的选择吗？我怎样才能得到预期的结果？

提前致谢。

Answer 1

首先，您需要单独创建您喜欢的项目，例如让 xml 布局包含自定义项目的描述：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
    android:id="@+id/optionName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_weight="10"
    android:fontFamily="sans-serif-medium"
    android:text="@string/option"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white"
    android:textStyle="bold" />

<CheckBox
    android:id="@+id/activated"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center" />

</LinearLayout>

而不是创建您的适配器，使您的列表将您的布局作为一个项目

public class ListOptionsAdapter extends BaseAdapter {
    List<OptionsObject> Features = new ArrayList<OptionsObject>();
    LayoutInflater inflater;
    Context context;
    public ListOptionsAdapter(List<OptionsObject> features, Context context) {
        super();
        Features = features;
        inflater = LayoutInflater.from(context);
        this.context = context;
    }
    @Override
    public int getCount() {
        return Features.size();
    }
    @Override
    public OptionsObject getItem(int position) {
        return Features.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.item_list_view, parent, false);
            holder = new ViewHolder();
            holder.optionName = (TextView) convertView.findViewById(R.id.optionName);
            holder.isActivate = (CheckBox) convertView.findViewById(R.id.activated);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        return convertView;
    }
    static class ViewHolder {
        TextView optionName;
        CheckBox isActivate;
    }
}

之后，如上所述，我指定了我将用作方法 getView() 中的项目的布局名称，并影响视图持有者的每个元素

NB : in getView you have to specify the values for the elements that they will be displayed or leave them blank if u dont need

然后在我的 activity class 中调用我的列表视图和我的适配器

OptionList = (ListView) findViewById(R.id.optionList);
adapter = new ListOptionsAdapter(Features, getApplicationContext(), this);
OptionList.setAdapter(adapter);

Answer 2

考虑使用 CardView，它将帮助您获得圆角。在 CardView 中创建一个 RelativeLayout 以获得您上面提到的其余内容。

这是一个很好的教程：Using the CardView | CodePath Android Cliffnotes

如何自定义列表视图行的外观

How to customize the appearance of a Listview rows

android

listview

vector

shape