2016-01-05 6 views
5

Я реализую ViewPager, который показывает следующие и предыдущие элементы, а также анимирует переходы страниц с помощью ViewPager.PageTransformer. Он имеет эффект уменьшения и уменьшения яркости. Для показа следующего и предыдущего я использую отрицательный PageMargin, padding на viewpager и clipToPadding как false. Вот как это выглядитCentered View Pager со следующим и предыдущим предварительным просмотром и pagetransformer

enter image description here

Что я и хочу. Проблема заключается в том, что PageTransform использует левый край как ссылку, то есть показывает максимальный масштаб, когда изображение касается левого края, а не когда оно находится в центре. Чтобы это исправить, я использовал смещение в коде следующим образом

viewPager.setPageTransformer(false, new ViewPager.PageTransformer() { 
     @Override 
     public void transformPage(View page, float position) { 
      if (position < -1) { 
       page.setAlpha(0); 
      } else if (position <= 1) { 
       float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f)); 
       page.setScaleX(scaleFactor); 
       page.setScaleY(scaleFactor); 
       page.setAlpha(scaleFactor); 
      } else { 
       page.setAlpha(0); 
      } 
     } 
    }); 

я зарегистрировал значение позиции, когда изображение находится в центре и нашли смещение. Но это смещение работает только на устройствах xxhdpi. В xxxhdpi значение равно 0.12068965f. Кроме того, смещение изменяется, когда я изменяю padding на ViewPager. Кроме того, размер предварительного просмотра следующих и предыдущих изменений с использованием dpi.

Вопрос

Как рассчитать обивка, поля и особенно смещения, чтобы сохранить согласованное поведение в различных ПИ?

Код

Вот мой макет, в котором я добавляю ViewPager и его обивка

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="400dp" 
     android:clipToPadding="false" 
     android:paddingLeft="40dp" 
     android:paddingRight="40dp"> 

    </android.support.v4.view.ViewPager> 

    <Button 
     android:id="@+id/swiper" 
     android:text="Animate" 
     android:layout_centerInParent="true" 
     android:layout_below="@id/viewPager" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

</RelativeLayout> 

Вот код ViewPager инициализации:

final ViewPager viewPager = ((ViewPager) findViewById(R.id.viewPager)); 
Resources r = getResources(); 
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120, r.getDisplayMetrics()); 
viewPager.setPageMargin((int) (-1 * px)); 
viewPager.setOffscreenPageLimit(5); 
+0

вы получили какое-либо решение для этого – Pallavi

+0

@Pallavi да. Прошли месяцы, и я не оставил комментариев. Поэтому, хотя я не помню, как, я нашел смещение как 'paddingLeft/page.getMeasuredWidth()'. Проводка полного кода трансформатора в качестве ответа. – gitter

+0

Спасибо за код ..! – Pallavi

ответ

2

Это то, что я в конечном итоге с:

public class ZoomFadeTransformer implements ViewPager.PageTransformer { 

    private float offset = -1; 
    private float paddingLeft; 
    private float minScale; 
    private float minAlpha; 

    public ZoomFadeTransformer(float paddingLeft, float minScale, float minAlpha) { 
     this.paddingLeft = paddingLeft; 
     this.minAlpha = minAlpha; 
     this.minScale = minScale; 
    } 

    @Override 
    public void transformPage(View page, float position) { 
     if (offset == -1) { 
      offset = paddingLeft/page.getMeasuredWidth(); 
     } 
     if (position < -1) { 
      page.setAlpha(0); 
     } else if (position <= 1) { 
      float scaleFactor = Math.max(minScale, 1 - Math.abs(position - offset)); 
      page.setScaleX(scaleFactor); 
      page.setScaleY(scaleFactor); 
      float alphaFactor = Math.max(minAlpha, 1 - Math.abs(position - offset)); 
      page.setAlpha(alphaFactor); 
     } else { 
      page.setAlpha(0); 
     } 
    } 
} 

и я поставил его в качестве

viewPager.setPageTransformer(false, new ZoomFadeTransformer(viewPager.getPaddingLeft(), MIN_SCALE, MIN_ALPHA)); 
+1

Я просто попробовал ваше решение, но если я использую 'ZoomFadeTransformer', я больше не вижу предварительный просмотр следующей и предыдущей страницы. Вы столкнулись с такой же проблемой? – Katharina

+0

@gitter вам удалось сохранить предварительный просмотр предыдущей и последующих страниц? – Raykud