Mobile Security defender------Mobile Anti-Theft page UI layout and animation of the Completion wizard page

Implementation logic:

• The user clicks the OK button of the dialog box, jumps the page to determine whether the user has previously set up the mobile phone anti-theft function
• If set, jump directly to the anti-theft page
• If not set, go to the Setup Wizard page and configure it accordingly.

On the Settings Wizard page:

Technical point of the function:
1. Custom Text Style
2. Customizing the background of the button
3. Animation of the interface switch
4. Swipe the screen to toggle the page

Custom Text Style
Because the layout has a lot of text in the color, font size, top margin, left margin and other properties are the same, so customize a text style, reduce the coding effort

The specific code is as follows:

<stylename="Lostfindtext"> <Item name="Android:layout_width">wrap_content</Item> <Item name="Android:layout_height">wrap_content</Item> <Item name="Android:textsize"> -sp</Item> <Item name="Android:textcolor">#000 </item><Item name="Android:layout_margintop">Tendp</Item> <Item name="Android:layout_marginleft">Tendp</Item> </style>

At the same time is set to customize the style of the bottom left corner of each page, the lower right corner of the button, no longer repeat.

To set the layout of the wizard page:

• The top half is a single row of controls, so it can be implemented with a linear layout.
• Four circles in the middle, with a horizontal linear layout to achieve
• The lower half of the control has a higher placement requirement, so the relative layout is used

There are also small icons in the interface, such as a pentagram, a solid circle, and a hollow circle, all of which are icons of Android itself. Use Android's own icon to reduce the volume of your software.

When the picture and text are arranged horizontally, you do not need to write the linear layout separately, just set the Drawableleft (Drawableright) property to TextView

Customizing the background of a button

By customizing the background of the button, you can set the button to be pressed, touched, and then separate into different picture backgrounds.
The selector selector is used.
First, create an XML file in the Drawable directory, with the code implementation:

<?xml version= "1.0" encoding= "Utf-8"?  <selector  xmlns:android  = "http://schemas.android.com/apk/res/android" ;  <item  android:state_pressed  =< Span class= "Hljs-value" > "true"  android:drawable  =  "@drawable/function_greenbutton_pressed" /> item  android:state_pressed  =" false " android:drawable  =" @ Drawable/function_greenbutton_normal "/> </ selector ;  

Analysis: The root node is selector and the namespace is set to Android itself.
When setting the state background, each time you want to use Item,android:state_press=true to represent the state of the button when it is pressed. Android:drawable represents the picture background displayed in this state

Animation of interface Switching

The idea of page flipping animation:
Gets the coordinates of the activity on the screen, note that the screen coordinates are down to the y-axis positive direction.

Then, click Next, the equivalent of the current page in the upper left corner of the point from (0,0) slide to ( -100,0), the next page in the upper left corner is from (100,0) slid to the (0,0)
Click on the previous step, the upper left corner of the point from (0,0) slide to (100,0), the previous page in the upper left corner is from ( -100,0) slide to (0,0)

Specific implementation code:

Click on the previous step to enter the animation of the page:

<translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="500"    android:fromXDelta="-100%p"    android:fromYDelta="0"    android:toXDelta="0"    android:toYDelta="0"    ></translate>

Analysis:

• Create the Anim folder in the Res directory
• Create a new XML file with the root node translate
• Internal properties:
  
  • Fromxdelta x-axis start coordinates
  • Fromydelta y-Axis start coordinates
  • Toxdelta x-axis end point coordinates
  • Toydelta y-axis end point coordinates
  • Duration Animation duration

To use animations in your code:
Overridependingtransition (page Entry animation, page exit animation);
Note: This statement can only be called after startactivity () or Finish ()

Flip-page animations when users swipe the screen

Because of the ability to perform animations on the swipe screen, every Anti-Theft wizard page will be used,
Therefore, to extract this function into a parent class, let the four wizard pages inherit from the parent class.
The four wizard pages use the topreactivity () and Tonextactivity () methods, but the content of the execution is different, so we create two abstract methods to the parent class, forcing the subclasses to implement both methods:

The idea of sliding page flipping is realized:

• Create a gesture recognizer: Gesturedetector class

• Instantiate the Gesturedetector class
  detector = new Gesturedetector (Context,simpleongesturelistener);

• Implementing the Onfling Method

publicbooleanonFlingfloatfloat velocityY) {                if150)                {                    toNextActivity();                    returntrue;                }                if150)                {                    toPreActivity();                    returntrue;                }

In the Onfling method, E1 represents the starting point, E2 represents the end point, and two coordinates are obtained through GETRAWX and Getrawy.

Finally, use the gesture recognizer:

publiconTouchEventevent)    {        detector.onTouchEvent(event);        return super.onTouchEvent(event);    }

Get!!

The entire base class code is as follows:

 Packagecom.vincentliong.mobilesafe0722.activity;Importandroid.app.Activity;ImportAndroid.os.Bundle;ImportAndroid.view.GestureDetector;ImportAndroid.view.MotionEvent;ImportAndroid.widget.Toast; Public Abstract  class setupbaseactivity extends Activity{    //Create gesture Recognizer    PrivateGesturedetector detector;protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);//Instantiate gesture recognizerdetector =NewGesturedetector (setupbaseactivity. This,NewGesturedetector.simpleongesturelistener () {//When the finger slips, the action performed             Public Boolean onfling(Motionevent E1, motionevent E2,floatVelocityx,floatVELOCITYY) {if(E1.GETRAWX ()-e2.getrawx () > Max) {tonextactivity ();return true; }if(E2.GETRAWX ()-e1.getrawx () > Max) {topreactivity ();return true; }if(Math.Abs (E2.getrawy ()-e1.getrawy ()) > $) {Toast.maketext (setupbaseactivity. This,"can't slide like this.", Toast.length_short). Show (); }return Super. onfling (E1, E2, Velocityx, Velocityy);    }        }); }//Use gesture recognizer     Public Boolean ontouchevent(Motionevent event) {detector.ontouchevent (event);return Super. Ontouchevent (event); }//Create an abstract method that forces the subclass implementation to jump to the next page     Public Abstract void tonextactivity();//Create abstract method, forcing subclass implementation to jump to previous page     Public Abstract void topreactivity();}

Copyright notice: Just out of the original content of the pot, I hope you have help ~

Mobile Security defender------Mobile Anti-Theft page UI layout and animation of the Completion wizard page