Android 中使用ViewPager实现画廊效果

   <blockquote>     <p>本文章主要介绍使用ViewPager配合android:clipChildren属性来实现画廊效果，网络请求用了Retrofit2，Api使用的是豆瓣开放Api，图片加载使用的是Glide，具体实现效果见图片。</p>    </blockquote>    <p><img src="https://simg.open-open.com/show/16dfaf83be93352ef9efb4f4cdc46875.gif" alt="Android 中使用ViewPager实现画廊效果" width="320" height="569"></p>    <p><strong>clipChildren属性</strong>：clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true，不允许进行扩展绘制。所以我们要实现画廊效果就要设置该属性为false。</p>    <p>1、 xml布局代码</p>    <pre>  <code><?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></code></pre>    <ul>     <li>可以看到LinearLayout的android:clipChildren设置为了false。注意要实现图片中的效果，ViewPager的宽度是不能设为match_parent的，ViewPager宽度与卡片的宽度设置一致即可，我这里给的是250dp。</li>    </ul>    <p>2 、java代码</p>    <ul>     <li> <p>要实现上述卡片缩半透明的效果，还需要用到一个类，ZoomOutPageTransformer，网上有这个类的源码分析，有兴趣的可以去搜索了解下，这里就不贴出来了。</p> </li>     <li> <p>ViewPager初始化代码</p> <pre>  <code>  ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);        adapter = new PageAdapter(MainActivity.this, list);      viewPager.setOffscreenPageLimit(5);        viewPager.setPageTransformer(true, new ZoomOutPageTransformer());</code></pre> </li>     <li>Retrofit2 配置类ApiModule，这里只贴主要的方法，如需了解更多，请查看源码。以下方法用于生成Api请求实例，使用了单例模式，避免频繁创建对象，节约资源，提高性能。 <pre>  <code>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;  }</code></pre> </li>    </ul>    <ul>     <li>获取Api请求对象 <pre>  <code>DouBanService  douBanService = ApiModule.of(DouBanService.class);</code></pre> </li>     <li>网络请求代码。这里用到了一个吃豆豆的Loading，用于网络加载提示，很可爱啊有木有:-D，控件来自第三方开源库，提供了很多样式的Loading可以选择 <a href="/misc/goto?guid=4958970156290691993">传送门</a>。 <pre>  <code>/** * 获取豆瓣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();          }});}</code></pre> </li>    </ul>    <p>3、总结：android永远都比我想象的深，很多东西都需要我们去挖掘。 <a href="/misc/goto?guid=4959672734364817879">源码地址</a>，如果觉得文章对你有用，请动动你的小手指给个赞哦<em>^_^</em>。</p>    <p><br> 文／<a href="/misc/goto?guid=4959672734448617222">馒头先生</a>（简书）<br>  </p>