Android 中使用ViewPager實現畫廊效果

本文章主要介紹使用ViewPager配合android:clipChildren屬性來實現畫廊效果，網絡請求用了Retrofit2，Api使用的是豆瓣開放Api，圖片加載使用的是Glide，具體實現效果見圖片。

clipChildren屬性：clipChild用來定義他的子控件是否要在他應有的邊界內進行繪制。 默認情況下，clipChild被設置為true，不允許進行擴展繪制。所以我們要實現畫廊效果就要設置該屬性為false。

1、 xml布局代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"   
   android:layout_height="match_parent"   
   android:background="#edebeb"    
   android:clipChildren="false"    
   android:gravity="center"    
   android:orientation="vertical">  
  <android.support.v4.view.ViewPager    
    android:id="@+id/view_pager"    
    android:layout_width="250dp"     
    android:layout_height="match_parent"        
    android:background="#edebeb" />
</LinearLayout>

• 可以看到LinearLayout的android:clipChildren設置為了false。注意要實現圖片中的效果，ViewPager的寬度是不能設為match_parent的，ViewPager寬度與卡片的寬度設置一致即可，我這里給的是250dp。

2 、java代碼

• 要實現上述卡片縮半透明的效果，還需要用到一個類，ZoomOutPageTransformer，網上有這個類的源碼分析，有興趣的可以去搜索了解下，這里就不貼出來了。

• ViewPager初始化代碼

    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);    
    adapter = new PageAdapter(MainActivity.this, list);  
    viewPager.setOffscreenPageLimit(5);    
    viewPager.setPageTransformer(true, new ZoomOutPageTransformer());

• Retrofit2 配置類ApiModule，這里只貼主要的方法，如需了解更多，請查看源碼。以下方法用于生成Api請求實例，使用了單例模式，避免頻繁創建對象，節約資源，提高性能。

  public static <T> T of(Class<T> sClass) { 
   if (apiModule.containsKey(sClass)) {  
      return (T) apiModule.get(sClass);
    }  
   Retrofit retrofit = builder.client(httpClient).build(); 
   T t = retrofit.create(sClass); 
   apiModule.put(sClass, t);   
   return t;
  }

• 獲取Api請求對象

  DouBanService  douBanService = ApiModule.of(DouBanService.class);

• 網絡請求代碼。這里用到了一個吃豆豆的Loading，用于網絡加載提示，很可愛啊有木有:-D，控件來自第三方開源庫，提供了很多樣式的Loading可以選擇 傳送門。

  /** * 獲取豆瓣Api數據 */
  private void LoadData() { 
   loaddingDialog.show();    
   douBanService.getRepoData("20").enqueue(new Callback<ListDTO<SubjectsInfo>>() {
        @Override        
        public void onResponse(Call<ListDTO<SubjectsInfo>> call, Response<ListDTO<SubjectsInfo>> response) {
            Log.e("onResponse", response.body().toString()); 
            list.addAll(response.body().getList());   
            viewPager.setAdapter(adapter);    
            loaddingDialog.cancel();       
    }       
       @Override        
       public void onFailure(Call<ListDTO<SubjectsInfo>> call, Throwable t) {
            Log.e("Throwable", t.getMessage());    
           loaddingDialog.cancel();       
   }});}

3、總結：android永遠都比我想象的深，很多東西都需要我們去挖掘。 源碼地址，如果覺得文章對你有用，請動動你的小手指給個贊哦^_^。

文／饅頭先生（簡書）