在ViewPager中更改碎片时,使用Elevation闪烁创建的阴影

时间:2017-01-20 12:36:19

标签: android android-elevation

我对使用Elevation创建的阴影有疑问。

我的屏幕包含一个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);

RecyclerView中使用的其中一个CardView

<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设置为4dp。

Elevation的阴影究竟是如何工作的?是否需要设置任何特定属性来防止这种情况?或者我可以使用不同的方法来获得与Elevation相同的阴影吗?

感谢您的帮助。

1 个答案:

答案 0 :(得分: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的容器)时。阴影闪烁的修复将是

 @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变换器才能在阴影上正确设置动画。