类似于温度计的自定义SeekBar

效果图:
这里写图片描述

布局很简单

<?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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值