创建一个类继承与View
1.png
创建横竖屏
2.png
创建一个画布方法，画背景条和进度条
1.当屏幕为横屏的时候
if(getWidth()>getHeight()){
//横着
//画背景条
canvas.drawLine(0,getHeight()/2,
getWidth(),getHeight()/2,linePaint);
if (position>0) {
//画进度条
canvas.drawLine(0, getHeight() / 2,
position,getHeight()/2 , progressPaint);
}
cy=getHeight()/2;
radius=getHeight()/thumbScale;
//确定cx的值
if (position<radius) {
cx = radius;
}else if (position>getWidth()-radius){
cx=getWidth()-radius;
}else {
cx= (int) position;
}
}
2.当屏幕为竖屏的时候
else {
//竖着
canvas.drawLine(getWidth()/2,0,
getWidth()/2,getHeight(),linePaint);
if (position>0){
canvas.drawLine(getWidth()/2,0,
getWidth()/2,position,progressPaint);
}
cx=getWidth()/2;
radius=getWidth()/thumbScale;
//确定中心cy的值
if (position<radius) {
cy = radius;
}else if (position>getHeight()-radius){
cy=getHeight()-radius;
}else {
cy= (int) position;
}
}
在画布里面画小圆点
//画小圆点
if (style==SLIDER) {
canvas.drawCircle(cx, cy, radius, circlePaint);
}
创建画笔的方法
public void init(){
//线
linePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setColor(lineColor);
linePaint.setStrokeWidth(lineSize);
//小圆点
circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(thumbColor);
circlePaint.setStyle(Paint.Style.FILL);
//进度条
progressPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
progressPaint.setColor(progressColor);
progressPaint.setStrokeWidth(lineSize);
}
在这个demo里面所用到的变量
private int lineSize=6;//线条粗细
private Paint linePaint;
private int lineColor=Color.BLACK;//线条颜色
private int cx;//中心点x
private int cy;//中心点y
private int radius;//小圆点半径
private Paint circlePaint;
private int thumbColor=Color.MAGENTA;
private int thumbScale=4;//小圆点尺寸缩放基数
private float position;//记录触摸点的坐标
private Paint progressPaint;//进度条进度画笔
private int progressColor=Color.MAGENTA;//进度条的颜色
public static int PROGRESS=0;//进度条
public static int SLIDER=1;//滑动条
private int style=PROGRESS;//默认样式为进度条
public int max=100;//设置最大值
public float progress;//进度值
//2.滑动改变的监听者
private OnSliderChangeListener onSliderChangeListener;
创建touch事件——在这里面实现滑动条的移动和小圆点的放大
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//小圆点放大
thumbScale=2;
//获取当前触摸点的值
if (getWidth()>getHeight()){
//横向时 y不变 x改变
position=event.getX();
}else {
//竖着时 x不变 y改变
position=event.getY();
}
callBack();
break;
case MotionEvent.ACTION_MOVE:
//获取当前触摸点的值
if (getWidth()>getHeight()){
//横向时 y不变 x改变
position=event.getX();
if (position<0){
position=0;
}else if (position>getWidth()){
position=getWidth();
}
}else {
//竖着时 x不变 y改变
position=event.getY();
if (position<0){
position=0;
}else if (position>getHeight()){
position=getHeight();
}
}
callBack();
break;
case MotionEvent.ACTION_UP:
thumbScale=4;
break;
}
if (style==SLIDER) {
invalidate();//刷新
}
return true;
}
创建一个回调的方法
//4.回调——在这里面实现距离的限定
private void callBack(){
if (onSliderChangeListener!=null){
if (getWidth()>getHeight()) {
progress = position /getWidth();
}else {
progress=position/getHeight();
}
onSliderChangeListener.progressChanged(progress*max);
}
}
创建set，get的方法
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
public float getProgress() {
return progress;
}
public void setProgress(float progress) {
this.progress = progress;
if (progress<0.001) {
//将进度值转化为控件中的尺寸位置
if (getWidth() > getHeight()) {
position = progress * getWidth();
} else {
position = progress * getHeight();
}
//重绘进度
invalidate();
}
}
public void setMax(int max) {
this.max = max;
}
//1.
public interface OnSliderChangeListener{
void progressChanged(float progress);
}
//3.
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
在xml里面创建控件
3.png
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/operation"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal">
<!--滑动条-->
<swu.lwk.a16draw_point.Slider
android:id="@+id/slider"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
/>
<LinearLayout
android:layout_width="200dp"
android:layout_height="400dp"
android:layout_marginTop="140dp"
android:layout_marginLeft="140dp"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/colorPrimary"/>
<Button
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/colorAccent" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/operation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:layout_constraintBottom_toBottomOf="parent"
android:orientation="horizontal"
android:background="@color/colorPrimary">
</LinearLayout>
在Mainactivity里面实现小圆点和滑动条的优化
final Slider slider=findViewById(R.id.slider);
slider.setMax(50);
slider.setStyle(Slider.SLIDER);slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progressChanged(float progress) {
}
});
效果图
1572697819118.gif
