Mobile Security Guard ------ UI layout and animation of the wizard page on the mobile anti-theft page, ------ ui

Mobile Security Guard ------ UI layout and animation of the wizard page on the mobile anti-theft page, ------ ui

Implementation logic:

• The user clicks the OK button in the dialog box to jump to the page and determine whether the user has previously set the mobile phone anti-theft function.
• If you have set it, You can directly jump to the anti-theft page.
• If you have not set it, go to the settings Wizard Page and configure it accordingly.

Set the Wizard Page:

Technical Features:
1. Custom text style
2. Background of the Custom button
3. UI switching Animation
4. Sliding Screen switching page

Custom text style
Because the layout has many attributes such as the color, font size, top margin, and left margin of the text, you can customize a text style to reduce the coding workload.

The Code is as follows:

 <style name="LostFindText">        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:textSize">24sp</item>        <item name="android:textColor">#000</item>        <item name="android:layout_marginTop">10dp</item>        <item name="android:layout_marginLeft">10dp</item>    </style>

The buttons in the lower-left and lower-right corner of each page are also set as custom styles.

Set the layout of the Wizard Page:

• The upper part is the format in which a widget occupies a row. Therefore, linear layout can be used.
• The four circles in the middle are implemented using a horizontal linear layout.
• The lower half has high requirements on the widget's position layout. Therefore, the relative layout is adopted.

There are also some small icons in the interface, such as pentagram, solid circle, hollow circle, etc. These are android icons. Using icons provided by android can reduce the size of the software.

You do not need to write a linear layout for horizontal arrangement of images and text. You only need to set the drawableLeft (drawableRight) attribute for TextView.

Background of the Custom button

You can set the background of a custom button to be pressed, touched, or in peacetime.
The selector is used.
First, create an xml file in the drawable directory. The Code is as follows:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="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.
When setting the status background, you need to use item each time. android: state_press = true indicates the status when the button is pressed. Android: drawable indicates the background of the image displayed in this status.

Ui switching Animation

The idea of paging Animation:
Obtain the coordinates of the Activity on the screen. Note: The screen coordinates go down to the positive direction of the Y axis.

Then, when you click Next, the point in the upper-left corner of the current page slides from (0, 0) to (-, 0). The point in the upper-left corner of the next page slides from () to (0, 0)
When you click the previous step, the point in the upper left corner slides from (0, 0) to (, 0). The point in the upper left corner of the previous page slides from (-, 0) to (0, 0)

Specific implementation code:

Click the previous step to go To the animation 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 an anim folder under the res directory
• Create an XML file. The root node is translate.
• Internal Attributes:
  
  • FromXDelta X-axis start Coordinate
  • FromYDelta Y axis start Coordinate
  • ToXDelta X axis end Coordinate
  • ToYDelta Y axis end Coordinate
  • Duration animation duration

Use animations in code:
OverridePendingTransition (page entry animation, page exit animation );
Note: This statement can only be called after startActivity () or finish ().

Page flip animation when the user slides the screen

The sliding screen animation function is used on every anti-theft Wizard Page,
Therefore, extract this function to a parent class and let the four wizard pages inherit the parent class.
The four wizard pages use the toPreActivity () and toNextActivity () methods, but the execution content is different. Therefore, we create two abstract methods to the parent class and force the subclass to implement these two methods:

Implementation of sliding pages:

• Create a GestureDetector class

• Instantiate the GestureDetector class
  Detector = new GestureDetector (Context, SimpleOnGestureListener );

• OnFling Implementation Method

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {                if(e1.getRawX() - e2.getRawX() > 150)                {                    toNextActivity();                    return true;                }                if(e2.getRawX() - e1.getRawX() > 150)                {                    toPreActivity();                    return true;                }

In the onFling method, e1 indicates the start point, and e2 indicates the end point. Two coordinates can be obtained through getRawX and getRawY.

Finally, use the gesture reader:

public boolean onTouchEvent(MotionEvent event)    {        detector.onTouchEvent(event);        return super.onTouchEvent(event);    }

Done !!

The entire base class code is as follows:

Package com. vincentliong. mobilesafe0722.activity; import android. app. activity; import android. OS. bundle; import android. view. gestureDetector; import android. view. motionEvent; import android. widget. toast; public abstract class SetupBaseActivity extends Activity {// create a gesture reader private GestureDetector detector; protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // instantiate the gesture reader detector = new GestureDetector (SetupBaseActivity. this, new GestureDetector. simpleOnGestureListener () {// The public boolean onFling (MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {if (e1.getRawX ()-e2.getRawX ()> 150) {toNextActivity (); return true;} if (e2.getRawX ()-e1.getRawX ()> 150) {toPreActivity (); return true;} if (Math. abs (e2.getRawY ()-e1.getRawY () & gt; 200) {Toast. makeText (SetupBaseActivity. this, "cannot slide like this", Toast. LENGTH_SHORT ). show ();} return super. onFling (e1, e2, velocityX, velocityY) ;}}); // use the public boolean onTouchEvent (MotionEvent event) {detector. onTouchEvent (event); return super. onTouchEvent (event) ;}// creates an abstract method and forces the subclass to jump to the next page. public abstract void toNextActivity (); // creates an abstract method, force the subclass to jump to the previous page public abstract void toPreActivity ();}

Copyright statement: the original content that just came out of the box. I hope it will help you ~