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