Android Metro Style Launcher Development series The second article

Objective:

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 http://www.cnblogs.com/2010wuhao/p/4363041. html wrote how to configure the Android development environment, just with text and pictures to show the development of Metro style Launcher preliminary design and product requirements, this article will be on the code to explain how to achieve the corresponding UI effect, OK, 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:

Sliding speed control:

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

?

12345

Field Scroller = ViewPager.class .getDeclaredField( "mScroller" );Scroller.setAccessible( true  );Interpolator interpolator =  new LinearInterpolator(); //设置加速器ViewPagerScroller scroller =  new  ViewPagerScroller(context,interpolator); //重新设置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.

?

1234567891011

@OverridepublicvoidstartScroll( intstartX,  intstartY,  intdx,  intdy) {     // Ignore received duration, use fixed one instead     super.startScroll(startX, startY, dx, dy, mDuration);} @Overridepublicvoid startScroll( intstartX,  intstartY,  intdx,  intdy,  intduration) {     // Ignore received duration, use fixed one instead     super.startScroll(startX, startY, dx, dy, mDuration);}

The switch effect between page is implemented

Each screen page between the switch is implemented by implementing the Viewpager.pagetransformer interface, 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:

?

12345678910111213141516171819202122232425

classLauncherPageTransformer implements ViewPager.PageTransformer {     privatestaticfloatDEFAULT_SCALE = 1.0f;     privatestaticfloatSCALE_FACTOR = 0.30f; // 缩放因子 0.50f     privatestaticfloatROTATION_FACTOR = 20f; // 旋转因子     privatestaticfloatALPHA_FACTOR = 0.8f;      @Override     publicvoidtransformPage(View view,  float position) {         if(position <= 1) {  // [-1,1]             // Modify the default slide transition to shrink the page as well             if(position < 0) {                 // 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);             }  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.

left and right side page hover implementation :

The page section on both sides of the Home screen page can be implemented by setting the Viewpager setpagemargin (int margin) method, with the following code:

?

1234567891011121314151617181920212223242526272829

publicclassLauncherViewPager extends ViewPager {     publicstaticfinal  intPAGE_LIMIT = 3;       publicLauncherViewPager(Context context) {         this (context, null);     }      publicLauncherViewPager(Context context, AttributeSet attrs) {         super(context, attrs);         init(context);     }      privatevoidinit(Context context) {         this .setPageMargin(-getResources().getInteger(R.integer.portal_viewpager_margin));         this .setOffscreenPageLimit(PAGE_LIMIT);         this .setPageTransformer( true ,  newLauncherPageTransformer());         try{             Field Scroller = ViewPager. class .getDeclaredField( "mScroller" );             Scroller.setAccessible( true );             Interpolator interpolator =  newLinearInterpolator();             ViewPagerScroller scroller =  newViewPagerScroller(context,                     interpolator);             Scroller.set( this , scroller);         }  catch(NoSuchFieldException e) {         }  catch(IllegalArgumentException e) {         }  catch(IllegalAccessException e) {         }     }}

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.

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.

Excerpt from: http://www.cnblogs.com/2010wuhao/p/4380008.html

Android Metro Style Launcher Development series The second article