将列表视图行的颜色填充到一定百分比

Question

我正在尝试用一种颜色将列表视图的行填充到某个百分比。这应该在用户单击任何列表项后完成。

很难解释，请看下图：

请告诉我如何进行，我不知道如何实施。我正在考虑在用户单击事件后添加一个视图并设置该视图的背景颜色。

如果有其他可行的方法，请告诉我。

谢谢

Answer 1

您将需要一个彩色组件来显示您的效果。

您可以设置一个带有背景颜色的视图并添加到其他视图下。

或者，您可以覆盖视图并通过 onDraw(Canvas) 绘制颜色槽。

Answer 2

假设您要放置一个需要左对齐的两个视图，其宽度应以百分比表示

可以用"android:layout_weight"变大一小

参考这个Linear Layout and weight in Android

参考这个Percentage width in a RelativeLayout

Answer 3

您可以为每个项目使用此布局：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="100"
        android:baselineAligned="false">
        <View
            android:layout_weight="50"
            android:background="#0080FF"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <TextView
        android:text="@string/hello_world"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"/>
</RelativeLayout>

然后通过修改最里面View的weight属性，你可以指定颜色的百分比宽度。这可以通过修改 ListView 适配器内部的视图 LayoutParams 来完成。 SO 上有很多关于自定义适配器和 LayoutParam 的教程。

这是它的样子：

Answer 4

我认为下面描述了一种选择：

我会创建一个列表视图，并为列表中的每个项目创建两个视图：

一个 TextView（显示文本选项）-> 默认可见
一个视图（如果用户在列表中单击以绘制进度）-> 默认是不可见的。

注意：这个带进度的简单视图与 TextView 的高度相同。它用背景颜色（例如蓝色）完全着色。然后，您可以通过设置其权重（从 0 到 100）来设置该视图的长度。适配器中的重量将发生动态变化。您可以在布局资源文件中设置的其他属性 (list_view_each_row.xml).

此外，我认为您必须创建自己的自定义列表适配器（以便在列表显示文本或进度时正确处理）。此自定义列表应扩展 BaseAdapter 并应覆盖强制方法。

因此，在点击任何选项后，您可以更改您的适配器（您应该通知您的适配器用户点击了某个选项）。基于这个新信息，适配器可以隐藏所有 TextView 并仅显示有进度的 View。

下面是一个示例代码：您可以在适配器中添加安全检查（空指针）。我使用了一个简单的数组。您可以动态更改为 ArrayList 和 add/removes 项。此外，您只能在 "OnItemClickListener" 内设置进度值。这只是一个例子。

MainActivity

public class MainActivity extends Activity {

    private MyCustomListAdapter adapter; 

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ((ListView) findViewById(R.id.list_view)).setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Force list view to populate its content again (now, with progress instead of text)
                adapter.setIfUserAlreadyClickedOption(true);
                adapter.notifyDataSetChanged();
            }
        });

        adapter = new MyCustomListAdapter();

        // Set click to false (user did not clicked yet)
        adapter.setIfUserAlreadyClickedOption(false);

        // Set text and progress
        adapter.setOptions(new String []{"Option1", "Option2", "Option3"});
        adapter.setProgressBarValues(new float [] {50,75,25});
        ((ListView)findViewById(R.id.list_view)).setAdapter(adapter);
    }
}

MyCustomListAdapter.java

public class MyCustomListAdapter extends BaseAdapter {

    private boolean userAlreadyCliced;
    private String [] stringTexts;
    private float [] progressBarValues;

    public MyCustomListAdapter() {
        userAlreadyCliced = false;
    }

    public void setIfUserAlreadyClickedOption(boolean clicked) {
        userAlreadyCliced = clicked;
    }

    public void setOptions(String  [] text) {
        stringTexts = text;
    }

    public void setProgressBarValues(float [] values) {
        progressBarValues = values;
    }

    @Override
    public int getCount() {
        return stringTexts.length;
    }

    @Override
    public Object getItem(int position) {
        return stringTexts[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View view, ViewGroup parentViewGroup) {
        if(view == null) {
            view = LayoutInflater.from(parentViewGroup.getContext()).inflate(R.layout.list_view_each_row, parentViewGroup, false);
        }

        if(userAlreadyCliced) {
            // Hide Text
            view.findViewById(R.id.progress_view).setVisibility(View.VISIBLE);

            // Show Text and set progress
            ((LinearLayout.LayoutParams) view.findViewById(R.id.progress_view).getLayoutParams()).weight = progressBarValues[position];
            view.findViewById(R.id.text_view).setVisibility(View.GONE);
        } else {
            // Hide Progress
            view.findViewById(R.id.progress_view).setVisibility(View.GONE);

            // Show and set text
            view.findViewById(R.id.text_view).setVisibility(View.VISIBLE);
            ((TextView)view.findViewById(R.id.text_view)).setText(stringTexts[position]);
        }       
        return view;
    }
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

list_view_each_row.xml

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

   <View
       android:id="@+id/progress_view"
       android:background="#0000FF"
       android:layout_width="0dp"
       android:layout_height="40dp"/>

    <TextView
        android:id="@+id/text_view"
        android:visibility="visible"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

</LinearLayout>

将列表视图行的颜色填充到一定百分比

Filling listview row's color to some percentage

android

android-layout

listview

android-listview

android-drawable