Android RatingBar的基本使用和自定义样式

简介: Android RatingBar的基本使用和自定义样式

今天项目中又用到了RatingBar,于是翻出来之前踩坑的一篇笔记,快速解决问题,顺便把笔记内容整理在此,方便以后查阅。

 

当项目中遇到【评分】需求的时候,一般情况下都会使用RatingBar用于UI展示,而且很多时候都不会使用原生样式。原因有两个:

  • Android和iOS样式的统一
  • 系统原生样式的版本兼容性问题

所以适当的自定义RatingBar样式就显得很有必要了。

RatingBar基本使用

RatingBar的基本使用比较简单,这里只记录一下几个常用的属性:

  • isIndicator 是否是指示器,如果设置为true,则不可以通过点击来改变进度;如果设置为false,则可点击
  • numStars 一共有几个星星,默认是5个。
  • rating 表示进度

RatingBar 样式展示

之前项目中一共碰到过四种RatingBar样式,各自效果图整理如下:

image.png

自定义RatingBar样式

说明:

  • 第一个:原生普通样式(随着主题不同,样式会变)
  • 第二个:原生普通样式-小icon
  • 第三个:自定义RatingBar 颜色
  • 第四个:自定义RatingBar Drawable

RatingBar 各样式实现

原生样式

原生样式其实没什么好说的,使用系统提供的style 即可

<!--第一个:原生主题样式 -->
<RatingBar
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rating="3"/>
<!--第二个:原生主题样式:小-->
<RatingBar
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rating="3"/>

自定义颜色

这种方式也很简单,只需要要定义一个样式即可,两步完成。

第一步,定义样式,指定背景色 和 进度色

<!--自定义RatingBar Color-->
<style name="RatingBar_CustomColor" parent="@android:style/Widget.Holo.RatingBar.Indicator">
    <!--Background Color-->
    <item name="colorControlNormal">#D7D7D7</item>
    <!--Progress Color-->
    <item name="colorControlActivated">#F49800</item>
</style>

第二步,XML中使用该主题

<!--自定义 Color-->
<RatingBar
    android:id="@+id/go_rating"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:isIndicator="true"
    style="?android:attr/ratingBarStyleSmall"
    android:theme="@style/RatingBar_CustomColor"
    android:rating="3"/>

自定义Drawable

这种方式相对于前面几种,算是稍微麻烦一点的方式了,而且还存在图片拉伸的坑(图片底部被垂直拉伸成一条直线,跟哭了似的-_-!,就不贴图了)。先说具体实现方法,再说坑。

第一步,定义层叠布局layerlist

自定义过ProgressBar的同学,相信对下面的background,secondProgress,progress属性都不会陌生。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@drawable/star"/>
    <item android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/star"/>
    <item android:id="@android:id/progress"
        android:drawable="@drawable/star_solid"/>
</layer-list>

第二步,自定义样式,指定ProgressDrawable

注意这里指定minHeight和maxHeight,根据项目中的UI需求而定,定死高度的其中一个作用就是防止drawable图片被垂直拉伸。

<!--自定义RatingBar Drawable-->
<style name="RatingBar_CustomDrawable" parent="@android:style/Widget.Holo.RatingBar.Indicator">
    <item name="android:progressDrawable">@drawable/custom_rating_bar</item>
    <item name="android:minHeight">15dp</item>
    <item name="android:maxHeight">15dp</item>
</style>

第三步,在xml中使用刚才定义好的样式

<!--自定义Drawable样式-->
<RatingBar
    android:id="@+id/room_ratingbar"
    style="@style/RatingBar_CustomDrawable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rating="3"/>

最后说下图片垂直拉伸的解决方案:

  1. 设置minHeight和maxHeight,写死像素值。
  2. 让UI帮忙切一张底部留有空隙的star图标,比如有1px的空隙
  3. 使用略大于当前控件空间的icon,比如整个UI切图是按照drawable-xxhdpi来切的,那么使用高一级的drawable目录下比如drawable-xxxhdpi的icon,这样在运行的时候,icon会进行相应比例的缩放。
相关文章
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
35 3
|
30天前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
63 0
|
3月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
69 2
基于Android P,自定义Android开机动画的方法
|
3月前
|
供应链 物联网 区块链
未来触手可及:探索新兴技术的趋势与应用安卓开发中的自定义视图:从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展,新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景,带你领略未来的可能性。
|
3月前
|
测试技术 Android开发 Python
探索软件测试的艺术:从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中,测试是不可或缺的一环。它如同艺术一般,需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言,引领读者从软件测试的基础出发,逐步深入到更复杂的测试策略和工具的使用,最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能,就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
|
5天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
7天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
19 5
|
30天前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
58 10
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
43 3