Android Metro風格的Launcher開發系列第二篇

標籤：

前言：

各位小夥伴們請原諒我隔了這麼久才開始寫這一系列的第二篇部落格，沒辦法忙新產品發布，好了廢話不說了，先回顧一下：在我的上一篇部落格http://www.cnblogs.com/2010wuhao/p/4363041.html寫了如何配置Android開發環境，只是用文字和圖片展示了開發Metro風格Launcher的初步設計和產品要求，這一篇文章將會從代碼上講解如何?對應的UI效果，好了，評書開講！

Launcher主體架構實現：

Launcher主體架構我選用的是大家所熟悉的ViewPager控制項，因為ViewPager可以很容易做pager之間的切換動畫，動畫是可以自訂的，這樣就輕鬆搞定滑出螢幕的各種效果，也可以控制切換速度，這樣就很容易實現如下的效果：

滑動速度控制：

這個是通過擷取ViewPager的Scroller，對Scroller重新設定一些參數就可以了，具體實現的代碼如下：

?

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);

在上面的代碼中用到了ViewPagerScroller.java,在ViewPagerScroller中的設定如下,其中的mDuration變數是自訂的動畫時間，這個你可以根據自己的動畫效果來設定時間長度，我這定義的是500毫秒。

?

1234567891011

@Overridepublic  void  startScroll( int  startX,  int  startY,  int  dx,  int  dy) {     // Ignore received duration, use fixed one instead     super.startScroll(startX, startY, dx, dy, mDuration);}  @Overridepublic  void  startScroll( int  startX,  int  startY,  int  dx,  int  dy,  int  duration) {     // Ignore received duration, use fixed one instead     super.startScroll(startX, startY, dx, dy, mDuration);}

Page之間轉場效果實現

 每一屏page之間的切換是通過實現ViewPager.PageTransformer介面來實現的，具體這個介面的講解我這裡就不介紹了，大家可以參考google官方文檔：Using ViewPager for Screen Slides。我的實現如下所示：

?

12345678910111213141516171819202122232425

class  LauncherPageTransformer implements ViewPager.PageTransformer {     private  static  float  DEFAULT_SCALE = 1.0f;     private  static  float  SCALE_FACTOR = 0.30f; // 縮放因子 0.50f     private  static  float  ROTATION_FACTOR = 20f; // 旋轉因子     private  static  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.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);             }         }     }  }

具體效果可以通過修改旋轉和縮放實現。

左右兩側page懸浮實現：

主畫面page兩側page部分顯示可以通過設定ViewPager的setPageMargin(int margin)方法實現，具體代碼如下：

?

1234567891011121314151617181920212223242526272829

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) {         }     }}

總結

以上就是Launcher主體架構使用ViewPager實現左右滑動和縮放效果講解，寫的不好的地方還請大家指出並批評指正，“三人行必有我師”，任何給我的批評和建議我一定會有回複和交流，可以加我的號，更快的交流。下一篇部落格我將會講解螢幕中每一格CellView實現，有焦點放大效果，實現每一個Focus的CellView懸浮效果和在xml檔案中靈活配置關聯連結等。

 

歡迎關注個人公眾平台:程式員互動聯盟(coder_online)，掃一掃下方二維碼或搜尋號coder_online即可關注,我們可以線上交流。

 

 

摘自：http://www.cnblogs.com/2010wuhao/p/4380008.html

 

Android Metro風格的Launcher開發系列第二篇