Android 사용자 정의 세로 방향 SeekBar 다색 진행 막대

앞 에 쓰다
이런 장면 이 있 기 때문에 수직 방향의 다색 진도 조 를 실현 해 야 한다.그리고 인터넷 에서 도 찾 아 보 았 지만 필요 에 부합 되 는 것 을 보지 못 해서 사용자 정의 했다.효 과 는 다음 과 같다.

구체 적 실현
원래 수평 을 정의 하고 회전 하려 고 했 는데 수직 방향 을 직접 정의 하 는 것 이 낫 다 는 것 을 알 고 바로 수직 방향 으로 그 렸 다.
먼저 생각 을 말 해 보 자.바로 View 를 계승 한 다음 에 onDraw()방법 으로 그 리 는 것 이다.구체 적 으로 그 릴 때 작은 디 테 일 을 처리 해 야 합 니 다.
예 를 들 어 우 리 는 둥 근 슬라이더 를 그 려 야 한다.그러면 우리 의 배경 색 띠 는 전체 너 비 를 가득 채 울 수 없다.그렇지 않 으 면 작은 원형 은 색 띠 처럼 넓 을 수 밖 에 없고 효과 가 보기 좋 지 않 기 때문에 그 릴 때 배경 그림 의 너 비 를 View 의 실제 너비 보다 작 게 그 려 야 한다.
이제 코드 를 붙 여 야 겠 어 요.

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int h = getMeasuredHeight();
  int w = getMeasuredWidth();
  mRadius = (float) w/2;
  sLeft = w * 0.25f; //        
  sRight = w * 0.75f;//        
  sTop = 0;
  sBottom = h; 
  sWidth = sRight - sLeft; //     
  sHeight = sBottom - sTop; //     
  x = (float) w/2;//   x  
  y = (float) (1-0.01*progress)*sHeight;//  y  
  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);
  //     
  paint.setShader(linearGradient);
  canvas.drawRoundRect(rectBlackBg, sWidth/2, sWidth/2, paint);
}
 

LinearGradient 를 사용 하여 다양한 색상 의 그 라 데 이 션 을 실현 합 니 다.기본 초기 화 정 의 는 다음 과 같 습 니 다.

 private int endColor=Color.WHITE;
 private int thumbColor=Color.BLACK;
 private int thumbBorderColor=Color.WHITE;
 private int colorArray[]={startColor, middleColor, endColor};
 

그리고 원 을 그 리 는 동작 을 보 세 요.

 private void drawCircle(Canvas canvas){
  Paint thumbPaint = new Paint();
  y = y < mRadius ? mRadius : y;//  thumb  
  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, progress);
    }
    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;
 }
 

여기에 리 셋 인 터 페 이 스 를 쓴 다음 에 우 리 는 Activity 에서 해당 하 는 미끄럼 진 도 를 받 아들 여 조작 할 수 있다.물론 여기 서 우 리 는 seekbar 의 상 태 를 바 꾸 기 위해 방법 을 하나 더 추가 해 야 한다.

 public void setProgress(float progress) {
  this.progress = progress;
  invalidate();
 }
 

여기까지 기능 은 기본적으로 OK 입 니 다.그리고 우 리 는 Activity 에서 그것 을 사용 할 수 있 습 니 다.다음은 레이아웃 에서 의 참조 입 니 다.

<?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_parent"
    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/tv_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"
    android: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"
   android:layout_marginTop="20dp"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   >
   <TextView
    android:id="@+id/tv_brightness"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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_content"
    android:layout_centerHorizontal="true"
    android:text="0"
    />
  </RelativeLayout>
 </LinearLayout>
</LinearLayout>
 

어떻게 사용 하 는 지 간단 하 다.

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 onStopTrackingTouch(View view, float progress) {
  int viewId = view.getId();
  switch (viewId) {
   case R.id.vpb_inner_temper:
    if (progress < 0) {
     progress = 0;
    }
    if(progress > 100) {
     progress = 100;
    }
    ToastUtils.showShort(this, "progress= " + progress);
    break;

   case R.id.vpb_brightness:
    if (progress < 0) {
     progress = 0;
    }
    if(progress > 100) {
     progress = 100;
    }
    ToastUtils.showShort(this, "progress1= " + progress);
    break;
  }

 }
}

여기까지 입 니 다.마지막 으로 사용자 정의 View 의 전체 코드 를 첨부 하 십시오.

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.getSimpleName();
 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(Context context) {
  this(context, null);
 }

 public VerticalColorSeekBar(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 @Override
 protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());
 }

 public void setColor(int startColor,int middleColor, int endColor,int thumbColor,int thumbBorderColor){
  this.startColor= 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; //        
  sRight = w * 0.75f;//        
  sTop = 0; 
  sBottom = h; 
  sWidth = sRight - sLeft; //     
  sHeight = sBottom - sTop; //     
  x = (float) w/2;//   x  
  y = (float) (1-0.01*progress)*sHeight;//  y  
  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);
  //     
  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;//  thumb  
  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, progress);
    }
    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();
 }
}

끝나다
여기까지 만 하면 정말 끝 이 야.기록 하 는 걸 로 하고 필요 한 사람 을 도 와 줬 으 면 좋 겠 어.더 좋 은 게 있 으 면 알려 주세요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.