我的这个小画板功能有两个方面:改变画笔的颜色和改变画笔的粗细。至于如何实现改变画笔的颜色,我的设想是先通过几个小按钮来控制画笔的颜色,这样我们就可以知道如何在我们编写的画板组件内的线条颜色。之后再改变换画笔颜色的方式(采用拖动条等)。对于画笔的粗细,我是通过一个输入框加一个按钮来确定的。最终的效果如下图:
一、DrewView类;
这个类是继承View类。其中开放了两个方法,changecolor()和changewidth()。这两个函数分别用于改变画笔的颜色和粗细。
package com.example.study; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Point; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; @SuppressLint("ClickableViewAccessibility") public class Drawview extends View{ private List<Point> pointall=new ArrayList<Point>(); int color; float width; public Drawview(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub super.setBackgroundColor(Color.WHITE); super.setOnTouchListener(new Touch()); color=Color.BLACK; } public void changecolor(int color)//修改画笔的颜色 { this.color=color; } public void changewidth(float width)//修改画笔的粗细 { this.width=width; } private class Touch implements OnTouchListener{ @Override public boolean onTouch(View v, MotionEvent e) { // TODO Auto-generated method stub Point p=new Point((int)e.getX(),(int)e.getY()); if(e.getAction()==e.ACTION_DOWN){ //当按下 pointall=new ArrayList<Point>(); pointall.add(p); } else if(e.getAction()==e.ACTION_UP){//当抬起 pointall.add(p); Drawview.this.postInvalidate(); //重绘 } else if(e.getAction()==e.ACTION_MOVE){ pointall.add(p); //移动时候 Drawview.this.postInvalidate(); //重绘 } return true; } } protected void onDraw(Canvas canvas){ Paint p=new Paint(); p.setColor(color);//定义颜色 p.setStrokeWidth(width); if(pointall.size()>1){ Iterator<Point> iter=pointall.iterator();// 现在有坐标点保存的时候可以开始进行绘图 Point first=null; Point last=null; while(iter.hasNext()){ if(first==null){ first=(Point)iter.next(); } else{ if(last!=null){ first=last; //将下一个坐标点赋给上面的 } last=(Point)iter.next(); //不停下指 canvas.drawLine(first.x, first.y, last.x, last.y,p); } } } } }
二、activity_home.xml
这是画板的页面,这里面使用了前面我们新建的drewview类(这是因为drewview是是继承view类的,所以和TextView等使用方法相同)。
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.study.Home12" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="34dp" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="您所选的颜色:" /> <TextView android:id="@+id/test" android:layout_width="50dp" android:layout_height="fill_parent" /> <Button android:id="@+id/standard_color" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="chose_color" android:text="选择标准颜色" /> </LinearLayout> <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="16777215" android:progress="0" /> <LinearLayout android:id="@+id/linearLayout2" android:layout_below="@id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="34dp" > <EditText android:id="@+id/width" android:layout_width="200dp" android:layout_height="wrap_content" android:inputType="numberDecimal" android:text="1.0" /> <Button android:id="@+id/changewidth" android:text="@string/width" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="width" android:textSize="12sp" /> </LinearLayout> <com.example.study.Drawview android:id="@+id/paintview" android:layout_width="fill_parent" android:layout_height="500dp" android:layout_below="@id/linearLayout2" /> </RelativeLayout>
三、home12.java
这是和activity_home.xml相匹配的activity。
package com.example.study; import com.example.study.Drawview; import com.example.study.R; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.DialogInterface.OnClickListener; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.EditText; import android.widget.SeekBar; import android.widget.SeekBar.OnSeekBarChangeListener; import android.widget.TextView; import android.widget.Toast; public class Home12 extends Activity { Drawview dv=null;//用来存放画布视图变量 EditText wid=null; SeekBar sb=null; TextView test=null; int color=0x00000000; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); dv=(Drawview)super.findViewById(R.id.paintview);//获取画布视图 wid=(EditText)super.findViewById(R.id.width);//获取输入的画笔宽度值 sb=(SeekBar)super.findViewById(R.id.seekBar1);//获取拖动条视图 sb.setOnSeekBarChangeListener(new seekbar());//为拖动条视图添加监听 //test=(TextView)super.findViewById(R.id.test); } private class seekbar implements OnSeekBarChangeListener { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { // TODO Auto-generated method stub dv.changecolor(progress+0xff000000); test.setBackgroundColor(progress+0xff000000); } @Override public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub } @Override public void onStopTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.home, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } public void width(View view) { float width; if(wid.getText()!=null) { width=Float.parseFloat(wid.getText().toString().trim()); dv.changewidth(width); } } public void chose_color(View view) { String[] items={"黑色","红色","绿色","蓝色"}; AlertDialog.Builder builder=new AlertDialog.Builder(this); builder.setTitle("选择标准颜色"); builder.setIcon(R.drawable.ic_launcher); builder.setItems(items, new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub int color=0x000000; switch(which) { case 0: color=0; break; case 1: color=16711680; break; case 2: color=65280; break; case 3: color=255; break; } dv.changecolor(color+0xff000000); test.setBackgroundColor(color+0xff000000); sb.setProgress(color); Toast t=Toast.makeText(Home12.this, "color is:"+color, Toast.LENGTH_SHORT); t.show(); } }); builder.setPositiveButton("yes", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }); builder.setNeutralButton("temp2", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }); builder.setNegativeButton("no", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }); //setPositiveButton(builder); builder.show(); } }