android rating bar style

请看原文：http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/

Android is a great development platform. Numerous built-in components and widgets simplify developer’s life greatly, andIntents are just awesome — in fact, I added sharing of content through Facebook, email and SMS to my application literally with 10 lines of code. Coming from a Java Swing background, I was surprised at how fast I could build pretty complex and functional UIs without writing a bunch of custom components.

However, while there is a plethora of built-in components, the default look and feel of them sometimes leaves much to be desired. TakeRatingBar, for example:

Default RatingBar

To me, this just looks ugly. So, when I needed to add a review/rating “feature” to my application, I started looking for a way to make it prettier and more appropriate to my application (which is about food). As a long-time Swing developer, I immediately thought about subclassingRatingBarand overriding some methods (where’s mypaintComponent()?) — but it turned out there’s an easier way.

Android comes with a “styling” support, which is great, but not really documented enough (you can read a detailed post about Android styles and how to use them in generalhere). Actually, it’s a must — so please do if you want to continue understanding what’s going on. In a nutshell, styles provide a way to change the look-and-feel of different parts of Android components entirely through XML, while keeping the code and functionality intact. So, with just a few extra lines of XML and a couple of images, yourRatingBarcould become this:

Cookie RatingBar

And how do we get there? First, we’ll need astyles.xmlfile, which describes our custom styles and lives in thevaluesfolder:

1 2 3 4 5 6 7 8 <? xml version = "1.0" encoding = "utf-8" ?> < resources > < style name = "foodRatingBar" parent = "@android:style/Widget.RatingBar" > < item name = "android:progressDrawable" >@drawable/food_ratingbar_full</ item > < item name = "android:minHeight" >48dip</ item > < item name = "android:maxHeight" >48dip</ item > </ style > </ resources >

This creates a new custom style calledfoodRatingBarwhich extendsWidget.RatingBarstyle, sets its height to 48 pixels and itsprogressDrawabletofood_rating_bar(RatingBaris just an extension of aProgressBar, and each “star” in theRatingBaris basically just another “tick” —progressDrawable— in theProgressBar).progressDrawabledocumentation is ratherlacking, and the only way I figured out which element I needed to style was by looking through Android’s source code (which is a great way to learn things, by the way). It also provides an insight on what should go into thefood_rating_bar_full Drawable:

<? xml version = "1.0" encoding = "utf-8" ?> < layer-list xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:id = "@+android:id/background" android:drawable = "@drawable/food_ratingbar_full_empty" /> < item android:id = "@+android:id/secondaryProgress" android:drawable = "@drawable/food_ratingbar_full_empty" /> < item android:id = "@+android:id/progress" android:drawable = "@drawable/food_ratingbar_full_filled" /> </ layer-list >

Basically, it lists out differentDrawables to use for background (no cookie –food_ratingbar_full_empty) and progress (selected cookie –food_ratingbar_full_filled). TheseDrawables are selectors which list out the images to be used in differentRatingBarselection states. Here’s an example of a filled rating (cookie):

<? xml version = "1.0" encoding = "utf-8" ?>  < selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:state_pressed = "true" android:state_window_focused = "true" android:drawable = "@drawable/cookie" /> < item android:state_focused = "true" android:state_window_focused = "true" android:drawable = "@drawable/cookie" /> < item android:state_selected = "true" android:state_window_focused = "true" android:drawable = "@drawable/cookie" /> < item android:drawable = "@drawable/cookie" /> </ selector >

I just use one image for all states (and it actually looks decent), but as you can see from the selector, there are four different states possible (@drawable/cookieis finally an actuall cookie png image). And the cool thing here is thatRatingBarcomponent will automatically fill in part of the cookie when needed based only on “full” and “empty” images (if you support half ratings, as in my example image).

Finally, it’s time to apply the style to theRatingBar, which is the easiest part — we just add a style attribute to the<RatingBar>:

< RatingBar android:id = "@+id/my_rating_bar" ... style = "@style/foodRatingBar" />

And that’s it,RatingBartransformation is complete!

One last thing to note is that there are three different types ofRatingBar— one interactive, and two read-only (small and large). In order to style the read-only ones, you would need to create another custom style that extends from the appropriate read-only style — for example, for a small one, it would look like this:

< style name = "foodRatingBarSmall" parent = "@android:style/Widget.RatingBar.Small" > < item name = "android:progressDrawable" >@drawable/food_ratingbar_small</ item > < item name = "android:minHeight" >16dip</ item > < item name = "android:maxHeight" >16dip</ item > </ style >

Basically, we’re just extending from a different parent style, and providing different (smaller) images, and in the read-only case, the half “star” image also needs to be provided.

更多相关文章

随机推荐