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

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片段布局中。

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

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