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永远都比我想象的深，很多东西都需要我们去挖掘。源码地址，如果觉得文章对你有用，请动动你的小手指给个赞哦^_^。

原文转载：http://www.open-open.com/lib/view/open1462751945204.html

秒客网

Android 中使用ViewPager实现画廊效果

相关文章