Android Metro Style Launcher Development series The second article

Source: Internet
Author: User
Tags home screen

Preface:dear friends, please forgive me for so long to start writing this series of the second blog, no way to busy new product release, good nonsense not to say, first review: In my previous blog Android The Metro Style Launcher Development Series first wrote how to configure the Android development environment, just to show the preliminary design and product requirements for developing Metro style launcher with text and pictures, an article that will explain how to implement the corresponding UI effect from the code, okay, Storytelling!
Launcher Main Framework implementation:        Launcher Main Frame I choose is familiar with the Viewpager control, because Viewpager can easily do pager between the switch animation, animation can be customized, so easy to get rid of the various effects slide out of the screen, you can also control the speed of switching, This makes it easy to achieve the following effects:


  1. sliding speed control:

    This is done by getting Viewpager's scroller, setting some parameters on Scroller, and implementing the Code as follows:

    Field Scroller = ViewPager.class.getDeclaredField ("Mscroller"); Scroller.setaccessible (true); Interpolator interpolator = new Linearinterpolator ();//Set Accelerator Viewpagerscroller Scroller = new Viewpagerscroller (context,interpolator);//Reset Viewpager Scrollerscroller.set (this, scroller);

    In the above code is used in the Viewpagerscroller.java, in the Viewpagerscroller is set as follows, where the mduration variable is a custom animation time, this you can set the length of time according to their own animation effect, I define this as 500 milliseconds.

        @Override public    void Startscroll (int startX, int. starty, int dx, int dy) {        //Ignore received duration, use fixed One instead        super.startscroll (StartX, starty, dx, DY, mduration);    }    @Override public    void Startscroll (int startX, int starty, int dx, int dy, int duration) {        //Ignore received Durat ion, use fixed one instead        super.startscroll (StartX, starty, dx, DY, mduration);    }


  2. page switch effect implemented:
            The switch between each screen page is interface to achieve, the specific explanation of this interface I do not introduce here, you can refer to Google official documents: Using Viewpager for Screen Slides. My implementation is as follows:

    Class Launcherpagetransformer implements Viewpager.pagetransformer {private static float Default_scale = 1.0f; private static float Scale_factor = 0.30f;//scaling factor 0.50f private static float Rotation_factor = 20f;//rotation factor private S    tatic float alpha_factor = 0.8f;  @Override public void Transformpage (view view, float position) {if (position <= 1) {//[ -1,1]// Modify the default slide transition to shrink the page as well if (position < 0) {//VIEW.S                Etrotationy (position * rotation_factor);                View.setscalex (Scale_factor * position + Default_scale);                View.setscaley (Scale_factor * position + Default_scale);            View.setalpha (Alpha_factor * position + 1.0f);                } else {//view.setrotationy (position * rotation_factor);                View.setscalex (Scale_factor *-position + Default_scale); View.setscaley (Scale_factor *-position + Default_scale);                View.setalpha (Alpha_factor *-position + 1.0f); }        }    }}

    Specific effects can be achieved by modifying the rotation and scaling.

  3. Left and right side page hover implementation:

    The Home Screen page is displayed on both sides of the page and can be set by Viewpager the setpagemargin (int margin) method is implemented with the following specific code:

    public class Launcherviewpager extends Viewpager {public static final int page_limit = 3;    Public Launcherviewpager (Context context) {This (context, NULL);        } public Launcherviewpager (context context, AttributeSet Attrs) {Super (context, attrs);    Init (context); } private void Init (context context) {This.setpagemargin (-getresources (). Getinteger (R.integer.portal_viewpager_        margin));        This.setoffscreenpagelimit (Page_limit);        This.setpagetransformer (True, New Launcherpagetransformer ());            try {Field Scroller = ViewPager.class.getDeclaredField ("Mscroller");            Scroller.setaccessible (TRUE);            Interpolator interpolator = new Linearinterpolator ();            Viewpagerscroller scroller = new Viewpagerscroller (context, interpolator);        Scroller.set (this, Scroller); } catch (Nosuchfieldexception e) {} catch (IllegalArgumentException e) {} catch (illegalaccesSexception e) {}}} 

  4. Summarize:

    The above is the launcher main frame using Viewpager to achieve left and right slide and zoom effect explanation, write bad place also please point out and criticize, "three people will have my teacher", any criticism and suggestions I will have to reply and exchange, can add my number, Faster communication.
    Next blog I will explain each of the screen Cellview implementation, with focus amplification effect, to achieve each focus of the cellview suspension effect and in the XML file flexible configuration links and so on.



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.


forwarding Please specify the source!













Android Metro Style Launcher Development series The second 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: info-contact@alibabacloud.com 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.