Smart Beijing 01_splash Interface _ Novice Guide Interface _slidingmenu Framework _. Main interface Structure

The focus of smart Beijing is to practice the construction of UI Framework

1, splash screen page (Splash) Development :

It is observed that this splash screen interface has

Rotate animation

Zoom Animation

Transparency Gradient Animation

Reference results

Note: There is no title and the status bar

Changes to desktop icons and names

The icon and label under the application node are configured in the manifest file

Animation implementation: Get the root layout to do animation can

Rotate animation: 0-360, based on itself, to keep the animation end state

Zoom Animation: From 0-1

Alpha Animation: 0-1//Perform more than 1 seconds on other animations for better results

When running, the animation collection

Animationset as = new XXXX (interpolation (jitter effect, whether to share acceleration) true);

2, splash screen page jump page

2.0 animation end Listener, skip to page after end

Get status through SP, whether to enter the Novice boot page

Additional: Encapsulate SP, create Package Utils, create Class Preutils (reference class name)

This tool class, you can get a Boolean value, or you can set a Boolean value (internally encapsulated SP object)

String,int,double, all can be encapsulated

2.1 Novice Guide page (first time in), reference style

Main Page (not first entry)

3, Novice Guide page development and fill, reference UI

The Novice Guide interface here is a Viewpager

Do the most complex first, the last Viewpager has a button (actually always exist, but to the last view above the display), the other three small dots is a suspended on the Viewpager on the LinearLayout

The common practice for the button's ID is to use BTN_XXX to represent

Methods of ①pageradapter

GetCount ()//Return total entries shown in Viewpager

Isviewfromobject (View,object)//Determines whether the currently returned object is a View object View==object

Instantiateitem ()//Initialize an item object

Destoryitem ()//Destroy an Item object, Container.remove ((view) object)//The super here can be deleted

② Initializing data

Create an array of novice boot images, traverse it to create ImageView

Then add it to a collection of mimageviewlist

GetCount () can return the length of this set

Instantiateitem () Gets the imageview of the corresponding index, which can be returned in this ImageView

③ three small gray dots

When initializing the Imageviewe array, the small dot is also initialized

Create a ImageView, create an XML file (make a small dot Shape=oval property)

Specifies a wide height size (which can also be specified here, or it can be specified via the params property)

Set the left margin starting from the second small dot

The layout parameters here generally use the parameters of the parent control linearlayout.layoutparams params =new XXX (Package Contents,-2)

Param.leftmargin = xxx;//Set left margin

④ Red dots, moving to the next point as the guide screen moves

Create an XML file that defines a small red dot (the size is consistent with the small gray dots)

Because this little red dot needs to be pressed on top of the little Gray Point (LinearLayout a relativelayout on a small gray point)

The default is on top of the first little Gray point.

3.2 Page indicator movement of the Little Red dot

When the user's finger is sliding, want the red dot to follow the movement of the finger (moving distance is related to Viewpager)

Parameter confusion, unbound source code (eclipse in Javabuildpath, delete the corresponding package under libraries (because in dependencies do not let the binding source code, and then manually addjar,order and Export page under the check, Not tick also OK, but sometimes error))

Mviewpager.setonpagechangelistener (new Onpagechangelistener) {

Onpageselected ()//call when a page is selected

Onpagescrolled () {///page swipe during the call

Parameter: Position current position

Positionoffset Move offset percent! (You can make the progress of the animation directly)

To update the distance from the Little red dot:

Small red dot move distance = (left margin of small red dot to next small gray dot) x offset percent

Calculates the distance of two dots

Gets the left value by the parent container Getchildat (0) (1) of the small dot, subtracting the distance from the small red dot movement

But the direct fetch is 0, because this time the page may not have finished drawing

Measure>>layout>>ondraw (These three methods are called only if the activity's OnCreate () method has finished executing)

Workaround: Listen to the event at the end of the layout method, and then call get dot spacing after the position is determined

Little Red Dot. Getviewtreeobserver ()//Get View Tree Viewer

. Addongloballlayoutlistener ()//Global layout listener,

In the overridden method, is the callback that the layout method executes at the end of

Just get the distance here.

This method is likely to be executed several times

Get finished Getviewtreeobserver (). REMOVEGLOXXX (this)//remove yourself from

This method has been removed (API16, because the naming is not canonical)

sdk>>tools>>hierarchyviewer.bat//can see the view tree

After opening, select the package name, click Load Vie hierarchy to see the View tree

The red and green dots above the view tree represent three methods (Measure,layout,ondraw method) when it is smooth (execution speed)

}

Onpagescrolledstatechange ()//called when the page state has changed

});

When you get the distance, let the distance * percent, get the distance that the little red dot needs to move

Get the Little Red dot layout parameter (parent container. Layoutparams)

Params.leftmargin = Distance traveled + posintion * pitch

3.4 Start Experience button logic

Hide the button on the top two pages, and the last page is displayed again, with Viewpager's callback for dynamic judgment.

The button also has a status selector

The button text also has the status selector (when setting the text color, you can also set the corresponding color selector)

The color selector is placed under the color folder

Update the information in the SP when you click the Experience button

4. Main interface Structure

Reference result plots include sidebar and content pages

4.1>>> Library Project

① can be marked as a library when creating a project

The difference between a library project and a common project

One more line android.library = true;//If False is a normal item in Projcet.properties

② usage

Features in a library project can be used in other projects (adding library items to other project references)

You can use it (Properties>>android>>add library for the right-click Project in Eclipse)

Unlike jar packages, you can access not only Java files, but also resource files

Note: The Library project you are introducing needs to be under the same drive letter as the current project

4.2 Slidingmenu Open Source Project Introduction

① precautions

Import example Instance code when the error is due to the lack of a library (\abs development Actionbar title bar, after 4.0 to join, 2.X version is not, so the third party's open source framework can be backwards-compatible, here to delete it)

Delete the code in the instance code about Actionbar

② How to use:

Introducing Libraries

Inherit the time with Slidingactivity

If both sides of the frame and fragement will inherit slidingfragmentactivity

OnCreate () method changed to public

Set up Sidebar

Setbehindcontentview ((layout file) ID);

Set Right Sidebar

Slidingmenu = Getslidingmenu () gets Slidingmenu object,

Slidingmenu.setsecondarymenu (layout file);

Slidingmenu.setmode (slidingxxx.left_right);//Setup mode, left and right side bar

Set Global Touch

Slidingmenu.settouchmodeabove (Slidingmenu.touchmode_fullscreen);

Set width

Slidingmenu.setbehindoffset (200);//Set the width of the screen reservation (not the side bar width)

4.3 Projects using Sidebar

① Introduction Library

② set various parameters.

SUPPORTV4 Packet Conflict Problem: the introduction of the library has a supportV4, their own project also has a V4 package, so the conflict, delete their own project on the can.

There is a problem with the red exclamation point in the project, and the Java build path problem, delete the place where x occurs.

Smart Beijing 01_splash Interface _ Novice Guide Interface _slidingmenu Framework _. Main interface Structure