Build your own Android Metro interface

Source: Internet
Author: User


Everyone small partners, again to the weekly update article time, originally was Sunday can send out, this is not to catch the tomb-sweeping day, the Queen said, two days before the Qingming Festival to play with her, only left me Monday afternoon half a day to write a blog, where there is a queen where there is oppression ah have wood! All right, gossip. Less, on a blog (Android Metro style of the Launcher Development series, the second article) said Launcher main framework with Viewpager to achieve, this blog let us say each page of the specific implementation.


Launcher the main body Viewpager implementation leads to the Pageradapter,pageradapter is the class in the ANDROID.SUPPORT.V4 package, its subclasses have Fragmentpageradapter, Fragmentstatepageradapter, these two adapter are fragment adapter, because there is no use of fragment here, I only talk about Pageradapter.  As for Pageaapter's description, the original version of Google's website is this: Base class providing the adapter to populate pages inside of a viewpager. You'll most likely want to use a more specific implementation of this, such as Fragmentpageradapter or fragmentstatepage Radapter, roughly speaking, Pageradapter is an adapter provided by Viewpager, which allows us to control every view of Viewpager. This is how my pageradapter is implemented:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 publicclassLauncherAdapter extends PagerAdapter {     privateArrayList<PageViewItem> mViews;      publicLauncherAdapter(ArrayList<PageViewItem> views) {         mViews = views;     }       @Override     publicvoiddestroyItem(View arg0,  intarg1, Object arg2) {         ((ViewPager) arg0).removeView(mViews.get(arg1));     }      @Override     publicvoidfinishUpdate(View arg0) {     }      @Override     publicintgetCount() {         if(mViews != null) {             returnmViews.size();         }         return 0;     }      publicView getCurrentView( intcurrentID) {         returnmViews.get(currentID);     }      @Override     publicObject instantiateItem(View arg0,  intarg1) {         ((ViewPager) arg0).addView(mViews.get(arg1));         returnmViews.get(arg1);     }      @Override     publicboolean isViewFromObject(View arg0, Object arg1) {         return (arg0 == arg1);     }      @Override     publicvoidrestoreState(Parcelable arg0, ClassLoader arg1) {     }      @Override     publicParcelable saveState() {         returnnull;     } }


Each view returned by the Pageradapter Getcurrentview method is a custom view, why customize it? Because each icon gets the focus magnified with the icon next to the overlapping part, viewpager each page view is a framelayout, when the view is drawn in a certain sequence, You will encounter the focus when the view is magnified and the effect is partially pressed by the view next to it, you cannot avoid this problem if you do not change the view drawing order.

As shown, figure one shows that the focus view zooms in, changing the rendering order. Changing the drawing order is actually rewriting ViewGroup's getchilddrawingorder (int childCount, int i) method, and each time it is drawn, it returns the index in the ViewGroup where Focusview is located.


As shown, each square view I'm here is called Cellview, which is also a custom view, which is designed primarily to achieve:

1, Zoom in and lose focus when the focus to reduce the effect, here is the application of property animation, Viewpropertyanimator can be obtained through the view of the animate () method, the specific animation is implemented as follows:

1234   Mprop Ertyanimator.scalex ((Width + mscalex)  / width)                            . ScaleY ((Height + mscaley)  / height). Setduration (duration)                           . Setinterpolator ( new   Decelerateinterpolator ())                           . Start ();

2, in the XML file flexible configuration of some Cellview properties, such as click Open Application, the display of the icon to get the address, focus x, y amplification value, etc., cellview corresponding attribute definition Attrs.xml file as follows:

123456789101112131415161718192021 <?xml version= "1.0"encoding= "utf-8" ?><resources>      <declare-styleable name= "Launcher_ScaleView" >         <attr name= "parentID"format= "integer"/>         <attr name= "resUrl"format= "string"/>         <attr name= "resType"format= "integer"/>         <attr name= "isRightEdge"format= "boolean"/>         <attr name= "isLeftEdge"format= "boolean"/>         <attr name= "isTopEdge"format= "boolean"/>         <attr name= "isBottomEdge"format= "boolean"/>         <attr name= "scaleX" format= "integer"/>         <attr name= "scaleY"format= "integer"/>         <attr name= "packageName"format= "string"/>         <attr name= "activityName"format= "string" />         <attr name= "intentKey"format= "string"/>         <attr name= "intentValue"format= "string"/>         <attr name= "focusType"format= "integer"/>     </declare-styleable> </resources>

3, realize in the remote control to move the focus without focus confusion, in the development of remote control applications, a big problem is the focus on the movement of focus confusion, basically apply UI bug at least half of the focus bug, this application I have to prevent the focus of confusion defined Cellview boundary properties , the XML file above is Isxxedge, so that when the focus moves to the boundary, you can switch between the page and other processing, to prevent the focus from entering each page when the confusion.

Here's a look at the specific effect of the implementation:

Summary: The above is the Metro Style Launcher implementation, I used three blog to explain the application, all the effect of the implementation are their own groping, there should be a better way to achieve, we can communicate a lot of their views, you can also pay attention to my number Coder_online , above thank you!

The first time to get blog update reminders, as well as more technical information sharing, welcome to the personal public platform: Programmer Interaction Alliance (coder_online), sweep the QR code below or search number Coder_online can pay attention to, we can communicate online.

Build your own Android Metro interface

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.