使用视图寻呼机 android 的 Cover Flow 功能

Posted 2023-03-14

【中文标题】使用视图寻呼机 android 的 Cover Flow 功能

【英文标题】：Cover Flow feature using view pager android

【发布时间】：2016-03-15 08:12:46

【问题描述】：

我必须在我的应用中实现封面流功能，类似于 mobikwik app cover flow

和 。

我已经尝试过android CoverFlow widget library 和其他一些人。但没有按预期工作。

如何使用 ViewPager 实现这种类型的视图？

【参考方案1】：

我创建了我的类ZoomOutPageTransformer，它正在实现PageTransformer，并使用setPageTransformer() 方法将此设置到寻呼机中。 请查看下面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);

        
    

在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);
        
    

在main.xml-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>
    <FrameLayout
        android:id="@+id/pager_container"
        android:layout_
        android:layout_
        android:layout_centerVertical="true"
        android:background="#CCC"
        android:clipChildren="false">
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:clipChildren="false"
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/dimen_50"
            android:layout_marginRight="@dimen/dimen_50" />
    </FrameLayout>
</RelativeLayout>

它对我有用。

【讨论】：

工作得很好......非常感谢队友！ @Nitish Srivastava

像魅力一样工作。谢谢@Nitish (Y)