[英]Cover Flow feature using view pager android
I have to implement cover flow feature in my app similar to mobikwik app cover flow 我必须在我的应用程序中实现类似于mobikwik应用程序封面流程的封面流程功能
I have already tried with Android CoverFlow widget library and few others. 我已经尝试过使用Android CoverFlow小部件库和其他一些小部件库 。 But nothing working as expected.
但没有任何工作按预期。
How i can achieve this type of view using ViewPager? 我如何使用ViewPager实现这种类型的视图?
I have created my class ZoomOutPageTransformer
,which is implementing PageTransformer
and this set into the pager using setPageTransformer()
method. 我创建了我的课
ZoomOutPageTransformer
,这是实现PageTransformer
使用这种集合到寻呼机setPageTransformer()
方法。 Please check bellow ZoomOutPageTransformer.class
- 请检查以下
ZoomOutPageTransformer.class
-
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 1f;
private static final float MIN_ALPHA = 0.7f;
public ZoomOutPageTransformer(boolean isZoomEnable) {
if (isZoomEnable) {
MIN_SCALE = 0.85f;
} else {
MIN_SCALE = 1f;
}
}
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
float vertMargin = pageHeight * (1 - MIN_SCALE) / 2;
float horzMargin = pageWidth * (1 - MIN_SCALE) / 2;
view.setScaleX(MIN_SCALE);
view.setScaleY(MIN_SCALE);
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(MIN_ALPHA);
view.setTranslationX(horzMargin - vertMargin / 2);
} 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));
vertMargin = pageHeight * (1 - scaleFactor) / 2;
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(MIN_ALPHA);
view.setTranslationX(-horzMargin + vertMargin / 2);
}
}
}
and in PagerActivity.java
- 在
PagerActivity.java
-
public class PagerActivity extends Activity {
ViewPager pager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager = (ViewPager) findViewById(R.id.viewPager);
// mContainer.setViewPager(pager);
PagerAdapter adapter = new MyPagerAdapter();
pager.setPageTransformer(true, new ZoomOutPageTransformer(true));
pager.setAdapter(adapter);
//Necessary or the pager will only have one extra page to show
// make this at least however many pages you can see
// pager.setOffscreenPageLimit(adapter.getCount());
pager.setOffscreenPageLimit(3);
//A little space between pages
pager.setPageMargin((int) getResources().getDimension(R.dimen.dimen_20));
//If hardware acceleration is enabled, you should also remove
// clipping on the pager for its children.
pager.setClipChildren(false);
}
//Nothing special about this adapter, just throwing up colored views for demo
private class MyPagerAdapter extends PagerAdapter {
@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView view = new TextView(PagerActivity.this);
view.setText("Item " + position);
view.setGravity(Gravity.CENTER);
view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50));
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return 9;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
}
}
in main.xml
- 在
main.xml
-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/pager_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#CCC"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginLeft="@dimen/dimen_50"
android:layout_marginRight="@dimen/dimen_50" />
</FrameLayout>
</RelativeLayout>
it works for me. 这个对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.