当前位置: 首页 > 编程笔记 >

Android ViewPager画廊效果详解及实例

李华茂
2023-03-14
本文向大家介绍Android ViewPager画廊效果详解及实例,包括了Android ViewPager画廊效果详解及实例的使用技巧和注意事项,需要的朋友参考一下

Android ViewPager 画廊效果

从上面的图片可以看到,当添加多张图片的时候,能够在下方形成一个画廊的效果,我们左右拉动图片来看我们添加进去的图片,效果是不是好了很多呢?下面来看看怎么实现吧!

上面的效果类似Android里面ViewPage的效果,但是跟ViewPager有所不同,ViewPager每次只能显示一张图片。

其实我们是利用到了View的clipChildren属性,我们在这里要把ViewPager以及它的父窗体都设置为false,如下:

android:clipChildren="false"

因为如果clipChildren属性设置为true,就表明我们要将children给clip掉,就是说对于子元素来说,超出当前view的部分都会被切掉,那我们在这里把它设置成false,就表明超出view的部分,不要切掉,依然显示。

xml代码部分:

<!-- 配置Container和pager的clipChildren=false, 并且指定marginLeft 和 marginRight 的值--> 

<LinearLayout 
  android:id="@+id/container" 
  android:layout_width="match_parent" 
  android:layout_height="100dp" 
  android:clipChildren="false" 
  android:gravity="center_horizontal" 
  android:layerType="software" 
  android:orientation="horizontal" > 
 
  <android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginLeft="110dp" 
    android:layout_marginRight="110dp" 
    android:clipChildren="false" > 
  </android.support.v4.view.ViewPager> 
</LinearLayout>

Java代码部分:

// 1.设置幕后item的缓存数目 
mViewPager.setOffscreenPageLimit(3);  
// 2.设置页与页之间的间距 
mViewPager.setPageMargin(10); 
// 3.将父类的touch事件分发至viewPgaer,否则只能滑动中间的一个view对象 
container.setOnTouchListener(new View.OnTouchListener() { 
  @Override 
  public boolean onTouch(View v, MotionEvent event) { 
    return mViewPager.dispatchTouchEvent(event); 
  } 
});

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

 类似资料:
  • 本文向大家介绍Android中ViewFlipper的使用及设置动画效果实例详解,包括了Android中ViewFlipper的使用及设置动画效果实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android中ViewFlipper的使用及设置动画效果。分享给大家供大家参考,具体如下: 说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,ga

  • 本文向大家介绍详解Android实现购物车页面及购物车效果(点击动画),包括了详解Android实现购物车页面及购物车效果(点击动画)的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理。 (2)购物车的动画效果。 (3)购物清单怎么显示(这个我暂时没有写,如果需

  • 本文向大家介绍Vue动画事件详解及过渡动画实例,包括了Vue动画事件详解及过渡动画实例的使用技巧和注意事项,需要的朋友参考一下 为了应用过渡效果,需要在目标元素上使用 transition 特性: transition 特性可以与下面资源一起用: v-if v-show v-for (只在插入和删除时触发,使用 vue-animated-list 插件) 动态组件 在组件的根节点上,并且被 Vue

  • 本文向大家介绍微信小程序的动画效果详解,包括了微信小程序的动画效果详解的使用技巧和注意事项,需要的朋友参考一下 前言 由于公司计划有变,所以从H5页面改成去小程序写。所以在着手开发小程序。本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。 一、什么是微信小程序?   小程序在我的理解中只是高度封装的H5,封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微

  • 本文向大家介绍详解Vue中过度动画效果应用,包括了详解Vue中过度动画效果应用的使用技巧和注意事项,需要的朋友参考一下 一、实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1、利用CSS样式实现过渡效果 1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。 2.v-enter-active: 定义进入过渡的结束状态

  • 本文向大家介绍Android ImageView的selector效果实例详解,包括了Android ImageView的selector效果实例详解的使用技巧和注意事项,需要的朋友参考一下 Android ImageView的selector效果实例详解 在平时开发中如Button我们给它加上selector分别呈现pressed以及normal效果能给我们的用户体验上大大增色不少,可是我们当我