类似于温度计的自定义SeekBar

来源：互联网发布：python生成随机数赋值编辑：程序博客网时间：2024/04/30 14:51

效果图：
这里写图片描述

布局很简单

<?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));            }        });    }}

1 0