如何自定义Listview行的外观

时间:2016-11-21 17:39:27

标签: android listview vector shape

我想要一个Listview,其中包含行:

  • 有圆角;
  • 部分着色(每行的左侧部分);
  • 在其彩色区域中包含一个充满另一种颜色的形状。

以下是其他应用的示例:

piano tiles 2

我目前有两个潜在客户,但我没有成功。

我的第一个领导(形状)

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

可绘制的形状文件“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>

活动文件:

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

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

我的第二个领导(向量)

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

矢量文件的示例:

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

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

你知道什么是最好的选择,我怎样才能获得预期的结果?

提前致谢。

2 个答案:

答案 0 :(得分: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()中用作项目,并影响视图持有者的每个元素

  

注意:在getView中,您必须指定要显示的元素的值,如果不需要,则将它们留空

之后只需在我的活动课程中调用我的listview和我的适配器

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

答案 1 :(得分:1)

考虑使用CardView,它会帮助您获得圆角。在CardView内创建一个RelativeLayout,以获取您上面提到的其他内容。

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