某些设备上的自定义 ViewPager 渲染问题

Posted 2023-04-18

【中文标题】某些设备上的自定义 ViewPager 渲染问题

【英文标题】：Custom ViewPager rendering issue on certain devices

【发布时间】：2014-02-11 17:02:44

【问题描述】：

我开发了一种在应用程序中选择员工的滚动机制。它是自定义视图寻呼机，允许每次在屏幕上显示一个以上的项目（在我的情况下为 3 个），并被两侧的阴影包围。

以下是它在 Nexus 5、Nexus 4、Galaxy S3 等设备上的外观和工作方式：

但在某些设备上，例如（Sony Xperia，以及不同种类的 Motorola），渲染看起来很糟糕，结果如下：

关于我在 @Commonsware 的这篇博文中引用的代码：

http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html

第三个选项你可以找到here的代码。

这是我的相关代码：

PagerContainer：

    public class PagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener 

    private ViewPager mPager;
    boolean mNeedsRedraw = false;

    public PagerContainer(Context context) 
        super(context);
        init();
    

    public PagerContainer(Context context, AttributeSet attrs) 
        super(context, attrs);
        init();
    

    public PagerContainer(Context context, AttributeSet attrs, int defStyle) 
        super(context, attrs, defStyle);
        init();
    

    private void init() 
        //Disable clipping of children so non-selected pages are visible
        setClipChildren(false);

        //Child clipping doesn't work with hardware acceleration in android 3.x/4.x
        //You need to set this value here if using hardware acceleration in an
        // application targeted at these releases.
        if (Build.VERSION.SDK_INT >= 11 && Build.VERSION.SDK_INT < 19)
        
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        
    

    @Override
    protected void onFinishInflate() 
        try 
            mPager = (ViewPager) getChildAt(0);
            mPager.setOnPageChangeListener(this);
         catch (Exception e) 
            throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
        
    

    public ViewPager getViewPager() 
        return mPager;
    

    private Point mCenter = new Point();
    private Point mInitialTouch = new Point();

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) 
        mCenter.x = w / 2;
        mCenter.y = h / 2;
    

    @Override
    public boolean onTouchEvent(MotionEvent ev) 
        //We capture any touches not already handled by the ViewPager
        // to implement scrolling from a touch outside the pager bounds.
        switch (ev.getAction()) 
            case MotionEvent.ACTION_DOWN:
                mInitialTouch.x = (int)ev.getX();
                mInitialTouch.y = (int)ev.getY();
            default:
                ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
                break;
        

        return mPager.dispatchTouchEvent(ev);
    

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
        //Force the container to redraw on scrolling.
        //Without this the outer pages render initially and then stay static
        if (mNeedsRedraw) invalidate();
    

    @Override
    public void onPageSelected(int position)  
        invalidate();
    

    @Override
    public void onPageScrollStateChanged(int state) 
        mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
    

初始化部分：

  //Size View Pager:
    //========================================
    pagerSize = mContainerSize.getViewPager();
    adapter = new MySizePagerAdapter();
    pagerSize.setAdapter(adapter);
    //Necessary or the pager will only have one extra page to show  make this at least however many pages you can see
    pagerSize.setOffscreenPageLimit(adapter.getCount());
    //A little space between pages
    pagerSize.setPageMargin(15);
    //If hardware acceleration is enabled, you should also remove  clipping on the pager for its children.
    pagerSize.setClipChildren(false);

更多的研究让我了解到这个问题与硬件加速或某些设备缺乏硬件加速有关。但是通过代码禁用它也没有帮助我。

【参考方案1】：

我会尝试将 ViewPager 的 layerType 及其子项设置为软件渲染，而不是父框架布局。

您可能还想查看这篇博文：http://udinic.wordpress.com/2013/09/16/viewpager-and-hardware-acceleration/

【讨论】：

感谢您的回答，现在我更清楚为什么会发生这种情况，但是您的解决方案和博客文章中的解决方案仍然没有帮助我。但 +1 表示努力。

【参考方案2】：

我最终使用了 ViewPager 的另一个实现，它给了我相同的结果，但渲染问题在那里看不到，这是代码：

  private class MyTypePagerAdapter extends PagerAdapter 

    @Override
    public Object instantiateItem(ViewGroup container, int position) 

        TextView view = new TextView(getActivity());
        view.setText(mTempBeverageList.get(position).getName().toUpperCase());
        if (!wasTypeChanged && (!isLocaleHebrew  && position == 1))
        
            view.setTypeface(null, Typeface.BOLD);
            view.setTextSize(19);
        
        else
        
            view.setTextSize(16);
        
        view.setSingleLine();
        view.setGravity(Gravity.CENTER);
        view.setTextColor(getResources().getColor(R.color.cups_black));
        view.setBackgroundColor(getResources().getColor(R.color.cups_cyan));
        container.addView(view);
        return view;
    

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) 
      container.removeView((View)object);
    

    @Override
    public int getCount() 
      return mTempBeverageList.size();
    

    @Override
    public float getPageWidth(int position) 
      return (0.33333f);
    

    @Override
    public boolean isViewFromObject(View view, Object object) 
      return (view == object);
    
 

还有初始化部分：

pagerType= (ViewPager) view.findViewById(R.id.pagerType);   
pagerType.setAdapter(new MyTypePagerAdapter());
pagerType.setOffscreenPageLimit(6);