Android Vector Graphics application development

Exercise 1: A super-simple doodle App

Preparation: Install the ADT Bundle development environment (I use v23, the official download is wall, can download from here).

2. Create a new Android program project.

   A. The SDK minimum version selection API above 16 (to avoid the automatic creation of the APPCOMPAT_V7 project there is a resource missing error), after completion can be changed back to the lower version (using TOUCHVG requires the lowest API 12).

   B. On the Create Activity page, select the default simple layout Blank Activity.

4. Adds a framelayout to the main page layout that will be used as a container for the plot area.

   A. Specify the ID as container below to findViewById(R.id.container) find this layout.

   B. Using framelayout instead of other layout types to make a drawing view container is to avoid touching the drawing causing other adjacent views to interlock the refresh.

6. Add a TOUCHVG reference.

   A. Download the precompiled TOUCHVG package and copy the Touchvg.jar and libtouchvg.so to the Libs of the program project.

   B. If you need to debug into TOUCHVG or Quick View Iviewhelper interface comments, you cannot copy Touchvg.jar, you can copy the TOUCHVG project to the parent directory and import the TOUCHVG project, in the program project Project.Properties Add references in:

   android.library.reference.1=../TouchVG

8. Create a drawing view in Mainactivity.java.

   A. Define the Iviewhelper object and create a drawing view in OnCreate.

       public class MainActivity extends Activity {      private IViewHelper mHelper = ViewFactory.createHelper();      @Override      protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mHelper.createGraphView(this, (ViewGroup) this.findViewById(R.id.container));         mHelper.setCommand("splines");      }

   B. createGraphView activate the next line to setCommand draw the command conveniently. splinesis the command name, more command name see online documentation.

   C. createGraphView change to createSurfaceView create a drawing view based on Surfaceview, suitable for large numbers of graphics or more controls on the page. Use the main thread display when drawing on Normal view, which may cause other views of the page to be refreshed passively. You can draw asynchronously on Surfaceview to avoid cascading refresh problems.

10. Run the program and draw your hands.

Exercise 2: Add a drawing button

1. Add button layouts and button pictures.

   Add five button images to the res/drawable and add a button layout to the Res/layout button_bar.xml:

     <?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="wrap_content"     android:layout_height="fill_parent"     android:orientation="vertical" >     <ImageButton        android:id="@+id/line_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/line" />     <ImageButton        android:id="@+id/select_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/select" />  </LinearLayout>

   Main interface Layout Activity_main.xml:

     <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:id= "@+id/ Horzlayout "android:layout_width=" match_parent "android:layout_height=" match_parent "android:orientation=" H Orizontal "> <include android:id=" @+id/buttons_bar "layout=" @layout/buttons_bar "/> < ; Framelayout android:id= "@+id/container" android:layout_width= "Match_parent" android:layout_height= "Match_parent" > </FrameLayout> </linearlayout>  

3. Add a button response to activate the corresponding drawing command.

     @Override  protected void onCreate(Bundle savedInstanceState) {     .....     initButtons();  }  private void initButtons() {     findViewById(R.id.line_btn).setOnClickListener(new OnClickListener() {        @Override        public void onClick(View v) {            mHelper.setCommand("line");        }     });     findViewById(R.id.select_btn).setOnClickListener(new OnClickListener() {        @Override        public void onClick(View v) {            mHelper.setCommand("select");        }     });  }

5. Run the program again and click the button to draw a variety of shapes. But select the graphic to come out with a few empty buttons.

7. Add Context button Resources, localized string resources. From the precompiled TOUCHVG package, merge res/drawable-hdpi, res/drawable-mdpi, res/values into the program. Where res/values/strings.xml cannot copy files directly, it needs to merge text content.

Exercise 3: Adding auto-save and restore features

After restarting the program or pressing the home key, the drawing will be lost after the program is returned. You can add automatic save and restore functionality.

1. Add Mount_unmount_filesystems and Write_external_storage permissions in Androidmanifest.xml to read and write to external memory.

2. Implement OnDestroy, OnPause, Onsaveinstancestate, onrestoreinstancestate in mainactivity, and invoke functions of similar names in Iviewhelper, respectively. When you create a drawing view, you pass in Savedinstancestate, and the graph is automatically restored when you return to Activity: mHelper.createGraphView(this, layout, savedInstanceState); .

Exercise 4: Increase line width dynamic modification and update functionality

Select a graphic to modify its lineweight properties dynamically (WYSIWYG). The graphic properties that are set when no drawing is selected are applied to the new drawing.

2. Add a slider control to the Activity layout with an ID of linewidthbar and a maximum value of 20, which is a maximum of 20 pixels wide.

4. To set the sliding response in the mainactivity onCreate:

    mLineWidthBar = (SeekBar) findViewById(R.id.lineWidthBar); mLineWidthBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {    @Override    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {        mHelper.setStrokeWidth(progress);    }    @Override    public void onStartTrackingTouch(SeekBar seekBar) {        mHelper.setContextEditing(true);    }    @Override    public void onStopTrackingTouch(SeekBar seekBar) {        mHelper.setContextEditing(false);    } });

   Where setcontextediting is called to avoid committing changes multiple times during the drag of the slider, resulting in multiple undo steps (Undo is implemented below).

6. In order to update the line width slider value after selecting a different graphic, you need to increase the selection to change the viewer:

   mHelper.getGraphView().setOnSelectionChangedListener(new OnSelectionChangedListener() {    @Override    public void onSelectionChanged(IGraphView view) {        mLineWidthBar.setProgress(mHelper.getStrokeWidth());    }});

Exercise 5: Add a color selection box

1. Import the Android-color-picker library in the project. The source code (Com.chiralcode.colorpicker) is added directly here. You can also change to a different color marquee item, such as Holocolorpicker.

2. Add a button to display the Color selection dialog box when clicked:

   findViewById(R.id.colorpicker_btn).setOnClickListener(new OnClickListener() {   @Override   public void onClick(View v) {       new ColorPickerDialog(MainActivity.this, mHelper.getLineColor(),           new OnColorSelectedListener() {               @Override               public void onColorSelected(int color) {                   mHelper.setLineColor(color);               }       }).show();   }});

Exercise 6: Adding Undo/redo functionality

1. Add two buttons to the page layout with IDs undo_btn and redo_btn.

2. Perform the Undo/redo action in the button click Response and prepare to record the undo message:

    findViewById(R.id.undo_btn).setOnClickListener(new OnClickListener() {     @Override     public void onClick(View v) {         mHelper.undo();     } }); findViewById(R.id.redo_btn).setOnClickListener(new OnClickListener() {     @Override     public void onClick(View v) {         mHelper.redo();     } }); mHelper.startUndoRecord(PATH + "undo");

3. An observer who increases the change in graphic content updates the button state when the graphic changes:

   mHelper.getGraphView().setOnContentChangedListener(new OnContentChangedListener() {   @Override   public void onContentChanged(IGraphView view) {       findViewById(R.id.undo_btn).setEnabled(mHelper.canUndo());       findViewById(R.id.redo_btn).setEnabled(mHelper.canRedo());   }});

All source code is open on GitHub and welcome to the trial review.

Android Vector Graphics application development