Question

我将图像加载到带有圆角的视图寻呼机中。但是，出于设计原因，我只希望在结算Viewpager时使上角变圆，而在更改页面时使所有角都变圆。我通过四舍五入并将图像向下推约8dp来实现这一点。

我遇到的问题是，即使我已经使用滑行的.transform(new RoundedCorners(8))对所有角进行了圆角处理，但在滑动viewpager时，它仅将顶部角显示为圆角。我已经发布了一些屏幕截图：

ViewPager已解决：

ViewPager移动：

我应该提到我正在使用PageTransformer为页面之间的过渡设置动画，这就是为什么在第二个屏幕截图中页面会缩小的原因。这是完整的Glide代码：

    Glide.with(albumArt)
            .load(trackModel.getAlbumCoverArtUrl())
            .apply(new RequestOptions()
                    .fitCenter()
                    .transform(new RoundedCorners(8)))
            .into(albumArt);

我还尝试过为ImageView定义轮廓并设置setClipToOutline(true)，如下所示：

    albumArt.setClipToOutline(true);
    albumArt.setOutlineProvider(new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 16);
        }
    });

但是，这导致以下不是我想要的结果：ViewPager解决后，所有角都圆了：

我尝试在XML中更改ImageView上的layout_margins以及ImageView的容器片段，但是在结算ViewPager时，这总是使所有角变圆并可见。

我想发生的是将所有角都圆角，但是当ViewPager固定好以便将底部角“推”出屏幕时，这样您就只能看到顶部角是圆角的。滑动ViewPager时，我希望所有角都可见并变圆。

这是完整的类和XML：

班级：

public class NowPlayingPageFragment extends Fragment {
    private static final String TAG = "NowPlayingPageFragment";


    public static NowPlayingPageFragment newInstance(TrackModel trackModel) {
        NowPlayingPageFragment fragment = new NowPlayingPageFragment();
        Bundle argument = new Bundle();
        argument.putSerializable(TrackModel.class.getSimpleName(), trackModel);
        fragment.setArguments(argument);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.now_playing_page, container, false);

        Bundle arguments = getArguments();
        TrackModel trackModel = (TrackModel) arguments.getSerializable(TrackModel.class.getSimpleName());
        Log.d(TAG, "NowPlayingPage: " + trackModel.getAlbumCoverArtUrl());
        ImageView albumArt = rootView.findViewById(R.id.nowPlayingAlbumArtPage);

//          Alternate method to round corners

//        albumArt.setClipToOutline(true);
//        albumArt.setOutlineProvider(new ViewOutlineProvider() {
//            @Override
//            public void getOutline(View view, Outline outline) {
//                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 16);
//            }
//        });

        Log.d(TAG, "NowPlayingPage: setClipToOutline" + albumArt.getClipToOutline());

        Glide.with(albumArt)
                .load(trackModel.getAlbumCoverArtUrl())
                .apply(new RequestOptions()
                        .fitCenter()
                        .transform(new RoundedCorners(8))
                )
                .into(albumArt);

        return rootView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

}

应该提到的是，该布局嵌套在viewpager片段布局内，而该viewpager片段布局嵌套在底层表布局内。

XML：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"

    android:layout_height="match_parent"
    android:layout_marginTop="0dp"
    android:background="@drawable/round_corner_dialog"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/nowPlayingAlbumArtPage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/album_art_large"
        android:cropToPadding="false"
        android:scaleType="centerCrop"
        android:visibility="visible" />
</LinearLayout>

Answer 1

我能够通过解决布局的平移和缩放属性来解决这个问题！

如何在屏幕外裁剪ImageView的角（圆角）

1 个答案: