1.收获
今天我们学习了做一个画板，在这个画板的实现过程中，用到了许多的东西，也学到了很多的东西，虽然今天没有把画板这个demo做完，但是后面的东西自己都可以做了，虽然还是要花很多的时间，但是这是值得的。今天学的东西很少，但是每一个知识点都是非常重要的，因为大的东西都是由小的东西堆积起来的，所以千万不要小巧每一个知识点。尽管在做的过程中还喷到了问题，但是这些问题不是很大，都是由自己的不小心造成的，所以还是要有一严谨的态度去面对每一次，只有这样形成习惯，才能在以后的工作中，会有出色的成绩。都是为了自己，现在不管是什么困难的，不困难的，都要尽量去克服，这才能够锻炼自己的能力和毅力。
2.技术
（1）约束布局
（2）横竖屏幕的切换
（3）滑动条
（4）监听事件（接口）
3.技术的应用和实践
（1）约束布局（ConstraintLayout）
定义：按照自己的理解就是为了让控件与控件之间的关系更加紧密，对于控件与控件的约束来说是更加严密了，而不像与其他的布局是父容器的练习比较紧密。他减少了布局的嵌套，并且可以代替其他的布局。
用法：
相关的约束
chain属性
（2）横竖屏幕的切换
在这里的横竖屏的切换有两种方法来实现
a配置文件
先要找到配置文件
在配置文件中我们可以利用screenoratation属性来进行设置。
screenOrientation="sensor"//随着屏幕的变化而变化，但是不能倒着
screenOrientation="portrait"//不会随着屏幕变换
screenOrientation="landscape"//固定横屏
screenOrientation="sensorLandscape//感应横屏
b.代码设置
在onResume()设置 因为在屏幕的改变的之前都会调用它
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
@Override
protected void onResume() {
super.onResume();
//设置横竖屏 屏幕随着手机的方向而改变
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
}
效果：
（3）滑动条
a.利用xml进行配置
<!--滑动条-->
<SeekBar
android:layout_width="match_parent"
android:layout_height="20dp"
android:progressBackgroundTint="#0f0"
android:progressTint="@color/colorPrimary"
android:thumbTint="#000000"
android:max="100"
/>
android:progressBackgroundTint="#0f0"//滑动条滑动前的颜色
android:progressTint="@color/colorPrimary"//滑动条滑动后前的颜色
android:thumbTint="#000000"//小圆点的颜色
android:max="100"//最大值
progress 进度条图片
progressBackground 进度条背景图片
Thumb 小圆点图片
b.自定义滑动条Slider
首先我们需要先建一个类
然后我们在这个类中利用paint来绘制进度条
1.添加约束
<swu.xcf.drawbord.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>
2.我们进行画进度条的背景线
设置属性
初始化画笔
linePanit=new Paint(Paint.ANTI_ALIAS_FLAG);
linePanit.setStrokeWidth(linesize);
linePanit.setColor(lineColor);
确定屏幕的方向,开始画线
@Override
protected void onDraw(Canvas canvas) {
if(getWidth()>getHeight()){
//横着
//背景线
canvas.drawLine(0,(getHeight())/2,
getWidth(),(getHeight())/2,linePanit);
}else{
//竖着
canvas.drawLine((getWidth())/2,0,
(getWidth())/2,getHeight(),linePanit);
//画小圆点
canvas.drawCircle(cx,cy,radius,circlepaint);
}
3.画小圆点
首先我们要先确定小圆点的大小和画法
从上图可知，小圆点小圆点的位置并使在线的两端
小圆点的属性
private int cx;//中心点x
private int cy;//中心点y
private int radius;//小圆点的半径
private Paint circlepaint;//小圆点的画笔
private int thumbcolor=Color.MAGENTA;//小圆点的颜色
初始化小圆点的笔
//圆点画笔
circlepaint=new Paint(Paint.ANTI_ALIAS_FLAG);
circlepaint.setStyle(Paint.Style.FILL);
circlepaint.setColor(thumbcolor);
确定小圆点的位置
画小圆点
canvas.drawCircle(cx,cy,radius,circlepaint);
小圆点的移动
private int thumScale=4;//小圆点缩放尺寸基数
private float position;//记录触摸点的坐标
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case MotionEvent.*ACTION_DOWN*: //小圆点放大 thumScale=2;
if(getHeight()<getWidth()){ //横向时 position=event.getX(); }else{ //纵向时 position=event.getY(); } break;
case MotionEvent.*ACTION_MOVE*: //获取触摸点的值 X Y if(getHeight()<getWidth()){ //横向时 position=event.getX(); }else{
//纵向时 position=event.getY(); } break;
case MotionEvent.*ACTION_UP*: thumScale=4;
break; }
invalidate();//重新绘制
return true; }
进度条的绘制
在进度条的绘制是我们考虑到了需不需要小圆点的情况
一个是进度条，一个是滑动条
我们设置了两种风格供外界选择，利用属性的set 方法来进行设置
public static int PROGRESS=0;//进度条
public static int SLIDER=1;//滑动条
private int style=PROGRESS;//样式
set和get方法
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
我们需要进行设置进度跳的最大值和进度
private int max=100;//设置最大值
public float progress;//进度值
以及他们的set和get方法
我们在设置进度是需要注意那个进度条的长短，它会随着屏幕方向不同而不同
所以我们需要进行判断屏幕的方向
public float getProgress() {
return progress;
}
public void setProgress(float progress) {
this.progress = progress;
if (progress < 1.001) {
//将进度值转换为控件中的尺寸位置
if (getHeight() < getWidth()) {
//横向时
position = getWidth() * progress;
} else {
//纵向时
position = getHeight() * progress;
}
postInvalidate();
}
}
public void setMax(int max) {
this.max = max;
}
画进度条
//横屏
if(position>0) {
//画进度条
canvas.drawLine(0, (getHeight()) / 2,
position, (getHeight()) / 2, progressPaint);
}
//竖屏
if(position>0){
canvas.drawLine((getWidth())/2,0,
(getWidth())/2,position,progressPaint);
}
然后我们mainactivity中进行设置
final Slider slider=findViewById(R.id.slider);
slider.setMax(50);
slider.setStyle(Slider.SLIDER);
我们利用时间器让进度条自己进行
new Timer().schedule(new TimerTask() {
@Override
public void run() {
slider.setProgress((float) (slider.getProgress()+0.001));
}
},0,100);
效果：
（4）监听事件（接口）
这里用到接口是为了接收外部给内部传递的进度（动态）就是外部在移动过程中，进度就要到哪
1.创建接口
//接口
public interface OnSliderChangeListener{
void progresschange(float progress);
}
2.记录从外部传来的监听者
//滑动改变的监听者
private OnSliderChangeListener onSliderChangeListener;
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
3.在外部调用接口，并实线皆空的方法
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progresschange(float progress) {
System.out.println(""+progress);
}
});
4对于回调回来的进度进行设置
private void callback(){
if(onSliderChangeListener!=null){
if(getHeight()>getWidth()){
progress=position/getHeight();
}else{
progress=position/getWidth();
}
onSliderChangeListener.progresschange(progress*max);
}
}
