效果图:
布局很简单
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#ff9900"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="progress"
android:textSize="20sp"
android:id="@+id/progerss"
/>
<com.example.lili.customseekbar.CustomSeekBar
android:id="@+id/csb"
android:layout_width="350dp"
android:layout_height="48dp"
app:select="true">
</com.example.lili.customseekbar.CustomSeekBar>
</LinearLayout>
自定义的属性:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomSeekBar">
<!-- 默认线条颜色 -->
<attr name="normal_background" format="color"></attr>
<!-- 选择颜色 -->
<attr name="select_background" format="color"></attr>
<!-- 圆圈 -->
<attr name="circle_src" format="reference"></attr>
<!-- 是否靠近值 -->
<attr name="select" format="boolean"></attr>
</declare-styleable>
</resources>
球的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="oval"
tools:ignore="ResourceName">
<solid android:color="#ffffff"></solid>
<size
android:width="28dp"
android:height="28dp"></size>
</shape>
自定义控件代码:
/**
* Created by yebin on 2016/9/27.
*/
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
public class CustomSeekBar extends FrameLayout implements View.OnTouchListener {
private int mNormalBackground; //默认颜色
private int mSelectBackground; //滑动过的颜色
private Paint mPaint;
private int mWidth;
private int mHeight;
private ImageView mImageView;
private int mImgSrc;
LayoutParams mImgLP;
private int imgWidth;
private int rightBorder;
private boolean isFirst = true;
private int normalLineLength;
private int selectLineLength;
private OnValueChanged mOnValueChanged;
private boolean isSelect;
private int minValue;
public CustomSeekBar(Context context) {
super(context);
}
public CustomSeekBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomSeekBar);
mNormalBackground = a.getColor(R.styleable.CustomSeekBar_normal_background,
context.getResources().getColor(R.color.custom_normal_bg));
mSelectBackground = a.getColor(R.styleable.CustomSeekBar_select_background,
context.getResources().getColor(R.color.custom_select_bg));
mImgSrc = a.getResourceId(R.styleable.CustomSeekBar_circle_src, R.drawable.circle);
isSelect = a.getBoolean(R.styleable.CustomSeekBar_select, false);
a.recycle();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.setWillNotDraw(false);
initImageView(context);
}
private void initImageView(Context context) {
//初始化可移动的图片,就是那个球
mImageView = new ImageView(context);
mImgLP = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_VERTICAL);
mImageView.setLayoutParams(mImgLP);
mImageView.setImageResource(mImgSrc);
mImageView.setFocusable(true);
mImageView.setOnTouchListener(this);
this.addView(mImageView);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/*//画边框
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(18);
mPaint.setColor(Color.WHITE);
canvas.drawLine(imgWidth / 2-1, mHeight / 2, mWidth + imgWidth / 2+1, mHeight / 2, mPaint);
canvas.drawCircle(imgWidth/2, mHeight/2, 14, mPaint);
canvas.drawCircle(mWidth+imgWidth/2, mHeight / 2, 9, mPaint);*/
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(1);
mPaint.setColor(mNormalBackground);
mPaint.setAntiAlias(true);
RectF oval=new RectF(imgWidth/2,mHeight/2-8,imgWidth/2+mWidth,mHeight/2+8);
canvas.drawRoundRect(oval,8,8,mPaint);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(16);
mPaint.setColor(mSelectBackground);
canvas.drawLine(imgWidth / 2, mHeight / 2, selectLineLength + imgWidth / 2, mHeight / 2, mPaint);
canvas.drawCircle(imgWidth/2, mHeight/2, imgWidth/2-3, mPaint);
//mPaint.setColor(mNormalBackground);
//canvas.drawLine(selectLineLength + imgWidth / 2, mHeight / 2, normalLineLength + selectLineLength + imgWidth / 2, mHeight / 2, mPaint);
/*if(mImgLP.leftMargin==mWidth){
mPaint.setColor(mSelectBackground);
}else {
mPaint.setColor(mNormalBackground);
}*/
//canvas.drawCircle(mWidth+imgWidth/2, mHeight / 2, 8, mPaint);
mImageView.setLayoutParams(mImgLP);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mWidth = getMeasuredWidth() - mImageView.getMeasuredWidth();
mHeight = getMeasuredHeight();
imgWidth = mImageView.getMeasuredWidth();
if (isFirst) {
mImgLP.leftMargin = 0;
normalLineLength = mWidth;
selectLineLength = mImgLP.leftMargin;
}
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isFirst = false;
rightBorder = getRight() - getLeft() - imgWidth;
break;
case MotionEvent.ACTION_MOVE:
int newLeft = (int) (event.getRawX() - imgWidth / 2 - getLeft());
if (newLeft > 0 && newLeft <= rightBorder) {
mImgLP.leftMargin = newLeft;
}
selectLineLength = mImgLP.leftMargin;
normalLineLength=mWidth-selectLineLength;
int progress=Math.round((selectLineLength / (float) mWidth)*100);
if(mOnValueChanged!=null){
mOnValueChanged.onValueChanged(progress);
}
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
break;
}
return true;
}
public interface OnValueChanged {
void onValueChanged(int value);
}
public void setOnValueChanged(OnValueChanged mOnValueChanged) {
if(mOnValueChanged!=null){
this.mOnValueChanged = mOnValueChanged;
}
}
}
如何使用:
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private CustomSeekBar csb;
private TextView progress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
csb = ((CustomSeekBar) findViewById(R.id.csb));
progress = ((TextView) findViewById(R.id.progerss));
csb.setOnValueChanged(new CustomSeekBar.OnValueChanged() {
@Override
public void onValueChanged(int value) {
int temp=value*50/100;
progress.setText(String.valueOf(temp));
}
});
}
}