Android自定义View实现简易画板功能
本文实例为大家分享了Android自定义View实现简易画板的具体代码，供大家参考，具体内容如下
自定义VIew实现简易画板效果，功能包括清空、选择颜色，选择大小，效果如下
画板布局：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context=".MainActivity"> <!-- 这是一个自定义组合控件，包含涂鸦板及右边三个按钮 --> <com.android.mytest.GraffitiBroadLayout android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
自定义view GraffitiBroadLayout 布局文件 view_graffiti.xml：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:baselineAligned="false"> <!-- 自定义涂鸦板View --> <com.android.mytest.GraffitiView android:id="@+id/graffiti_view" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" /> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:visibility="gone" android:layout_gravity="right" android:layout_marginRight="100dp" android:layout_width="80dp" android:layout_height="wrap_content"/> <!-- 右侧三个按钮 清空、颜色、粗细 --> <LinearLayout android:layout_gravity="right" android:orientation="vertical" android:layout_width="100dp" android:layout_height="match_parent"> <Button android:id="@+id/clear_all" android:layout_width="match_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/select_color" android:layout_width="match_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/select_size" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> </FrameLayout>
画板布局中包括一个 自定义涂鸦view，recyclerView用于显示选择颜色、大小，三个按钮，分别是：
清空、选择颜色、选择大小
// 继承LinearLayout
public class GraffitiBroadLayout extends LinearLayout {
private final int[] colors = {R.color.red,R.color.green,R.color.blue};// 颜色数组
private final int[] sizes = {5,10,15,20};// 画笔size数组
private Context mContext;
private View mView;
private GraffitiView mGraffitiView;
private RecyclerView mRecyclerView;
public GraffitiBroadLayout(Context context) {
super(context);
}
public GraffitiBroadLayout(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mContext = context;
// 获取布局View
mView = LayoutInflater.from(context).inflate(R.layout.view_graffiti, this,true);
initView();// 初始化并设置点击事件
}
private void initView() {
Button clearAllBtn = mView.findViewById(R.id.clear_all);
Button selectColorBtn = mView.findViewById(R.id.select_color);
Button selectSizeBtn = mView.findViewById(R.id.select_size);
mGraffitiView = mView.findViewById(R.id.graffiti_view);
mRecyclerView = mView.findViewById(R.id.recycler_view);
mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext));
// 点击清空 画板
clearAllBtn.setOnClickListener(v -> mGraffitiView.clearAllPath());
// 选择画笔颜色
selectColorBtn.setOnClickListener(v -> {
GraffitiAdapter adapter = new GraffitiAdapter(mContext,colors,1);
mRecyclerView.setAdapter(adapter);
mRecyclerView.setVisibility(VISIBLE);
});
// 选择画笔大小
selectSizeBtn.setOnClickListener(v -> {
GraffitiAdapter adapter = new GraffitiAdapter(mContext,sizes,2);
mRecyclerView.setAdapter(adapter);
mRecyclerView.setVisibility(VISIBLE);
});
}
// 自定义adapter
class GraffitiAdapter extends RecyclerView.Adapter<GraffitiViewHolder>{
Context mContext;
int[] cs;
int type;// 用于判断显示颜色 还是 选择大小
public GraffitiAdapter(Context mContext, int[] cs,int type) {
this.mContext = mContext;
this.cs = cs;
this.type = type;
}
@NonNull
@Override
public GraffitiViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 获取 item 布局
View view = LayoutInflater.from(mContext).inflate(R.layout.item_recycler_graffiti,parent,false);
return new GraffitiViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull GraffitiViewHolder holder, int position) {
if(type == 1){// 颜色
holder.view.setBackgroundResource(cs[position]);
holder.click.setOnClickListener(v -> {
// 设置画笔颜色
mGraffitiView.setPaintColor(cs[position]);
mRecyclerView.setVisibility(GONE);
});
}else if(type == 2){// size
ViewGroup.LayoutParams lp = holder.view.getLayoutParams();
lp.height = sizes[position]*2;
holder.view.setLayoutParams(lp);
holder.view.setBackgroundResource(R.color.black);
holder.click.setOnClickListener(v -> {
// 设置画笔size
mGraffitiView.setPaintSize(sizes[position]);
mRecyclerView.setVisibility(GONE);
});
}
}
@Override
public int getItemCount() {
return cs.length;
}
}
static class GraffitiViewHolder extends RecyclerView.ViewHolder{
View view;
LinearLayout click;
public GraffitiViewHolder(@NonNull View itemView) {
super(itemView);
view = itemView.findViewById(R.id.item_view);
click = itemView.findViewById(R.id.click_view);
}
}
}
item_recycler_graffiti.xml 布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_marginTop="10dp" android:layout_height="50dp" android:gravity="center"> <LinearLayout android:id="@+id/click_view" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="UselessParent"> <View android:id="@+id/item_view" android:layout_width="match_parent" android:layout_height="40dp"/> </LinearLayout> </LinearLayout>
自定义涂鸦View：
public class GraffitiView extends View {
private final Context mContext;
private Canvas mCanvas;//
private Bitmap mBitmap;// 用于保存绘制过的路径的 bitmap
private Paint mPaint;// 画笔
private Path mPath;// 触摸时的路径
private int width,height;
public GraffitiView(Context context) {
this(context,null);
}
public GraffitiView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
private void init() {
// 初始化 画笔
mPaint = new Paint();
mPaint.setColor(mContext.getColor(R.color.green));//画笔颜色
mPaint.setAntiAlias(true);// 抗锯齿
mPaint.setDither(true);// 抖动处理
mPaint.setStrokeJoin(Paint.Join.ROUND);//画笔连接处 圆弧
mPaint.setStrokeCap(Paint.Cap.ROUND);//画笔拐弯处风格 圆弧
mPaint.setStyle(Paint.Style.STROKE);//画笔格式
mPaint.setStrokeWidth(10f);//画笔宽度
mPath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getMeasuredWidth();
height = getMeasuredHeight();
if(mBitmap == null){
// 初始化 bitmap
mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_4444);
}
if(mCanvas == null){
mCanvas = new Canvas(mBitmap);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制路径
// 因为每次触摸都会生成一条新的路径，直接绘制会使原路径消失，因此
mCanvas.drawPath(mPath,mPaint);// 先将路径绘制到 bitmap 上，再绘制到当前画布中
canvas.drawBitmap(mBitmap, 0,0,mPaint);// 将bitmap绘制到当前画布中
}
/**
* 清除之前所有路径
*/
public void clearAllPath(){
mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_4444);
mCanvas = new Canvas(mBitmap);
mPath.reset();
invalidate();
}
/**
* 设置画笔颜色
* @param resource id
*/
public void setPaintColor(int resource){
mPaint.setColor(mContext.getColor(resource));
}
/**
* 设置画笔大小
* @param size size
*/
public void setPaintSize(int size){
mPaint.setStrokeWidth(size);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
float x = event.getX();
float y = event.getY();
switch (action){
case MotionEvent.ACTION_DOWN:
mPath = new Path();// 每次触摸 生成一条新的路径
mPath.moveTo(x,y);
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(x,y);
invalidate();
break;
}
return true;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android多媒体之画画板开发案例分享
先看看效果: 其实画画板的原理很简单,就是首先记录下按下屏幕的点,然后每移动一下就让这两次移动的点连线,周而复始,图像就由很多条直线构成了. 核心代码 : public class MainActivity extends Activity implements OnClickListener,OnSeekBarChangeListener { private View red_view,green_view,blue_view; //控制画笔颜色的三块区域 private SeekBar se
-
Android编程实现画板功能的方法总结【附源码下载】
本文实例讲述了Android编程实现画板功能的方法.分享给大家供大家参考,具体如下: Android实现画板主要有2种方式,一种是用自定义View实现,另一种是通过Canvas类实现.当然自定义View内部也是用的Canvas.第一种方式的思路是,创建一个自定义View(推荐SurfaceView),在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制:第二种方式的思路是,先用Canvas绘制一张空的Bitmap,通过ImageView的setImageBitmap()方
-
android实现简单的画画板实例代码
直接看代码,注释都写清楚了 复制代码 代码如下: public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedIns
-
Android画板开发之添加背景和保存画板内容为图片
一.绘制背景 绘制背景的方法有两种: 自己利用canvas进行绘制 利用view的自带方法进行绘制 1.1 canvas绘制背景 自己绘制的背景的方法就是在onDraw回调进行绘制的时候,先draw一个背景,再进行draw原来的内容 override fun onDraw(canvas: Canvas) { super.onDraw(canvas) //先绘制颜色作为背景 canvas.drawColor(Color.BLACK) //画出缓存bitmap的内容 canvas.drawBitma
-
Android采用双缓冲技术实现画板
本文实例为大家分享了Android实现画板的具体代码,采用的技术是双缓冲技术,供大家参考,具体内容如下 1.双缓冲技术的概念 所谓的双缓冲技术其实很简单,当程序需要在指定的View上进行绘制时,程序并不需要直接绘制到该View组件,而是先绘制到一个内存中的Bitmap图片上(就是缓冲),等内存中的Bitmap绘制好之后,再一次性将Bitmap绘制到View组件上. 2.Android采用双缓冲实现画板 实现的思路: 1).定义一个内存中图片,将他作为缓冲区Bitmap cacheBitmap
-
Android实现画板、写字板功能（附源码下载）
前言 本文给大家分享一个使用Android开发写字板功能Dem.简单操作内存中的图像.对图像进行简单的处理.绘制直线.以达到写字板的效果 效果图如下 XML布局代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="
-
Android自定义SurfaceView实现画板功能
接触了这么久的View,总不能一直停留在View里,现在开始呢,就要学习一个新的知识点:SurfaceView,实际上SurfaceView与View的原理都差不多,只是效率和渲染方式上,SurfaceView要优于View,这也是我们写这个的原因.今天就看看这个SurfaceView,好了,下面就是今天要说的效果. 界面很简单,就是一个按钮以及一个画板,先看看界面的代码吧 <LinearLayout xmlns:android="http://schemas.android.com/ap
-
Android画板开发之撤销反撤销功能
一.分析 这篇将会讲解撤销反撤销功能的实现,先讨论一下这个原理是怎么样实现的. 每次撤回的内容,内容是怎么定义呢? 其实就是每一笔,每一笔作为撤回的内容,那每一笔怎么算呢,就是算手指从按下-移动-放开这一个过程就是一笔. 我们只需记录这个过程为一笔,然后用一个已画列表list列表来记录这个过程的paint画笔和路径path. 撤销的时候就把后面的一个数据移到另一个撤销列表 反撤销的时候,就把撤销列表的最后面那条数据移动到已画列表. 然后,还有一个重点,就是画笔的保存数量,上面说记录每一笔画笔,这
-
Android实现画画板案例
本文实例为大家分享了Android实现画画板的具体代码,供大家参考,具体内容如下 ① 准备一个布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools&q
-
Android画板开发之橡皮擦功能
在上一篇实现了简单的画板功能, 这篇实现橡皮擦功能,首先分析一下应该如何实现, 在Andriod有个图像混合(Xfermode)概念,利用这个概念我们就可以实现橡皮擦功能. 一.Xfermode Paint有一个方法setXfermode(Xfermode),这个方法设置图像的混合模式.参数有三个子类: AvoidXfermode PixelXorXfermode PorterDuffXfermode 前面两个因为不支持硬件加速在API 16已经已经过时弃用了. 简单讲一下第三个. 1.1 Po