How to make segmented seekbar/slider look like following?

问题

I was wondering if anyone can provide hint or source to achieve following slider widget used in "Circle – Who's Around?" This is the first time I have ever came across this and I am not sure what to exactly name this widget.:

I was thinking of using custom seekbar background to do this but, I am not sure how do I figure out exact pixels that the seekbar will reach of next step. Since, that will be independent to devices. In my case I am planning to use images, rather than the indicators.

Please don't point to this link http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ because this is not what I want to achieve. They seem to have used static image footer to show D,W,K. I have tried that app and it doesn't even step to the exact dots or D,W,K. I have looked at AT&T Android Slider Controls but, they don't seem to provide any source for it. I have found some iOS devs achieving that but, I don't really understand obj C code in order to achieve that in Android.

回答1:

I am sure someone may still be looking for this and I don't want them to waste their time trying to figure it out. Here is a link to the git which can do segmented seekbar/slider with text headers so that you won't need to add static image and worry about getting it stretched in different screen sizes..

This is what I have been able to achieve modifying the source and the properties. I have changed stroke values, painted rings, changed padding, text size to make text visible and clear and modified the code to achieve UI below.

回答2:

Following @Milanix answer using the library at https://github.com/karabaralex/android-comboseekbar here it is a minimum example code that worked for me:

<com.infteh.comboseekbar.ComboSeekBar
        android:id="@+id/seekbar" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        custom:color="#000"
        custom:textSize="12sp"
        custom:multiline="false"
        />

Then in the Activity

private ComboSeekBar mSeekBar;
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mDistanceSeekBar.setAdapter(seekBarStep);

This will create a black segmented seekbar using default drawables. If you need to add some customization have a look at ComboSeekBar.onDraw(), CustomDrawable.draw() and CustomThumbDrawable.draw().

This project is all but finished but still a solid starting point.

回答3:

This is just a seekbar with a custom thumb and background. You could use a 9patch for the background so it fills nicely and just set them in your styles

回答4:

@Giulio thank you for your post, I have the same problem as Ron Eskinder. I heve fixed it by removing :"custom:color" , "custom:textsize" and "custom:multiline" in xml file. then in Java I put this:

mSeekBar =  (ComboSeekBar) findViewById(R.id.seekbar);
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mSeekBar.setAdapter(seekBarStep);

Hope this will help

来源：https://stackoverflow.com/questions/14472144/how-to-make-segmented-seekbar-slider-look-like-following

标签

android

user-interface

slider