Sketchpad App based on Android Studio
** 1. Realize the goal**
With the continuous development of technology and the continuous progress of society, mobile phones are becoming more and more popular and have become a necessary tool for people's daily life and study. People are increasingly inseparable from mobile phones. In the past, mobile phones were only a tool for making calls and sending text messages, but in today's global village, mobile phones have become an indispensable tool for people's work and entertainment in addition to satisfying the basic communication functions. Of course, the mobile phone drawing board has also become a basic app software of the mobile phone. In the past, people had to draw on paper or on the drawing board they carried, which is not very convenient for people's fast-paced life now. The emergence of the mobile phone drawing board has broken this inherent deadlock. It can meet people's urgent drawing needs, which is convenient and fast, and the drawing board can leave room for users to create and design the graphics they want to draw more flexibly. With the continuous development of smart phones, the modes of mobile phone drawing boards are becoming more and more diverse. Different mobile phones have different modes of drawing boards. Or brush to operate. Now most of the sketchpads that come with mobile phones are open to everyone. The mobile sketchpad I designed and implemented has the functions of login and registration, as well as basic pages such as the personal sketchpad center, which can meet people's requirements for privacy in the future.
2. Function analysis
According to the survey reports in recent years, I found that people use mobile phone drawing boards more and more times, and the appearance of mobile phone drawing boards can be said to greatly facilitate people's lives. When you are in a good mood, you can take out your mobile phone and open the mobile drawing board to draw your own beautiful mood. You can record the scene at this moment in the form of a painting. It is also a good thing to watch in your spare time. Of course, when you are in a very bad mood, you can also take out your mobile phone, open the mobile phone drawing board, and vent all your bad emotions on the mobile phone drawing board. You can draw whatever you want. At this time, the drawing board becomes to accompany you through A faithful companion in bad times. So for this idea, I designed and implemented a mobile drawing board APP with a login interface and a registration interface. [4]
Based on this idea, the functional modules of this design are mainly divided into the following:
1. Select the color module for drawing with a brush. By default, the black brush is selected, switched through the color board, and the picture is drawn by sliding on the touch screen.
2. Eraser module. Erase is achieved by drawing a transparent brush to cover.
3. The drawing board clears the module. Redraw its artboard bitmap and clear the canvas.
4. Undo the module. Save its brush path, delete the previous operation when undoing, and call redraw to achieve it.
5. Save the drawing module. First create a file in the local folder. By default, /sdcard/Pictures/ is created. Since the name of the file cannot be repeated, it uses the format of yyyy_MM_dd_HH_mm_ss.png named by the current time. Then copy the picture.
3. Interface Design
Homepage: The first interface is the registration and login interface. The interface is reserved for the improvement of the subsequent program, which is divided into two parts: user name and password. The user name supports English and Chinese, and the password is a mixture of 8-16 English numbers. The control uses horizontal and vertical layouts for constraints. Also select a background image for the control.
Sketchpad page: This interface should be as concise and clear as possible, highlight the key points, set the brush, eraser, save, clear screen and undo key to a gray background image, set the sketchpad to a white canvas by default, use a black brush by default, and switch the color to the right side of the layout for the convenience of users click. The user's information is displayed in the blank column above the drawing board, and later expansion can be designed and clicked to switch the personal information page.
4. Programming
Program design mainly includes two parts: XML file design and MainActivity design. Among them, the XML file is the design of partial files, which needs to be carefully revised, and finally achieve the unity of the format and the beauty of the display. The design of MainActivity is to instantiate components to realize the functions designed by APP. The overall program design is the structure of the total score, the advanced design of the main page, and then the program of each sub-interface is carried out separately, and the program design of each interface is based on the principle of starting from the function. The basic ideas mainly include the following points: First, define the global variables, and then connect the components and variables in the XML file. When the XML file is used for page layout, related effects are achieved by adding components. In this design, there are components such as TextView, EditView, ImageView, and button to realize the rendering of the sketchpad function. Secondly, design functional entities in MainActivity to complete the basic purpose of program design. The functional entity is how to achieve the design purpose. In this design, it is necessary to realize user login, drawing, erasing, clearing, changing color, undoing, and saving. Therefore, it should be implemented one by one in the main function. When the user has a new action, it can respond in time. In order to give full play to the user's imagination, the interface of this design adopts brighter colors and more vivid pictures.
The direction of post-expansion optimization is two points:
1. Increase the server to upload the saved pictures to the server cloud space to avoid loss of pictures locally. At the same time reduce the disk space occupied by the client. Add extended functions on the client side: set other modules such as circular, triangular, and rectangular spray paint.
2. Based on the current client, complete a small game where you draw and guess, and add the player client to a room to perform one-person drawing and the rest of the players to guess the answer in a polling manner. (A point system can be used for ranking).
The basic idea of writing the entire program is shown in the figure below:
Program Design Flowchart
5. Execution Process
The first step, the first interface entered by clicking the app at the beginning is the login registration interface, which uses a combination of horizontal layout and vertical layout. As shown in the picture:
Click to log in (rewrite the click function) to realize the page jump and pass the user name to the sketchpad interface for display. Intent is used here. Intent is an important way to interact between components in Android programs. It is generally used to start activities. Intent can transfer data when starting Activity. Through the putExtra() method provided in the intent, temporarily store the user name to be transferred in the intent, and when the drawing board activity is started, the data is taken out of the intent cache and displayed on the corresponding control. [5]
In the second step, when we click to log in, we will jump to the next sketchpad interface, on which is a textview to display the user name. The default is the state of the brush, and the width of the brush is 10 pixels by default.
Erase the drawn graphics by clicking the eraser. As shown in the figure:
the Paint class is used to initialize the brush. The mobile phone screen event processing method uses onTouchEvent and then binds the monitor event screen to press the record coordinate position to move the screen, draw graphics (redraw), and update coordinates. The screen lifts up, saving the path. The functions of the brush and eraser are similar, one is a colored pen and the other is a transparent color used to erase the coverage to realize the function of the eraser.
The third step is to realize the switching of the four colors, clearing and redrawing the drawing board. As shown in the figure:
each color block is an ImageView to set the color of the brush in the paint by listening to onclick. When the artboard is cleared, a message prompt box will appear. Click OK to clear the saved path and turn the bitmap into a transparent color for redrawing.
The fourth step is to return to the previous step by undoing, and then click to save the picture to a local folder. As shown in the picture:
Every time a stroke is drawn, its path must be saved and stored in a linked list. The path of the linked list head is deleted by triggering the undo event, and the next head is used as the new path head and then called to redraw. To save the picture, you need to create a file in the local folder first. The default one is /sdcard/Pictures/, because the name of the file cannot be repeated, and the format of yyyy_MM_dd_HH_mm_ss.png is used to name it according to the current time. Then copy the picture.
6. Test
2.6.1 Functional correctness test
Functional test refers to a series of tests to check whether the system meets the user's needs, whether it can run smoothly, and various processes can run smoothly. After several tests, registration, login, erasing the drawing board, creating a new drawing board, logging out and saving the drawing board can all be normal without bugs.
2.6.2 Interface usability test
Understandability: The interface is simple and beautiful, and easy to understand. Ease of learning: The interface is simple, the process is simple, and it is relatively easy to learn. Ease of operation: Everyone can operate it easily, the operation is simple, and there is nothing difficult to compare the price.
2.6.3 Compatibility Test
By using 5 different Android phones for testing, the program can run normally without bugs, running smoothly and with strong compatibility.
Results and Analysis
After testing and improvement, the basic functions of drawing, erasing, clearing, changing color, undoing and saving are completed. The login page is a resource picture found on the Internet as the background of the login page, which can be entered when the user clicks the login button. On the artboard page, start with the default brush state, 10 pixels. Click the color switch to change, and draw according to the user's favorite color. Very scalable. Use the erase function to make wrong changes. If you don’t want it, you can undo it. When you want to recreate a drawing board, click Clear. You can save the pictures you draw and save them locally. folder. When the user clicks to exit, the normal use of the program is completed. The execution process is basically consistent with the theoretical function design.
Summarize
As APP application development is becoming more and more popular in smart terminal systems, I designed and implemented a sketchpad APP based on Android Studio. I encountered many problems in the process of writing. I thought the drawing board was really simple, but it was really difficult to do it, which was completely different from what I imagined. First of all, in order for users to have a good user experience, it takes a lot of time to modify the interface. Because I know that a good UI interface is an important place in an App. In the process of designing and implementing the entire App, I also encountered many difficulties and confusions. The biggest confusion is where to save when the user finishes drawing the pavilion shape, and where is the best place to save it. This problem bothers me. I haven’t figured out how to solve it for a long time. I just started thinking that we should build a database to store the paintings made by each user. After logging in, different users must first get the cabinets they have drawn in the corresponding database. The shape is placed on the My Gallery interface. But then there was a big problem in the establishment of the corresponding database, so I sent a signal to my teacher and classmates for help, and got many kinds of responses. naming. It will not cause the picture file to be overwritten because the file name is the same.
The functions of the APP are basically realized, but there is still a lot of room for improvement, such as the optimization of the interface and the addition of system functions, etc. can be done better. So in my future life and work, I will continue to enrich the functions of the APP, and constantly beautify the interface of the APP, making it a perfect APP. a lot of. Both self-study ability and logical ability have been greatly improved. This can be said to be a very good experience, and I am very glad that I can have such an opportunity.
Reference link: https://www.jianshu.com/p/9552ac7679e9
Sketchpad APP
link: https://pan.baidu.com/s/1G5wdcPC91qLnMSZOW2JuxQ
Extraction code: n95u