1.收獲
今天我們學習了做一個畫板，在這個畫板的實現過程中，用到了許多的東西，也學到了很多的東西，雖然今天沒有把畫板這個demo做完，但是后面的東西自己都可以做了，雖然還是要花很多的時間，但是這是值得的。今天學的東西很少，但是每一個知識點都是非常重要的，因為大的東西都是由小的東西堆積起來的，所以千萬不要小巧每一個知識點。盡管在做的過程中還噴到了問題，但是這些問題不是很大，都是由自己的不小心造成的，所以還是要有一嚴謹的態度去面對每一次，只有這樣形成習慣，才能在以后的工作中，會有出色的成績。都是為了自己，現在不管是什么困難的，不困難的，都要盡量去克服，這才能夠鍛煉自己的能力和毅力。
2.技術
（1）約束布局
（2）橫豎屏幕的切換
（3）滑動條
（4）監聽事件（接口）
3.技術的應用和實踐
（1）約束布局（ConstraintLayout）
定義：按照自己的理解就是為了讓控件與控件之間的關系更加緊密，對于控件與控件的約束來說是更加嚴密了，而不像與其他的布局是父容器的練習比較緊密。他減少了布局的嵌套，并且可以代替其他的布局。
用法：
相關的約束
chain屬性
（2）橫豎屏幕的切換
在這里的橫豎屏的切換有兩種方法來實現
a配置文件
先要找到配置文件
在配置文件中我們可以利用screenoratation屬性來進行設置。
screenOrientation="sensor"http://隨著屏幕的變化而變化，但是不能倒著
screenOrientation="portrait"http://不會隨著屏幕變換
screenOrientation="landscape"http://固定橫屏
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"http://滑動條滑動前的顏色
android:progressTint="@color/colorPrimary"http://滑動條滑動后前的顏色
android:thumbTint="#000000"http://小圓點的顏色
android:max="100"http://最大值
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);
}
}
