Android Custom Vertical Directional Seekbar multicolor progress bar _android

It's written in front.

Because there is such a scene, you need to achieve the vertical color of the progress bar, and then found on the Internet, did not see the needs, and then customized a, the effect is as follows:

Concrete implementation

Originally wanted to define the level, and then rotate, and later found that it is not as direct to define the vertical direction directly, directly in the vertical direction of the painting.

The first thing to talk about is to draw by inheriting view and then by OnDraw () method. When you draw the concrete, you need to deal with some small details.

For example, we need to draw a circular slider, then our background ribbon can not fill the entire width, otherwise, small pieces can only be as wide as the color band, the effect is not very good-looking, so in the drawing should be painted when the width of the background is less than the actual width of the view.

Next I'm going to post the code:

 @Override
 protected void OnDraw (Canvas Canvas) {
  super.ondraw (Canvas);
  int h = getmeasuredheight ();
  int w = getmeasuredwidth ();
  Mradius = (float) w/2;
  Sleft = w * 0.25f; Background left edge coordinate
  sright = w * 0.75f;//background right edge coordinate
  sTop = 0;
  Sbottom = h; 
  Swidth = Sright-sleft; Background width
  sheight = sbottom-stop//Background height
  x = (float) w/2;//Center x coordinate
  y = (float) (1-0.01*progress) *sheight;// Center y
  -coordinate drawbackground (canvas);
  Drawcircle (canvas);
  Paint.reset ();
 }
 

Look at the background of the painting again:

private void Drawbackground (Canvas Canvas) {
  RECTF rectblackbg = new RECTF (Sleft, STop, Sright, sbottom);
  Lineargradient=new lineargradient (Sleft,stop,swidth,sheight,colorarray,null, Shader.TileMode.MIRROR);
  Paint.setantialias (true);
  Paint.setstyle (Paint.Style.FILL);
  Set the renderer
  paint.setshader (lineargradient);
  Canvas.drawroundrect (RECTBLACKBG, SWIDTH/2, SWIDTH/2, paint);

 

This uses lineargradient to implement a variety of color gradients, and the default initialization definition is as follows:

 private int endcolor=color.white;
 private int thumbcolor=color.black;
 private int thumbbordercolor=color.white;
 private int Colorarray[]={startcolor, Middlecolor, endcolor};
 

Then look at the operation of the drawing circle:

 private void Drawcircle (Canvas Canvas) {
  Paint thumbpaint = new Paint ();
  y = y < Mradius? mradius:y;//Judge thumb boundary
  y = y > Sheight-mradius? sheight-mradius:y;
  Thumbpaint.setantialias (true);
  Thumbpaint.setstyle (Paint.Style.FILL);
  Thumbpaint.setcolor (Thumbcolor);
  Canvas.drawcircle (x, Y, Mradius, thumbpaint);
  Thumbpaint.setstyle (Paint.Style.STROKE);
  Thumbpaint.setcolor (Thumbbordercolor);
  Thumbpaint.setstrokewidth (2);
  Canvas.drawcircle (x, Y, Mradius, thumbpaint);
 
 

This draws a circular, inner fill and outer edge through the canvas.
The above procedure can already show the effect, but it cannot be manipulated, we also need to add an event to it:

 @Override public boolean ontouchevent (Motionevent event) {this.y = Event.gety ();
  Progress= (sheight-y)/sheight*100;
   Switch (event.getaction ()) {case MotionEvent.ACTION_DOWN:break; Case MotionEvent.ACTION_UP:if (onstatechangelistener!=null) {Onstatechangelistener.onstoptrackingtouch (this, pro
    Gress);
   } break;  Case MotionEvent.ACTION_MOVE:if (onstatechangelistener!=null) {Onstatechangelistener.onstatechangelistener (this,
    Progress);
    } setprogress (progress);
    This.invalidate ();
  Break
 return true;
  public interface onstatechangelistener{void Onstatechangelistener (view view, float progress);
 void Onstoptrackingtouch (view view, float progress); } public void Setonstatechangelistener (Onstatechangelistener onstatechangelistener) {this.onstatechangelistener=
 Onstatechangelistener; }
 

Here we write a callback interface, and then we can receive the corresponding sliding progress in the activity, and then do the operation, of course, here we have to add a method to change the state of Seekbar:

 public void setprogress (float progress) {
  this.progress = progress;
  Invalidate ();
 }
 

Here, the function is basically OK, then we can use it in the activity, the following is the reference in the layout:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:orientation=" vertical "android:layout_width=" match_parent "android:layout_height=" Match_paren
  T "android:background=" @color/bgcolor "> <include layout=" @layout/bar_simple_title "/> <linearlayout Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "Horizontal" Android
   : gravity= "center" > <relativelayout android:layout_margintop= "20dp" android:layout_width= "Wrap_content" android:layout_height= "Match_parent" android:layout_marginright= "35DP" > <textview android:id= "@+id/t" V_inner_temper "android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:text=" @string
    /inner_temperature "android:layout_centerhorizontal=" true "/> <com.tfxiaozi.widget.verticalcolorseekbar Android:id= "@+id/vpb_inner_tempEr "android:layout_width=" 20DP "android:layout_height=" 300DP "android:layout_centerhorizontal=" true "Andro id:layout_margintop= "30DP"/> <textview android:id= "@+id/tv_current_temper" android:layout_below= "@id/VPB _inner_temper "android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:text=" @string Current_temperature "/> </RelativeLayout> <relativelayout android:layout_marginleft=" 35DP "Andro id:layout_margintop= "20DP" android:layout_width= "wrap_content" android:layout_height= "match_parent" > <T Extview android:id= "@+id/tv_brightness" android:layout_width= wrap_content "android:layout_height=" Wrap_conten The T "android:text=" @string/brightness "android:layout_centerhorizontal= true"/> <com.tfxiaozi.widget. Verticalcolorseekbar android:id= "@+id/vpb_brightness" android:layout_width= "20DP" android:layout_height= "300DP "Android:layout_cenTerhorizontal= "true" android:layout_margintop= "30DP"/> <textview android:id= "@+id/tv_current_brightness" android:layout_below= "@id/vpb_brightness" android:layout_width= "wrap_content" android:layout_height= "Wrap_con Tent "android:layout_centerhorizontal=" true "android:text=" 0 "/> </RelativeLayout> </linearlayo
 

 Ut> </LinearLayout>

How to use it is very simple:

Package com.tfxiaozi.activity.setting;
Import Android.graphics.Color;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.widget.ImageView;

Import Android.widget.TextView;
Import COM.TFXIAOZI.R;
Import com.tfxiaozi.activity.BaseActivity;
Import Com.tfxiaozi.utils.ToastUtils;

Import Com.tfxiaozi.widget.VerticalColorSeekBar;
 /** * Created by Dongqiang on 2016/10/16. * * public class Manualsettingactivity extends baseactivity implements View.onclicklistener,
 Verticalcolorseekbar.onstatechangelistener {private TextView tvcurrenttemper, tvcurrentbrightness, TvMainTitle;
 Private ImageView Ivback;
 Private Verticalcolorseekbar Vpbinnertemper;

 Private Verticalcolorseekbar vpbbrightness;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (r.layout.activity_manual_setting);
  Initviews ();
  Initevents ();
 InitData (); private void Initviews () {tvmaintitle = (TextView) Findviewbyid (r.id.title_main_text);
  Tvmaintitle.settext (getString (r.string.manual_setting));
  Tvmaintitle.setvisibility (view.visible);
  Ivback = (ImageView) Findviewbyid (r.id.title_back);

  Ivback.setvisibility (view.visible);
  Tvcurrenttemper = (TextView) Findviewbyid (r.id.tv_current_temper);
  Tvcurrentbrightness = (TextView) Findviewbyid (r.id.tv_current_brightness);
  Vpbinnertemper = (Verticalcolorseekbar) Findviewbyid (r.id.vpb_inner_temper);
  Vpbbrightness = (Verticalcolorseekbar) Findviewbyid (r.id.vpb_brightness);
  Vpbinnertemper.setcolor (color.red, Color.yellow, Color.green, Color.Blue, color.transparent);
 Vpbbrightness.setcolor (Color.Blue, Color.White, Color.yellow, Color.Blue, color.transparent);
  private void Initevents () {Ivback.setonclicklistener (this);
  Vpbinnertemper.setonstatechangelistener (this);
 Vpbbrightness.setonstatechangelistener (this);
  private void InitData () {vpbinnertemper.setprogress (50);
 Vpbbrightness.setprogress (70); @Override public void OnClick (View V) {switch (V.getid ()) {case r.id.title_back:finish ();
  Break @Override public void Onstatechangelistener (view view, float progress) {} @Override public void Onstoptracki
  Ngtouch (view view, float progress) {int viewid = View.getid ();
    Switch (VIEWID) {Case R.id.vpb_inner_temper:if (Progress < 0) {progress = 0;
    if (Progress > MB) {progress = 100;
    } toastutils.showshort (This, "progress=" + progress);

   Break
    Case R.id.vpb_brightness:if (Progress < 0) {progress = 0;
    if (Progress > MB) {progress = 100;
    } toastutils.showshort (This, "progress1=" + progress);
  Break

 }

 }
}

It's over here, and the entire code for the custom view is appended to it:

Package com.tfxiaozi.widget;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import android.graphics.LinearGradient;
Import Android.graphics.Paint;
Import Android.graphics.RectF;
Import Android.graphics.Shader;
Import Android.util.AttributeSet;
Import Android.util.Log;
Import android.view.MotionEvent;

Import Android.view.View;
 /** * Created by Dongqiang on 2016/10/21. * * public class Verticalcolorseekbar extends view{private static final String TAG = VerticalColorSeekBar.class.getSimpl
 Ename ();
 private int startcolor= Color.Black;
 private int middlecolor = Color.gray;
 private int endcolor=color.white;
 private int thumbcolor=color.black;
 private int thumbbordercolor=color.white;
 private int Colorarray[]={startcolor, Middlecolor, endcolor};
 private float x,y;
 private float Mradius;
 private float progress;
 private float maxcount = 100f;
 Private float Sleft, STop, Sright, Sbottom;
 private float swidth,sheight; Private LineaRgradient lineargradient;
 Private Paint Paint = new Paint ();

 protected Onstatechangelistener Onstatechangelistener;
 Public Verticalcolorseekbar {This (context, NULL);
 Public Verticalcolorseekbar (context, AttributeSet attrs) {Super (context, attrs); @Override protected synchronized void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (Widt
  Hmeasurespec, Heightmeasurespec);
 Setmeasureddimension (Getmeasuredwidth (), Getmeasuredheight ()); public void SetColor (int startcolor,int middlecolor, int endcolor,int thumbcolor,int thumbbordercolor) {This.startCo
  Lor= StartColor;
  This.middlecolor = Middlecolor;
  This.endcolor= EndColor;
  This.thumbcolor= Thumbcolor;
  This.thumbbordercolor= Thumbbordercolor;
  Colorarray[0] = StartColor;
  COLORARRAY[1] = Middlecolor;
 COLORARRAY[2] = EndColor;
  } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
  int h = getmeasuredheight (); int w = GetmeaSuredwidth ();
  Mradius = (float) w/2; Sleft = w * 0.25f; 
  Background left edge Coordinate sright = w * 0.75f;//background right edge coordinate sTop = 0; 
  Sbottom = h; Swidth = Sright-sleft; Background width sheight = sbottom-stop;
  Background height x = (float) w/2;//Center x coordinate y = (float) (1-0.01*progress) *sheight;//Center y coordinate drawbackground (canvas);
  Drawcircle (canvas);
 Paint.reset ();
  } private void Drawbackground (Canvas Canvas) {RECTF RECTBLACKBG = new RECTF (Sleft, STop, Sright, Sbottom);
  Lineargradient=new lineargradient (Sleft,stop,swidth,sheight,colorarray,null, Shader.TileMode.MIRROR);
  Paint.setantialias (TRUE);
  Paint.setstyle (Paint.Style.FILL);
  Set the renderer Paint.setshader (lineargradient);
 Canvas.drawroundrect (RECTBLACKBG, SWIDTH/2, SWIDTH/2, paint);
  } private void Drawcircle (Canvas Canvas) {Paint thumbpaint = new Paint (); y = y < Mradius? mradius:y;//judge thumb boundary y = y > Sheight-mradius?
  Sheight-mradius:y;
  Thumbpaint.setantialias (TRUE);
  Thumbpaint.setstyle (Paint.Style.FILL); Thumbpaint.setColor (Thumbcolor);
  Canvas.drawcircle (x, Y, Mradius, thumbpaint);
  Thumbpaint.setstyle (Paint.Style.STROKE);
  Thumbpaint.setcolor (Thumbbordercolor);
  Thumbpaint.setstrokewidth (2);
 Canvas.drawcircle (x, Y, Mradius, thumbpaint);
  @Override public boolean ontouchevent (Motionevent event) {this.y = Event.gety ();
  Progress= (sheight-y)/sheight*100;
   Switch (event.getaction ()) {case MotionEvent.ACTION_DOWN:break; Case MotionEvent.ACTION_UP:if (onstatechangelistener!=null) {Onstatechangelistener.onstoptrackingtouch (this, pro
    Gress);
   } break;  Case MotionEvent.ACTION_MOVE:if (onstatechangelistener!=null) {Onstatechangelistener.onstatechangelistener (this,
    Progress);
    } setprogress (progress);
    This.invalidate ();
  Break
 return true;
  public interface onstatechangelistener{void Onstatechangelistener (view view, float progress);
 void Onstoptrackingtouch (view view, float progress); } public void SetonstatechangelisTener (Onstatechangelistener onstatechangelistener) {this.onstatechangelistener=onstatechangelistener;
  public void setprogress (float progress) {this.progress = progress;
 Invalidate ();

 }
}

End

It's really over here, just record it and hope to help those in need. Have a better implementation can also tell me ha ~

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.