目的
完成画板demo的前期步骤
相关技术、及其使用
xml配置文件：创建SeekBar比较简单，但是不足之处在于当实现横屏的时候就比较麻烦
代码创建：代码创建SeekBar比较简单，能够很好地实现横竖屏切换。
2、创建Slider类继承于View
初始化线条，小圆点，进度条的画笔：
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);
}
3、调用onDraw 方法进行横竖屏的画图
protected void onDraw(Canvas canvas) {
//canvas 画布
if(getWidth() > getHeight()){
//横着
canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,linePaint);
if(position > 0){
//画进度条背景
canvas.drawLine(0,getHeight()/2,getWidth(),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;
}
}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);
}
}
4、通过onTouchEvent方法来实现进度条随着触摸位置的改变：
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//小圆点放大
thumbScale = 2;
if(getWidth() > getHeight()){
//横着 getWidth 表示得到LinearLayout的大小 y不变 x 改变
position = event.getX();
}else {
//竖着 x 不变 y 改变
position = event.getY();
if(position < 0){
position=0;
}else if(position > getHeight()){
position = getHeight();
}
}
callBake();
break;
case MotionEvent.ACTION_MOVE:
//横竖两种情况
//获取当前触摸点的值 x y
if(getWidth() > getHeight()){
//横着 getWidth 表示得到LinearLayout的大小 y不变 x 改变
position = event.getX();
}else {
//竖着 x 不变 y 改变
position = event.getY();
if(position < 0){
position=0;
}else if(position > getHeight()){
position = getHeight();
}
}
callBake();
break;
case MotionEvent.ACTION_UP:
thumbScale = 4;
break;
}
if(style == SLIDER){
//重新绘制
invalidate();
}
return true;
}
5、写一个获取进度值的方法callback（）：
private void callBake(){
if(onSliderChangeListener != null){
if(getWidth() > getHeight()){
progress = position / getWidth();
}else {
progress = position / getHeight();
}
onSliderChangeListener.progressChanged(progress*max);
}
}
6、定义接口和监听器来监听Slider改变值：
public void setMax(int max) {
this.max = max;
}
public interface OnSliderChangeListener{
void progressChanged(float progress);
}
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
PS
今天画板的前期布局主要是进度条的代码设置，进一步的学习了通过代码画图Paint。
