Android CardView에서 배경에 투명 색상을 사용할 때의주의 사항

7793 단어 안드로이드
CardView에서 배경색을 투명도가 있는 색으로 설정하려고 하면 하고 싶은 내용에 따라서는 잘 되지 않는 패턴이 있습니다. 몇 번인가 그런 장면에 조우하고 있었습니다만, 매회 조사하고 있는 생각이 들기 때문에 자신의 메모용으로 정리하고 싶습니다.

CardView 배경 투명 문제


  • 쉐도우(elevation)를 설정하고 있는 상태에서 배경색에 투과도가 있는 색을 설정하면 화상과 같이 테두리가 표시되어 버린다.



    • elevation이라든지 translationZ의 값이라든지 바꾸면 알겠지만, 테두리 부분이 그림자를 그리는데 사용해 그런 느낌. . .
    뭐, 배경색을 투과해 이용하는 것은 상정되어 있지 않다고 하는 느낌일까? 음.

    그럼 어떻게 투과하는가?



    해결책으로는 2 패턴일까 생각합니다.
  • 그림자 설정을 중지합니다
  • CardView 자체의 알파를 투과합니다.

    1. 그림자(elevation)의 설정을 그만둔다



    기본적으로는 이 패턴으로 끝내는 것이 편한 생각이 듭니다.
    상황에 따라서는 투과로 섀도우도 붙이고 싶은 것도 있다고는 생각합니다만.
    일단 쓸모없는 쓰는 방법을 실어 둡니다. 이 경우 처음에 첨부한 상태가 됩니다.
    app:cardBackgroundColor 에는 투명도가 있는 색을 설정하고 있습니다.

    쓸데없는 패턴
    <androidx.cardview.widget.CardView
     android:id="@+id/cardView"
     android:layout_width="200dp"
     android:layout_height="200dp"
     android:layout_margin="20dp"
     app:cardBackgroundColor="@color/red60"
     app:cardCornerRadius="20dp"
     app:cardElevation="5dp"
     app:layout_constraintTop_toTopOf="parent"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintEnd_toEndOf="parent">

     <TextView
        android:id="@+id/name_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_gravity="center"
        android:textColor="@color/black"/>

</androidx.cardview.widget.CardView>

    cardElevation을 0으로 설정하면 테두리가 표시되지 않고 첨부 이미지처럼 표시할 수 있습니다. 대신 elevation이 0이므로 그림자는 사라집니다.


    2.CardView 자체의 alpha를 투과해 버린다



    CardView 자체에 alpha 설정을 하는 것으로도 투과는 가능합니다. 이 경우 투과도에 맞추어 그림자도 얇아집니다.

    CardView의 자식 요소도 투과되어 버리므로 내부에 표시하고 싶은 내용은 ConstraintLayout 등으로 위로 겹치도록 해 둘 필요가 있습니다.
    그리고, 내부에 표시하는 요소는 elevation 설정했을 경우는 CardView측의 값과 같거나 그 이상으로 설정해 둘 필요도 있습니다.

    CardView를 투과하는 경우 xml
    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="20dp"
        android:alpha="0.4"
        app:cardBackgroundColor="@color/red"
        app:cardCornerRadius="20dp"
        app:cardElevation="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/name_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:elevation="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

    요약



    CardView의 배경 투명에 대해 메모 쓰기 레벨이지만 써 보았습니다.
    둥근이없는 경우라면, CardView의 CardBackgroundColor가 아니라 backgroundColor로 설정하는 것만으로도 OK입니다만 어디의 경우는 CardView로 하지 않아도 될까라고 생각해 생략했습니다.
    그 밖에 해결책이 있어 등 있으면 가르쳐 주시면 고맙습니다.

    여러가지 조사하고 있을 때에 맞추어 보고 있었습니다만, ViewOutlineProvider를 사용하면 여러가지 View로 자르기를 할 수 있기 때문에 편리하다고 생각했습니다.
    CardView에서 부족한 패턴이 많습니다만, 사용할 수 있는 타이밍 있으면 사용해 보자고 생각합니다.

    참고 페이지
    h tps://p로g라민 g-카후. 코 m/p로g 라민 g/안 d로이 d% 3% 83% 오 C% 3% 82% 4% 3% 82% 2% 3% 82% 3% 83% 88/t란 s 파렌 t/
    h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 28629549 / t 란 s 파렌 t 바 ckg 로운 d 온-카 rd ゔ ぃ え w
    • retrofit2와 모시와 enum
    메소드 체인으로 걸는 Modifire의 데이터 구조는 어떻게 되어 있는가

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage