Today, I learned the design of the Android drawing board. The content involved includes the Android Touch event, the application of the Spinner component, and of course the canvas, brushes and other related knowledge of the drawing board. Let's talk about my design process.
The design of this article mainly refers to the code of another blogger, and has been modified on his basis. Link: http://429899791.iteye.com/blog/2196928.
Since the original blogger's code is more detailed, I mainly talk about what I added or changed myself.
Change one:
The original drawing board can only draw one line on the drawing board, that is, the original content will disappear after the pen is lifted, and multiple lines can be drawn repeatedly after the change.
The following code:
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){ //When pressed
pointall=new ArrayList<Point>(); //Every time you press the screen, a new array will be created, and the contents of the original array will disappear
pointall.add(p);
}
The problem is found, so to change it, we remove this statement, just remove it is not enough, we also need to set a breakpoint when the second press is pressed to determine that it is the second stroke, so that the line can be drawn multiple times. The main changes are:
- 去掉pointall=new ArrayList<Point>();
- New breakpoint p=new Point(0,0);
- Added if(first.x==0||last.x==0) //It is determined as a breakpoint, and the continue statement is used to jump out of the statement connecting the next point.
The Touch class is changed as follows:
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){ //When pressed
p=new Point(0,0);//Set breakpoints to draw new lines
pointall.add(p);
}
else if(e.getAction()==e.ACTION_UP){//When lifted
pointall.add(p);
paintview.this.postInvalidate(); //重绘
}
else if(e.getAction()==e.ACTION_MOVE){
pointall.add(p); //When moving
paintview.this.postInvalidate(); //重绘
}
return true;
}
}
protected void onDraw(Canvas canvas){
Paint p=new Paint(); //Define the brush
p.setColor(Color.RED); //Define the color
if(pointall.size()>1){
Iterator<Point> iter=pointall.iterator();// Now you can start drawing when there are coordinate points saved
Point first=null;
Point last=null;
while(iter.hasNext()){
if(first==null){
first=(Point)iter.next();
}
else{
if(last!=null){
first=last; //Assign the next coordinate point to the above
}
last=(Point)iter.next(); //Do not stop pointing
if(first.x==0||last.x==0) //It is determined as a breakpoint, use the continue statement to jump out of the statement connecting the next point
continue;
canvas.drawLine(first.x, first.y, last.x, last.y,p);
}
}
}
}
Change 2: Added the function of brush color and brush thickness
First of all, let's talk about the use of Spinning drop-down box (because I checked this online when I was studying, I feel that many of them are mixed with other things, which looks more complicated):
1. Design pages with Spinning tags:
<Spinner
android:id="@+id/colortext"
android:layout_width="97dp"
android:layout_height="match_parent"
android:entries="@array/data"
android:spinnerMode="dialog" />
2. Create a new xml file in the values of the res package to store the array of the drop-down box content, data is the content of the color, data1 is the content of the pen size, the code is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<string-array name="data">
<item>red</item>
<item>Blue</item>
<item>Black</item>
</string-array>
<string-array name="data1">
<item>细</item>
<item>中</item>
<item>粗</item>
</string-array>
</resources>
3. Create a new listener event:
color=(Spinner)findViewById(R.id.colortext);
color.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// TODO Auto-generated method stub
color1= (String) color.getSelectedItem();
if(color1.equals("红色"))
paintview.color1=-1;
else if(color1.equals("黑色"))
paintview.color1=0;
else if(color1.equals("蓝色"))
paintview.color1=-2;
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub
}
});
After completing the relevant preparations, the properties of color and pen size should be set in the code of the principle. Considering that the pen will stop changing every time the pen color and size are changed, these properties are assigned to breakpoints for processing here, because The x coordinate is set earlier to determine whether the breakpoint is broken, so we use the y coordinate to determine what color and size are set.
New set breakpoint information:
if(e.getAction()==e.ACTION_DOWN){ //When pressed
p=new Point(0,color1);//color1 is the value of the color selected by the drop-down box
pointall.add(p);
p=new Point(0,pen);//pen is the value of the brush size
pointall.add(p);
// pointall =new ArrayList<Point>();
}
Increase the color of the judgment pen and set the size:
// Determine the color of the pen if(first.y==0)p.setColor(Color.BLACK);//Set to black else if(first.y==-1)p.setColor(Color.RED);//Set to red else if(first.y==-2)p.setColor(Color.BLUE);//Set to blue // Determine the pen size if(first.y==-10)p.setStrokeWidth(10);//Set the pen size to 10 else if(first.y==-20)p.setStrokeWidth(20);//Set the pen size to 20 else if(first.y==-30)p.setStrokeWidth(30);//Set the pen size to 30
The final paintview code is as follows:
public class paintview extends View{
private List<Point> pointall=new ArrayList<Point>();
static int color1=-1;
static int pen=-10;
public paintview(Context context, AttributeSet attrs) {
super(context, attrs);
super.setBackgroundColor(Color.WHITE);
super.setOnTouchListener(new Touch());
}
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){ //When pressed
p=new Point(0,color1);//color1 is the value of the color selected by the drop-down box
pointall.add(p);
p=new Point(0,pen);//pen is the value of the brush size
pointall.add(p);
// pointall =new ArrayList<Point>();
}
else if(e.getAction()==e.ACTION_UP){//When lifted
pointall.add(p);
paintview.this.postInvalidate(); //重绘
}
else if(e.getAction()==e.ACTION_MOVE){
pointall.add(p); //When moving
paintview.this.postInvalidate(); //重绘
}
return true;
}
}
protected void onDraw(Canvas canvas){
Paint p=new Paint(); //Define the brush
//define the color
if(pointall.size()>1){
Iterator<Point> iter=pointall.iterator();// Now you can start drawing when there are coordinate points saved
Point first=null;
Point last=null;
while(iter.hasNext()){
if(first==null){
first=(Point)iter.next();
}
else{
if(last!=null){
first=last; //Assign the next coordinate point to the above
}
last=(Point)iter.next(); //Do not stop pointing
// Determine the color of the pen
if(first.y==0)p.setColor(Color.BLACK);//Set to black
else if(first.y==-1)p.setColor(Color.RED);//Set to red
else if(first.y==-2)p.setColor(Color.BLUE);//Set to blue
// Determine the pen size
if(first.y==-10)p.setStrokeWidth(10);//Set the pen size to 10
else if(first.y==-20)p.setStrokeWidth(20);//Set the pen size to 20
else if(first.y==-30)p.setStrokeWidth(30);//Set the pen size to 30
if(first.x==0||last.x==0)
continue;
// p.setStrokeWidth(10);
canvas.drawLine(first.x, first.y, last.x, last.y,p);
}
}
}
}
}
The MainActivity code is as follows:
public class MainActivity extends Activity {
private Spinner color;
private Spinner pen;
public String color1="red";
private String pen1="细";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
//Listen to get the color of the brush
color=(Spinner)findViewById(R.id.colortext);
color.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// TODO Auto-generated method stub
color1= (String) color.getSelectedItem();
if(color1.equals("红色"))
paintview.color1=-1;
else if(color1.equals("黑色"))
paintview.color1=0;
else if(color1.equals("蓝色"))
paintview.color1=-2;
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
} });
//Monitor to get the size of the brush
pen=(Spinner)findViewById(R.id.pentext);
pen.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// TODO Auto-generated method stub
pen1= (String) pen.getSelectedItem();
if(pen1.equals("细"))
paintview.pen=-10;
else if(pen1.equals("中"))
paintview.pen=-20;
else if(pen1.equals("粗"))
paintview.pen=-30; }
@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub
}
});}
The final effect is as follows:
Finally, let me mention a new knowledge that I learned this time, that is, the class of paintview can be directly embedded in MainActivity, so that the drawing board will be filled into the main page, so there is no need to create a new xml file for this class to make the page, just add the following declaration to activity_main :
<com.example.paint.paintview
android:id="@+id/paintview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />