-
先上效果图
效果图
- demo地址：https://github.com/chenhao520/TaoPiaoPiaoDemo
-
最近有个需求，在我们平台上写个卖电影票的功能与第三方卖座对接，其中影院进去就会有这样的效果，看一看淘票票效果。
淘票票效果
参照淘票票效果，用viewPager实现，不说了上代码。
viewPager的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="130dp"
android:clipChildren="false"
android:gravity="center_horizontal"
android:layerType="software"
android:orientation="horizontal">
<com.example.administrator.helloworld.cunpiao.ClipViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"></com.example.administrator.helloworld.cunpiao.ClipViewPager>
</LinearLayout>
主要关键点是** Android:clipChildren=”false” **这个属性
1、配置ViewPager 和其父布局的 android:clipChildren属性为”false”. (android:clipChildren表示是否限制子View在其范围内，默认为true. 代码设置setClipChildren(false)) 因为如果clipChildren属性设置为true,就表明我们要将children给clip掉，就是说对于子元素来说，超出当前view的部分都会被切掉，那我们在这里把它设置成false，就表明超出view的部分，不要切掉，依然显示。
注意：setClipChildren(false)在3.0以上版本中，开启了硬件加速后将不能正常工作，所以需要将其设置为软件加速。设置软硬件加速使用 setLayerType(View.LAYER_TYPE_SOFTWARE, null); 也可以在布局文件中添加 android:layerType=”software”
2、设置幕后item的缓存数目。如果一屏展示的pager数目多的话就需要设置此项。
mViewPager.setOffscreenPageLimit(8);//设置缓存数量
3、设置页与页之间的间距
mViewPager.setPageMargin(15);//设置间距
4、设置滑动，点击事件
如果只是简单的实现滑动，可以用设置viewPager父控件的onTouch监听到ViewPager的监听上
ll.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return mViewPager.dispatchTouchEvent(event);
}
});
以上四个步骤基本完成item 一屏显示的功能，但是放大的功能还需要以下代码才能实现.
viewPager的一个方法设置滑动效果mViewPager.setPageTransformer()，所有以我们需要定义一个类实现ViewPager.PageTransformer这个接口
class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.9f;
private static final float MIN_ALPHA = 0.5f;
private float defaultScale = 0.9f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
// view.setAlpha(0);
view.setScaleX(defaultScale);
view.setScaleY(defaultScale);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
// view.setAlpha(MIN_ALPHA +
// (scaleFactor - MIN_SCALE) /
// (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
// view.setAlpha(0);
view.setScaleX(defaultScale);
view.setScaleY(defaultScale);
}
}
}
接下来是点击滑动效果
这就需要自定义viewPager，所以我们就继承ViewPager
/**
* Created by Administrator on 2017/6/14.
* 点击滑动的viewpager
*/
public class ClipViewPager extends ViewPager {
public ClipViewPager(Context context) {
super(context);
}
public ClipViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_UP) {
View view = viewoOfClickOnScreen(ev);
if (view != null) {
int index = indexOfChild(view);
if (getCurrentItem() != index) {
setCurrentItem(indexOfChild(view));
}
}
}
return super.dispatchTouchEvent(ev);
}
/**
* @param ev
* @return
*/
private View viewoOfClickOnScreen(MotionEvent ev) {
int childCount = getChildCount();
int[] location = new int[2];
for (int i = 0; i < childCount; i++) {
View v = getChildAt(i);
v.getLocationOnScreen(location);
int minX = location[0];
int minY = getTop();
int maxX = location[0] + v.getWidth();
int maxY = getBottom();
float x = ev.getX();
float y = ev.getY();
if ((x > minX && x < maxX) && (y > minY && y < maxY)) {
return v;
}
}
return null;
}
}
Ok，以上代码基本完成效果。。
第一次写，格式很烂，希望我爬过的坑不让别人爬。。谢谢！！！
网友评论