Как вырезать углы (закругленные углы) ImageView вне экрана - PullRequest
Новая
       55

Как вырезать углы (закругленные углы) ImageView вне экрана

0 голосов
/ 16 ноября 2018

У меня есть изображения, загруженные в пейджер просмотра с закругленными углами. Однако, по причинам дизайна, я хочу, чтобы верхние углы были закруглены только тогда, когда окно просмотра установлено, но чтобы все углы казались закругленными при изменении страниц. Я добился этого, округлив все углы и сдвинув изображение вниз примерно на 8dp.

Проблема, с которой я столкнулся, заключается в том, что, хотя я скругил все углы, используя .transform(new RoundedCorners(8)) глиссады, при перелистывании видового экрана он показывает только верхние углы как закругленные. Я выложил несколько скриншотов:

ViewPager урегулирован:
ViewPager settled

Перемещение ViewPager:
ViewPager moving

Я должен упомянуть, что я использую 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 установился:
All corners rounded when ViewPager settled

Я попытался изменить layout_margins для ImageView в XML, а также фрагмент контейнера 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);
    }

}

Следует отметить, что макет вложен в макет фрагмента окна просмотра, который вложен в макет нижнего листа.

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>

1 Ответ

0 голосов
/ 23 ноября 2018

Мне удалось решить эту проблему, поиграв со свойствами перевода и масштабирования макета!

...