Android can drag Seekbar custom progress values _android

Recently received a project which is needed to implement this feature: Seekbar needs to display the leftmost and most right values, and the progress will follow the progress block movement. The following image shows you the effect, perhaps more clearly than the text description.

In fact, the realization is very simple, mainly the idea. The custom control is also not difficult, before my blog has a special introduction, here will not say more.

Implementation scenarios

This is the fastest way to customize the control by inheriting Seekbar. The main difficulty is the progress of the show, in fact, I was the most stupid way, is to use a popwindow display in the progress bar above, and then move the slider in real time to change the horizontal axis it shows. See the core code for the progress display:

private void Inithintpopup () { 
String popuptext = null;
if (mprogresschangelistener!=null) {
Popuptext = mprogresschangelistener.onhinttextchanged (This, cuclaProcess ( Lefttext));
}
Layoutinflater Inflater = (layoutinflater) getcontext (). Getsystemservice (Context.layout_inflater_service);
Final View Undoview = inflater.inflate (r.layout.popup, null);
Mpopuptextview = (TextView) Undoview.findviewbyid (r.id.text);
Mpopuptextview.settext (Popuptext!=null popupText:String.valueOf (cuclaprocess (Lefttext)));
Mpopup.dismiss ();
if (Mpopup = = null)
Mpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false); c12/>else{
Mpopup.dismiss ();
Mpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
}

The layout is simple, just a textview.

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width= "Wrap_ Content "
android:layout_height=" wrap_content "
android:orientation=" Horizontal "
android:background= "#0fff"
android:gravity= "center" >
<textview android:id= "@+id/text"
android:padding= "8DP
" Android:textsize= "16SP"
android:singleline= "true"
android:ellipsize= "End"
android:textcolor= "@ Color/green "
android:layout_width=" wrap_content "
android:layout_height=" wrap_content "/>
< /linearlayout>

The left and right display value principle is the same, look at the following code:

private void Initrighttext () {
Layoutinflater inflater = (layoutinflater) getcontext (). Getsystemservice ( Context.layout_inflater_service);
Final View Undoview = inflater.inflate (R.layout.rightpop, null);
Mpopuprightview = (TextView) Undoview.findviewbyid (r.id.righttext);
Mpopuprightview.settext (righttext+ "");
Mrightpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
Mrightpopup.setanimationstyle (r.style.fade_animation);
}

So how do you let the text above the slider slide along. Just rewrite the onprogresschanged.

public void onprogresschanged (SeekBar SeekBar, int progress, Boolean B) {
String popuptext = null;
if (mprogresschangelistener!=null) {
Popuptext = mprogresschangelistener.onhinttextchanged (This, cuclaProcess ( Lefttext));
}
if (Mexternallistener!=null) {
mexternallistener.onprogresschanged (SeekBar, progress, b);
}
Step = cuclaprocess (lefttext);
Mpopuptextview.settext (popuptext!=null popupText:String.valueOf (step));
if (mpopupstyle==popup_follow) {
mpopup.update (int) (THIS.GETX () + (int) getxposition (SeekBar)), (int) ( This.gety () +2*mylocationoffset+this.getheight ()),-1,-1);
}

In fact, the most important thing is to calculate the position of X getxposition. Look at the above code:

Private float getxposition (SeekBar SeekBar) {
float val = (((float) seekbar.getprogress () * (float) (seekbar.getwidth ()-2 * Seekbar.getthumboffset ()))/Seekbar.getmax ());
float offset = seekbar.getthumboffset () *2;
int textWidth = mpopupwidth;
float Textcenter = (textwidth/2.0f);
float newx = val+offset-textcenter;
return newx;
}

Get progress by getprogress to calculate the distance x moves. This enables the movement of text. Finally will give the source code to download.

How to use it, as with normal custom controls, as follows:

<com.canmou.cm4restaurant.tools.seekbarhint
android:id= "@+id/seekbar"
android:layout_width= "Match_ Parent "
android:layout_height=" wrap_content "
android:layout_centerinparent=" true "
Android: layout_margintop= "40DP"
android:progress= "5"
hint:popupwidth= "40DP"
hint:yoffset= "10DP"
hint:popupstyle= "fixed"/>

Now, of course, the native style is implemented, and here's how to customize the Seekbar style.

Custom Style

Seekbar to change the style to prepare three pictures, the left side of the choice of sliding bar picture, the right not selected slider picture and slider picture, slider to 9.png format the best. Here for convenience, directly use layer-list to handle the slider section. Define the XML file in 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 ">
<shape >
<corners android: radius= "10dip"/>
<gradient
android:angle= "180"
android:centercolor= "#F5F5F5"
android: centery= "0.2"
android:endcolor= "#F5F5F5"
android:startcolor= "#F5F5F5"/>
</shape>
</item>
<item android:id= "@android: id/progress" >
<clip >
<shape >
<corners android:radius= "10dip" 
/>
<gradient
android:angle= "180"
android: Centercolor= "#39ac69"
android:centery= "0.45"
android:endcolor= "#39ac69"
android:startcolor= " 39ac69 "/>
</shape>
</clip>
</item>
</layer-list>

This enables overlapping pictures to be achieved. The picture that sets the slider is set directly in Seekhint:

android:thumb= "@drawable/bt_seekbar"

The seekbar that can be dragged to this progress value is implemented. We all see understand, have any questions welcome to cloud Habitat Community small make up a message, small series will give everyone back in time. For more information, please continue to pay attention to the cloud Habitat community website, thank you!