堆栈内存溢出
  简体   繁体   English

Android中的自定义评分栏

[英]Custom Rating Bar in Android

 原文  2014-04-16 15:41:23  8   1    android/ ratingbar

问题描述

I need to make custom rating bar as shown on the image below. 我需要制作自定义评分栏，如下图所示。

As you can see I need to make these colorful rectangles instead of stars. 如您所见，我需要制作这些彩色矩形而不是星星。 Each color represents some rating. 每种颜色代表一些等级。

As you can see current rating is 3.5, and its light green. 如您所见，当前额定值为3.5，其浅绿色。 Previous rating is 3.0 and its lighter green. 先前的评分是3.0，其较浅的绿色。 Next rating is 4.0 and it is grey because user didn't selected that rating. 下一个评分为4.0，并且为灰色，因为用户未选择该评分。

How I can make something like this? 我该如何做这样的事情？

在此处输入图片说明

1 个解决方案

解决方案1
 0  2014-04-23 13:51:28

I have done this custom rating bar using views. 我已经使用视图完成了此自定义评分栏。 I agree this is crude way of doing it however I believe it can be done better. 我同意这是粗略的做法，但是我相信可以做得更好。 You could use it for now. 您现在可以使用它。 Do let me know if you need the source code. 让我知道您是否需要源代码。 

<LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:weightSum="17" >

        <View
            android:id="@+id/View01"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View02"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View03"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View04"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View05"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View06"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View07"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View08"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View09"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />
    </LinearLayout>

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.MainActivity);

        view01 = (View) findViewById(R.id.View01);
    view02 = (View) findViewById(R.id.View02);
    view03 = (View) findViewById(R.id.View03);
    view04 = (View) findViewById(R.id.View04);
    view05 = (View) findViewById(R.id.View05);
    view06 = (View) findViewById(R.id.View06);
    view07 = (View) findViewById(R.id.View07);
    view08 = (View) findViewById(R.id.View08);
    view09 = (View) findViewById(R.id.View09);
    tv = (TextView) findViewById(R.id.textView);

    view01.setOnClickListener(this);
    view02.setOnClickListener(this);
    view03.setOnClickListener(this);
    view04.setOnClickListener(this);
    view05.setOnClickListener(this);
    view06.setOnClickListener(this);
    view07.setOnClickListener(this);
    view08.setOnClickListener(this);
    view09.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.View01:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(Color.GRAY);
        view03.setBackgroundColor(Color.GRAY);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("0.5");
        break;
    case R.id.View02:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(Color.GRAY);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("1.0");
        break;
    case R.id.View03:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("1.5");
        break;
    case R.id.View04:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("2.0");
        break;
    case R.id.View05:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("2.5");
        break;
    case R.id.View06:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("3.0");
        break;
    case R.id.View07:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("3.5");
        break;
    case R.id.View08:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(0xff0080ff);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("4.0");
        break;
    case R.id.View09:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(0xff0080ff);
        view09.setBackgroundColor(0xff0000ff);
        tv.setText("4.5");              
        break;
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Android自定义评分栏问题 - Android custom rating bar issue android 中的自定义评级栏问题 - Problem with custom rating bar in android 自定义Android评级栏拉伸图像 - Custom Android Rating Bar stretching image 每个星级的Android评分栏自定义图片 - Android rating bar custom image for each star Android 自定义评分栏图片尺寸问题 - Android custom rating bar image size problem Android 自定义评分栏显示默认值 - Android custom rating bar showing default 具有“无评级”选项的Android评级栏 - Android Rating Bar with “No Rating” Option 自定义大小的评级栏 - Rating bar with custom size 自定义评分栏 - Custom rating bar 评级栏自定义编码 - Rating Bar Custom Coding
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM