Android viewpager 与 DepthPageTransformer z-index 问题
Android viewpager with DepthPageTransformer z-index issue
我用 DepthPageTransformer 实现了一个 viewpager,在页面中我有一些输入(收音机、复选框、select 选项 ...)。它工作正常,除了一个有线错误:有时当我点击页面 P1 上的位置(x,y)时,页面 P2 的那个位置的输入被触发。
P1:
P2(P1之后的那个):
现在当我点击页面 P1 上的这个位置时:
我得到 P2 页面显示的 select 选项:
类似于web开发中的z-index问题
DepthPage 转换器的代码与文档中的代码相同:http://developer.android.com/training/animation/screen-slide.html#pagetransformer。
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
知道如何解决这个重叠问题吗?
试试这个:
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
// -------- THIS LINE ---
view.bringToFront();
// -------- THIS LINE ---
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
其他解决方案是使用 OnPageChangeListener:
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
@Override public void onPageSelected(final int position) {
pager.postDelayed(new Runnable() {
@Override
public void run() {
pagerAdapter.getItem(position).getView().bringToFront();
}
}, 300);
}
@Override public void onPageScrollStateChanged(int state) { }
});
效率更高。
您只需要反转绘制顺序:
mPager.setPageTransformer(true, new DepthPageTransformer());
在任何情况下,您都可以玩代码示例 here
我用 DepthPageTransformer 实现了一个 viewpager,在页面中我有一些输入(收音机、复选框、select 选项 ...)。它工作正常,除了一个有线错误:有时当我点击页面 P1 上的位置(x,y)时,页面 P2 的那个位置的输入被触发。
P1:
P2(P1之后的那个):
现在当我点击页面 P1 上的这个位置时:
我得到 P2 页面显示的 select 选项:
类似于web开发中的z-index问题
DepthPage 转换器的代码与文档中的代码相同:http://developer.android.com/training/animation/screen-slide.html#pagetransformer。
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
知道如何解决这个重叠问题吗?
试试这个:
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
// -------- THIS LINE ---
view.bringToFront();
// -------- THIS LINE ---
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
其他解决方案是使用 OnPageChangeListener:
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
@Override public void onPageSelected(final int position) {
pager.postDelayed(new Runnable() {
@Override
public void run() {
pagerAdapter.getItem(position).getView().bringToFront();
}
}, 300);
}
@Override public void onPageScrollStateChanged(int state) { }
});
效率更高。
您只需要反转绘制顺序:
mPager.setPageTransformer(true, new DepthPageTransformer());
在任何情况下,您都可以玩代码示例 here