Android self-defined progress value draggable Seekbar

Recently busy looking for internships, coupled with the laboratory in the push new projects, need to learn new knowledge. So for a long time not to tidy up the official blog, GitHub has not been updated for quite a while. Very ashamed. The next step is to keep writing.

Today it is easy to write a blog that I have used in my project to define my own seekbar. Seekbar need to display the leftmost and most right values. Progress is moved with the trailing progress block.

Look, it's clear.

In fact, the implementation is very easy, mainly thinking.

It's not hard to define your own controls, and I've had a special introduction to my blog before, and there's no more talking about it.

Implementation scenarios

This is the quickest way to define your own control by inheriting Seekbar. The main difficulty is the progress of the display, in fact, I am the most stupid way, is to use a popwindow display on the top of the progress bar, and then move the slider in real time to change the horizontal axis of its display.

Look at the core code of 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); else{ mPopup.dismiss(); mPopup = new PopupWindow(undoView, mPopupWidth, ViewGroup.LayoutParams.WRAP_CONTENT, false); }}

The layout is very easy. 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  =;     <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 same is true for the display value of the left and right. 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 to slide the text above the slider. Just rewrite the onprogresschanged to be able to.

 public  void  onprogresschanged  (SeekBar SeekBar, int  Progress, boolean  b) {String popuptext = null ; if  (Mprogresschangelistener!=null ) {Popuptext = mprogresschangelistener.onhinttextchanged (this , CuclaProcess (le Fttext)); } if  (Mexternallistener!=null ) {MEXT Ernallistener.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 basic thing is to figure out the position of X getxposition. Look at the above code:

   privatefloatgetXPosition(SeekBar seekBar){        float val = (((float)seekBar.getProgress() * (float2 * seekBar.getThumbOffset())) / seekBar.getMax());        float offset = seekBar.getThumbOffset()*2;        int textWidth = mPopupWidth;        float textCenter = (textWidth/2.0f);        float newX = val+offset - textCenter;        return newX;    }

Calculate the distance of x movement by getprogress to get progress. This enables the movement of text.

Finally, the source code download is given.

How to use it. Is the same as a control you define yourself. For example, the following:

<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"/>

Of course, the native style is now implemented, and here's how to define the Seekbar style.

Define your own style

Seekbar to change the style to prepare three pictures, the left has selected the slider picture, the right not selected slider picture and slider picture, slider to 9.png format the best. For convenience, the layer-list is used to handle the slide section directly. 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" />          <gradientandroid:angle="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" />              <gradientandroid:angle="android:centercolor" = "#39ac69" android:centery="0.45"android:endcolor="#39ac69"Android:startcolor ="#39ac69" />                                                                                                    </shape>      </clip>  </Item></layer-list>

This allows overlapping images to be implemented. The picture that sets the slider is set directly in the Seekhint:

android:thumb="@drawable/bt_seekbar"

The Seekbar of this progress value can be dragged into the implementation.
Source code Download

Android self-defined progress value draggable Seekbar