画板——滑动条，进度条，横竖屏切换
画板
本文要点
- 横竖屏的切换
- 系统滑动条控件（SeekBar）
- 自定义滑动条，进度条
要点详解
- 横竖屏的切换
1.1 配置⽂件 screenOrientation:
常见参数：
sensor: 感应屏幕的⽅向 随着屏幕的⽅向变化⽽变化
portrait: 不会旋转
landscape: 横屏 固定
sensorLandscape: 感应地横向切换
配置文件设置横竖屏
1.2 代码设置
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
- 系统滑动条控件（SeekBar）
常见参数：
background：控件背景颜色
progressTint：进度条颜色
progressBackgroundTint：进度条背景颜色
thumbTint：拇指颜色
max：最大数值
xml配置
MainActivity代码配置
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SeekBar slider=findViewById(R.id.slider);
//关键帧动画
//补间动画：旋转 平移 缩放 渐变
//属性动画：ObjectAnimator
//ValueAnimator 在给定值区间动画
//ViewPropertyAnimator animator().动画 快速动画
slider.animate().rotation(90);
//监听滑动条的滑动事件
slider.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
//进度值改变
System.out.println("change");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
//监听已经开始拖拽
System.out.println("start");
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
//停止拖拽 手放开
System.out.println("stop");
}
});
}
}
@Override
protected void onResume() {
super.onResume();
//设置横竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
}
SeekBar
- 自定义滑动条，进度条
实现：
1.进度条
2.滑动条
3.横竖切换
3.1 创建Slider Class,继承View并实现方法
创建Slider
3.2 xml对控件布局
3.3 Slider详细代码
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class Slider extends View {
private int lineSize = 6; //线条的粗细
private int lineColor = Color.BLACK;//默认线条颜色
private Paint linePaint;
private Paint circlePaint; //小圆点的画笔
private int thumbColor = Color.MAGENTA; //小圆点的颜色
private int cx; //中心点x
private int cy; //中心点y
private int radius; //小圆点半径
private int thumbScale = 4; //小圆点缩放尺寸基数
private float position; //记录触摸点的坐标
private Paint progressPaint; //进度条进度的画笔
private int progressColor = Color.MAGENTA;//颜色
public static int PROGERSS=0;//进度条
public static int SLIDER=1;//滑动条
private int style=PROGERSS;//默认样式
public int max=100;//设置最大值
public float progress;//进度值
//滑动改变
private OnSliderChangeListener onSliderChangeListener;
public Slider(Context context) {
super(context);
}
public Slider(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private 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);
}
@Override
protected void onDraw(Canvas canvas) {
if (getWidth() > getHeight()){
//横着
//画背景条
canvas.drawLine(0,
getHeight()/2,
getWidth(),
getHeight()/2,
linePaint);
if (position > 0) {
//画进度条
canvas.drawLine(0,
getHeight() / 2,
position,
getHeight() / 2,
progressPaint);
}
radius = getHeight()/thumbScale;
cy = getHeight()/2;
//确定cx的值
if (position < radius){
cx = radius;
}else if (position > getWidth()-radius){
cx = getWidth()-radius;
}else{
cx = (int) position;
}
}else{
//竖着
canvas.drawLine(getWidth()/2,
0,
getWidth()/2,
getHeight(),
linePaint);
if (position > 0){
canvas.drawLine(getWidth()/2,
0,
getWidth()/2,
position,
progressPaint);
}
radius = getWidth()/thumbScale;
cx = getWidth()/2;
//确定中心点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);
}
}
@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:
//获取当前触摸点的值 X Y
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;
}
private void callback(){
if (onSliderChangeListener !=null){
if (getWidth()>getHeight()){
progress=position/getWidth();
}else {
progress=position/getHeight();
}
onSliderChangeListener.progressChanged(progress*max);
}
}
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 int getMax() {
return max;
}
public void setMax(int max) {
this.max = max;
}
public interface OnSliderChangeListener{
void progressChanged(float progress);
}
3.4 MainActivity代码调用
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Slider slider = findViewById(R.id.slider);
// new Timer().schedule(new TimerTask() {
// @Override
// public void run() {
// slider.setProgress(
// (float) (slider.getProgress()+0.01));
// }
// },0,100);
slider.setMax(50);
slider.setStyle(Slider.SLIDER);
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progressChanged(float progress) {
System.out.println(""+progress);
}
});
}
@Override
protected void onResume() {
super.onResume();
//设置横竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
}
滑动条的功能是调节画笔的大小，本期内容结束，下期将实现画板的其他功能：更换画笔颜色，撤销，清除，保存等。