Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to customize Android View to achieve simple artboard function". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to customize Android View to achieve simple artboard function" can help you solve the problem.

Customize VIew to achieve simple artboard effect. The functions include emptying, selecting color and selecting size. The effect is as follows

Artboard layout:

Customize the view GraffitiBroadLayout layout file view_graffiti.xml:

The artboard layout includes a custom graffiti view,recyclerView to display the selected color and size, and three buttons, namely:

Empty, select color, select size

/ / inherit LinearLayout public class GraffitiBroadLayout extends LinearLayout {private final int [] colors = {R.color.greentheR.color.blue}; / / Color array private final int [] sizes = {5pm 10pm 15pm 20}; / / Brush size array 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; / / get layout View mView = LayoutInflater.from (context) .propagate (R.layout.view_graffiti, this,true); initView (); / / initialize and set click event} 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)); / / Click to empty the artboard clearAllBtn.setOnClickListener (v-> mGraffitiView.clearAllPath ()) / / Select brush color selectColorBtn.setOnClickListener (v-> {GraffitiAdapter adapter = new GraffitiAdapter (mContext,colors,1); mRecyclerView.setAdapter (adapter); mRecyclerView.setVisibility (VISIBLE);}); / / Select brush size selectSizeBtn.setOnClickListener (v-> {GraffitiAdapter adapter = new GraffitiAdapter (mContext,sizes,2)) MRecyclerView.setAdapter (adapter); mRecyclerView.setVisibility (VISIBLE);});} / Custom adapter class GraffitiAdapter extends RecyclerView.Adapter {Context mContext; int [] cs; int type;// is used to determine whether to display color or to choose the size 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) {/ / get the item layout View view = LayoutInflater.from (mContext) .correcate (R.layout.itemology recycling recycling graffitiitiparentparentparent.false); return new GraffitiViewHolder (view) } @ Override public void onBindViewHolder (@ NonNull GraffitiViewHolder holder, int position) {if (type = = 1) {/ / Color holder.view.setBackgroundResource (cs [position]); holder.click.setOnClickListener (v-> {/ / set brush color 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-> {/ / set brush 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 layout file

Custom graffiti View:

Public class GraffitiView extends View {the bitmap private Paint mPaint;// brush private final Context mContext; private Canvas mCanvas;// private Bitmap mBitmap;// used to save the painted path 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 () {/ / initialize brush mPaint = new Paint (); mPaint.setColor (mContext.getColor (R.color.green)); / / brush color mPaint.setAntiAlias (true); / / anti-aliasing mPaint.setDither (true); / / jitter mPaint.setStrokeJoin (Paint.Join.ROUND) / / mPaint.setStrokeCap at brush joint (Paint.Cap.ROUND); / / style arc at brush bend mPaint.setStyle (Paint.Style.STROKE); / / Brush format mPaint.setStrokeWidth (10f); / / Brush width mPath = new Path ();} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); width = getMeasuredWidth () Height = getMeasuredHeight (); if (mBitmap = = null) {/ / initialize 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) / / draw the path / / because each touch will generate a new path, direct painting will make the original path disappear, so mCanvas.drawPath (mPath,mPaint); / / draw the path to the bitmap first, and then to the canvas.drawBitmap in the current canvas (mBitmap) / / draw bitmap into the current canvas} / * clear all previous paths * / public void clearAllPath () {mBitmap = Bitmap.createBitmap (width,height, Bitmap.Config.ARGB_4444); mCanvas = new Canvas (mBitmap); mPath.reset (); invalidate () } / * set brush color * @ param resource id * / public void setPaintColor (int resource) {mPaint.setColor (mContext.getColor (resource));} / * set brush size * @ 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 () / / each touch generates a new path mPath.moveTo (XMagy); break; case MotionEvent.ACTION_MOVE: mPath.lineTo (xMagy); invalidate (); break;} return true }} this is the end of the introduction of "how to customize Android View to achieve simple artboard function". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.