2017-01-20 13 views
4

У меня проблема с тенями, которые создаются с помощью Elevation.Тени, созданные с мерцанием Elevation при изменении фрагментов в ViewPager

Мой экран состоит из ViewPager с 4 различными Fragments и TabLayout для навигации. Первый и последний фрагменты содержат RecyclerView, который заполнен элементами CardView. Всякий раз, когда я переключаюсь между страницами 1 и 4, тени ниже CardView элементов сначала появляются с позиции и защелкиваются в правильное место после того, как прошло около полутора секунд.

Это происходит только при переключении между соседними фрагментами в ViewPager. Если я двигаюсь в порядке от 1 до 4, это не происходит.

У каждого другого элемента с Elevation установлен этот номер, а не только CardView.

реализация Мои ViewPager:

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); 
mViewPager = (NoSwipeViewPager) findViewById(R.id.container); 
mViewPager.setAdapter(mSectionsPagerAdapter); 
mViewPager.setOffscreenPageLimit(4); 
tabLayout.setupWithViewPager(mViewPager); 

Один из CardViews используется в RecyclerView

<android.support.v7.widget.CardView 
     style="@style/Custom.CarView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     card_view:cardUseCompatPadding="true" > 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/white" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/post_image" 
      android:layout_width="match_parent" 
      android:layout_height="179dp" 
      android:layout_gravity="center" 
      android:scaleType="centerCrop" 
      app:imageUrl="@{photo.avatar_url}" 
      tools:background="@color/com_facebook_blue" /> 

     <Button 
      android:id="@+id/edit_item_imageView" 
      style="@style/Widget.AppCompat.Button.Borderless" 
      android:layout_width="29dp" 
      android:layout_height="37dp" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentTop="true" 
      android:background="@android:color/transparent" /> 

     <ImageView 
      android:id="@+id/image_edit" 
      android:layout_width="12dp" 
      android:layout_height="24dp" 
      android:layout_alignParentRight="true" 
      android:layout_marginRight="10dp" 
      android:layout_marginTop="10dp" 
      android:src="@drawable/profile_post_options" /> 

     <TextView 
      android:id="@+id/textview_comment" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/post_image" 
      android:layout_marginLeft="10dp" 
      android:layout_marginRight="10dp" 
      android:layout_marginTop="10dp" 
      android:text="@{photo.description}" 
      android:textColor="@color/v3_primary_gray" 
      android:textSize="12sp" 
      android:visibility="@{photo.description.length() > 0 ? View.VISIBLE : View.GONE}" 
      tools:text="comment" 
      android:layout_marginBottom="@dimen/margin_bottom_matches"/> 

    </RelativeLayout> 
</android.support.v7.widget.CardView> 

Стиль CardView только имеет cardCornerRadius набор для 4ДП.

Как именно тень Elevation работает? Есть ли какой-либо конкретный атрибут, который мне нужно установить для предотвращения этого? Или я мог бы использовать другой метод, чтобы получить те же тени, что и с Elevation?

Благодарим за помощь.

+0

Возможно, если вы установите 'mViewPager.setOffscreenPageLimit (4);' на 1 (4-> 1), а страница будет воссоздана каждый раз, тени не будут отображаться неправильно? – Ekalips

+0

Несмотря на то, что это исправит проблему с тенью, это не решение, так как содержимое фрагментов нужно извлекать с сервера. Это может привести к очень плохому UX, поскольку содержимое нужно будет загружать каждый раз. – Norik

+0

Hm. Я предполагаю, что вам нужно использовать что-то вроде простого 'View' с фоном (с тенью).Вы можете просто создать его с помощью XML (всего две формы с закругленными углами). – Ekalips

ответ

0

Я боролся с той же проблемой и исправил ее, но я точно не знаю, что происходит с рендерингом тени.

Моя проблема возникла, когда я создавал страницы в виде пейджера вида.

private final List<TestItem> challengeItems; 
@Override 
    public Object instantiateItem(ViewGroup container, int position) { 

     View pageView = challengeItems.get(position); 

     container.addView(view); 
     return view; 
    } 

TestItem были реализация LinearLayout (я использовал его в качестве шаблона)

общественного класса TestItem расширяет LinearLayout {

int position; 


public TestItem(Context context) { 
    super(context); 
    init(); 

} 

private void init() { 
    inflate(getContext(), R.layout.test_card, this); 
    ButterKnife.bind(this); 
} 

public void populateChallenge(Challenge challenge) { 

} 


public int getPosition() { 
    return position; 
} 

public void setPosition(int position) { 
    this.position = position; 
} 

}

Проблема возникает, когда инфляция в представлении шаблона не предоставляется группа просмотра контейнера (контейнер Viewpager's). Исправление теневой мерцанием бы тогда

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


     View view = LayoutInflater.from(container.getContext()).inflate(R.layout.test_card, **container**, false); 
     container.addView(view); 
     return view; 
    } 

вид мы собираемся загрузить в ViewPager должен быть надут внутри контейнера. Тогда только трансформатор ViewPager будет правильно анимировать по теням.