Android_开发Day30画板Demo
目的：
做一个画板来训练前面所学过的知识，如何自定义控件
技术：
<1> 界面管理：
界面管理的意思是当你的app中要用到多个界面的时候要怎么管理这么多的界面，最常见的登录界面，第一次使用app时会先跳转到登录界面，在界面没有被销毁的时候又弹出刚才的登录界面那么系统就思考了刚才那个登录界面还没用完呢，到底要创建一个全新的登录界面呢还是将就刚才的那个继续使用呢，针对这个问题界面的管理就相当重要了，配置界面管理最简单的方法就是到menifest里面的Activity标签下去配置，添加一个属性lunchMode，如下图：
配置Activity.png
有如下四个值：
| 值 | 描述 |
|---|---|
| standard | 不管你前面有没有这个界面一律创建一个新的 |
| singleInstance | 我只创建一个，如果前面创建过了我拿来用就是了 |
| singleTask | 与singleInstance差不多，但是它有自己独立的栈 |
| singleTop | 如果我要跳转的新的界面是在栈顶的那个界面，我就将就用栈顶的那个界面，如果不是那就创建一个新的 |
<2> 横竖屏管理：
横竖屏管理就是本app横竖屏切换的管理，是重力感应切换还是只允许横屏或竖屏或者说是点按横屏或竖屏，其实横竖屏的切换在操作系统里面就是有设置的，但是有些时候开发者来自定义比较好
横竖屏的配置还是在menifest里面的Activity标签下去配置，添加一个属性screenOrientation，有许多值常用值如下：
| 值 | 描述 |
|---|---|
| sensor | 根据传感器来，意思就是重力感应来切换 |
| portrait | 规定只能竖屏，并且是正向竖屏 |
| landscape | 规定只能横屏，并且是正向横屏 |
| sensorPortrait | 竖直方向可以感应 |
| sensorLandscape | 横着的方向可以感应 |
上面讲的都是直接在menifest里面配置的，当然也可以在代码中去配置，由于Activity的启动也好还是恢复也罢都会调用onResume()方法因此在这里设置横竖屏再好不过了，一行代码，直接调用setRequestedOrientation()方法就行了，参数传刚才和上面相似的常量，这些常量在一个类ActivityInfo类里面的，有哪些常量自己动手敲一敲就知道了。
<3> SeekBar(滑动条)：
系统的控件中有一个滑动条，有几个可以改变的属性如下表：
| 属性 | 描述 |
|---|---|
| background | 背景颜色 |
| progressTint | 已经走过的进度的颜色 |
| progressBackgroundTint | 未走过的进度的颜色 |
| thumbTint | 小圆点的颜色 |
| max | 自定义进度的最大值 |
以上属性基本上就够用了，如果上面的属性没有Tint的就是可以在对应的位置加图片的
seekbar效果图.png
滑动条不仅仅是一个效果最重要的还要知道它滑动到哪个地方去了，因此需要在代码中监听滑动条的事件，代码如下：
slider.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
//改变中 i 为进度值
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
//开始触摸滑动条
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
//停止触摸滑动条
}
});
日常set一个什么什么listener，new一个什么什么listener然后实现里面的方法，有三个方法分别是改变中(正在改变，也就是正在拖动)，开始拖动，结束拖动如上图代码。
<4>
技术如何使用：
我们要做一个画板，首先考虑的就是画板的布局，左边一个滑动条来调整画笔的粗细，右边一个取色框来取颜色，他们都是紧贴边框的并且相互挨着，中间是绘画区域，因此初步考虑用一个线性布局来做。底部是功能按钮区域，也是一个挨着一个的，因此考虑用线性布局，由于整个程序可以分为上下两个模块，因此也考虑用线性布局，但是实际在做的时候发现横屏的时候会出现超出屏幕的情况，因此整个布局改为约束布局，底部功能区设置为固定高度。又由于中间的绘画区域也会随着横竖屏的改变而变因此需要也将使用约束布局。然后就是左边的滑动条，可以考虑用系统的SeekBar来做，但如果系统的SeekBar不能满足你的要求可以自定义一个滑动条，功能菜单区域可以使用按钮来实现，取色模块也可以使用按钮来操作，下面是代码，仅供参考：
这是xml里面的代码，所有的空间都是在xml里面搭建的
public class Slider extends View {
private int lineSize = 8; //线条的粗细
private int lineColor = Color.BLACK;//默认线条颜色
private Paint linePaint;
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;//默认是进度条
private int max = 100; //最大值
private 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);
//画线progress
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);
//画线progress
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();
if (position < 0) position = 0;
else if (position > getHeight()) position = getHeight();
}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;
case MotionEvent.ACTION_MOVE:
if (getWidth() > getHeight()){
//横向的时候 y不变 x变化
position = event.getX();
if (position < 0) position = 0;
else if (position > getHeight()) position = getHeight();
}else {
//纵向的时候 x不变 y变化
position = event.getY();
if (position < 0) position = 0;
else if (position > getHeight()) position = getHeight();
}
callBack();
break;
default:
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(int progress){
float rate = (float) (progress*1.0 / max);
setProgress(rate);
}
public void setProgress(float progress) {
this.progress = progress;
//将进度值转化为控件的尺寸
if(getWidth() > getHeight()) position = progress*getWidth();
else position = progress*getHeight();
invalidate();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
//将进度值转化为控件的尺寸
if(getWidth() > getHeight()) position = progress*getWidth();
else position = progress*getHeight();
}
public void setMax(int max) {
this.max = max;
}
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
public interface OnSliderChangeListener{
void progressChanged(float progress);
}
}
这是自定义的滑动条，当然也可以使用系统的SeekBar来做
public class DrawBoardView extends View {
private ArrayList graphs;
private ArrayList orgGraphs;
private int lineColor = Color.BLACK;
private int lineSize = 5;
Path mPath;
Paint mPaint;
public DrawBoardView(Context context) {
super(context);
}
public DrawBoardView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(){
//初始化数组
graphs = new ArrayList<>();
orgGraphs = new ArrayList<>();
}
@Override
protected void onDraw(Canvas canvas) {
//遍历数组
Iterator iterator = graphs.iterator();
while (iterator.hasNext()){
Graph line = iterator.next();
//绘制图形
canvas.drawPath(line.path, line.paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//new 一条线
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(lineColor);
mPaint.setStrokeWidth(lineSize);
mPaint.setStyle(Paint.Style.STROKE);
mPath = new Path();
mPath.moveTo(event.getX(), event.getY());
Graph temp = new Graph(mPaint, mPath);
graphs.add(temp);
orgGraphs.add(temp);
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
invalidate();
return true;
}
public int getLineSize() {
return lineSize;
}
public void setLineSize(int lineSize) {
this.lineSize = lineSize;
}
public int getLineColor() {
return lineColor;
}
public void setLineColor(int lineColor) {
this.lineColor = lineColor;
}
//管理图形的画笔和路径
private class Graph{
Paint paint;
Path path;
public Graph(Paint paint, Path path){
this.paint = paint;
this.path = path;
}
}
public void removeLast(){
if (graphs.size() > 0){
graphs.remove(graphs.size()-1);
invalidate();
}
}
public void removeAll(){
graphs.clear();
invalidate();
}
public void returnToLastStep(){
//判断缓存中是否有
if (graphs.size() < orgGraphs.size()){
//获取上一步的索引值
int index = graphs.size() - 1 + 1;
graphs.add(orgGraphs.get(index));
//刷新
invalidate();
}
}
}
这是中间的画板的控件
public class MainActivity extends AppCompatActivity {
private DrawBoardView boardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Slider slider = findViewById(R.id.slider);
slider.setStyle(Slider.SLIDER);
slider.setMax(30);
boardView = findViewById(R.id.board);
slider.setProgress(boardView.getLineSize());
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progressChanged(float progress) {
//将滑动条的进度值设置为相应的宽度
boardView.setLineSize((int) progress);
}
});
}
@Override
protected void onResume() {
super.onResume();
//设置横竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
}
//选择颜色
public void choseColor(View view) {
//获取按钮上面的背景颜色
ColorDrawable drawable = (ColorDrawable) view.getBackground();
//获取颜色
boardView.setLineColor(drawable.getColor());
}
//撤销
public void goBack(View view) {
boardView.removeLast();
}
//清空
public void clear(View view) {
boardView.removeAll();
}
//橡皮擦
public void eraser(View view) {
boardView.setLineColor(Color.WHITE);
}
//保存
public void save(View view) {
}
//上一步
public void lastStep(View view) {
boardView.returnToLastStep();
}
}
这是MainActivity里面的代码
实际使用效果：
画板运行结果图.png
总结：
此次画板的demo主要是训练path的灵活运用，以及常见的一些基本功能的做法，同时也要学会解决布局和控件自定义的问题，什么时候该用自定义控件，怎么自定义控件。