Android 中使用ViewPager实现画廊效果

最新推荐文章于 2025-03-12 11:11:07 发布

强雷雷

最新推荐文章于 2025-03-12 11:11:07 发布

阅读量2k

点赞数

分类专栏： Android 文章标签： Android 中使用ViewPager

Android 专栏收录该内容

107 篇文章

订阅专栏

本文章主要介绍使用ViewPager配合android:clipChildren属性来实现画廊效果，网络请求用了Retrofit2，Api使用的是豆瓣开放Api，图片加载使用的是Glide，具体实现效果见图片。

Android 中使用ViewPager实现画廊效果

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