사용자 정의 Snakbar 디자인

10429 단어 AndroidSnackBar

하고 싶은 일


최근 몇 년 동안 사용자에 대한 간단한 피드백은 Toast가 아니라 SnakBar가 자주 사용되고 있다.
기준을 유지해도 별 문제가 없다MATERIAL DESIGN - Snackbars에는 이런 느낌을 보여주는 스냅바.

사람마다 사람마다
> 이 Snakbarν을 자신의 애플리케이션에도 표시하려면 다음과 같이 하십시오.
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
하지만 많이 찾아봐도 배경색을 바꾸거나 텍스트 색을 바꾸는 것만 발견됐다.
MATERIAL DESIGN - Snackbars에도 구체적인 설치 방법이 없다.
어떻게 실현합니까?다양한 시행착오가 해결책을 찾았기 때문에 여기서 공유한다.

솔루션: Snakbar 참조를 위한 LayoutResource 준비 및 Resource 참조 무시


Snakbar 참조 LayoutResource


Snakbar는 내부에서 다음 두 개의 LayoutResource를 읽었습니다.
R.layout.design_layout_snackbar.xml
R.layout.design_layout_snackbar_include.xml
조사된 정보 중에는 스낙바의 내용을 부분적으로 동적으로 변경한 경우가 많아 스낙바의 배경을 변경할 수 없다.
자신의 응용 프로그램에서 상기 두 개의 LayoutResouce를 준비하여 Resource 참조를 덮어쓰고 스나크바의 디자인을 자유롭게 변경할 수 있습니다.

자신의 애플리케이션을 위해 두 개의 LayoutResource를 준비합니다.


Snakbar가 참조하는 LayoutResource의 xml 코드는 다음과 같이 자신의 응용 프로그램의res.layout 폴더에서 만들어집니다.
R.layout.design_layout_snackbar.xml
<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Widget.Design.Snackbar"
    class="android.support.design.widget.Snackbar$SnackbarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"/>

R.layout.design_layout_snackbar_include.xml
<?xml version="1.0" encoding="utf-8"?>
<view
    xmlns:android="http://schemas.android.com/apk/res/android"
    class="android.support.design.widget.SnackbarContentLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

  <TextView
      android:id="@+id/snackbar_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:layout_gravity="center_vertical|left|start"
      android:paddingTop="@dimen/design_snackbar_padding_vertical"
      android:paddingBottom="@dimen/design_snackbar_padding_vertical"
      android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
      android:paddingRight="@dimen/design_snackbar_padding_horizontal"
      android:ellipsize="end"
      android:maxLines="@integer/design_snackbar_text_max_lines"
      android:textAlignment="viewStart"
      android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"/>

  <Button
      android:id="@+id/snackbar_action"
      style="?attr/borderlessButtonStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"
      android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"
      android:layout_gravity="center_vertical|right|end"
      android:minWidth="48dp"
      android:textColor="?attr/colorAccent"
      android:visibility="gone"/>

</view>

Snakbar 배경 통과


Snakbar의 배경은 R.layout.design_layout_snackbar.xml의 다음 위치에 정의됩니다.
style="@style/Widget.Design.Snackbar"
Widget.Design.Snackbar
  <style name="Widget.Design.Snackbar" parent="android:Widget">
    <item name="android:minWidth">@dimen/design_snackbar_min_width</item>
    <item name="android:maxWidth">@dimen/design_snackbar_max_width</item>
    <item name="android:background">@drawable/design_snackbar_background</item>
    <item name="android:paddingLeft">@dimen/design_snackbar_padding_horizontal</item>
    <item name="android:paddingRight">@dimen/design_snackbar_padding_horizontal</item>
    <item name="elevation">@dimen/design_snackbar_elevation</item>
    <item name="maxActionInlineWidth">@dimen/design_snackbar_action_inline_max_width</item>
  </style>
백그라운드 속성이 지정한 부분을 덮어쓰면 투명성을 실현할 수 있습니다.
res.values/styles.xml에 덮어쓰는 스타일을 추가합니다.
  <style name="CustomSnackbar" parent="Widget.Design.Snackbar">
    <item name="android:background">@android:color/transparent</item>
  </style>
그리고 R.layout.design_layout_snackbar.xml 수정.
<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/CustomSnackbar" <-- カスタムStyleを指定
    class="android.support.design.widget.Snackbar$SnackbarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:theme="@style/AppTheme" /> <-- アプリのThemeに変更する

Snakbar 컨텐츠 섹션 변경


Snakbar의 내용 부분은 R.layout입니다.design_layout_snackbar_include.xml을 편집하면 자유롭게 변경할 수 있지만, 반드시 지켜야 할 조건이 있습니다.
id 변경 안 함
R.layout.design_layout_snackbar_include.xml에는 TextView와 Buton이 있고 각각 id(snackbar text, snackbar action)가 있지만 이것은 Snakbar 클래스에서 호출되기 때문에 변경할 수 없습니다.
불증가 요소
LayoutResource를 편집하면 View의 요소, 이미지 표시 등을 추가할 수 있지만, 스냅바 클래스로 인해 2개의 id(snackbar text, 스냅바 action) 이외의 요소에 접근할 수 없고, 스냅바에 아이콘을 표시하는 것을 추천하지 않는다는 가이드라인 등포기하는 게 낫지 않을까?
@dimens/design_snackbar~의 리소스를 직접 사용
R.layout.design_layout_snackbar_include.xml에서 지원 라이브러리의dimens 자원을 참조합니다.
변경할 수 있지만 지원 라이브러리는 다양한 화면 사이즈에 대응하기 때문에 이렇게 사용하는 것을 추천합니다.

배경 리소스 준비


Snakbar는 아직 투명하기 때문에 각환의 배경 자원을 준비합니다.
R.drawable.snackbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4c4c4c" />
    <corners android:radius="4dp" />
</shape>

메시지 섹션의 스타일 정의


Snakbar의 메시지 섹션에는 다음과 같은 Style이 정의되어 있습니다.
TextAppearance.Design.Snackbar.Message
  <style name="TextAppearance.Design.Snackbar.Message" parent="android:TextAppearance">
    <item name="android:textSize">@dimen/design_snackbar_text_size</item>
    <item name="android:textColor">?android:textColorPrimary</item>
  </style>
텍스트 색상만 변경하려면 R.values를 사용합니다.styles.xml에서 다음과 같이 보충합니다.
  <style name="CustomSnackbarMessage" parent="TextAppearance.Design.Snackbar.Message">
    <item name="android:textColor">#f0f0f0</item>
  </style>

마지막으로 R.layoutdesign_layout_snackbar_include.xml 편집


편집 내용 부분의 xml은 다음과 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
    class="android.support.design.widget.SnackbarContentLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_marginBottom="8dp" <-- 下端から少し離す
    android:background="@drawable/snackbar_background" <-- 背景適用
    android:elevation="2dp" <-- 影を表現する
    android:theme="@style/AppTheme"> <-- アプリのThemeを適用する

    <TextView
        android:id="@+id/snackbar_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|left|start"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="@integer/design_snackbar_text_max_lines"
        android:paddingBottom="@dimen/design_snackbar_padding_vertical"
        android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
        android:paddingRight="@dimen/design_snackbar_padding_horizontal"
        android:paddingTop="@dimen/design_snackbar_padding_vertical"
        android:textAlignment="viewStart"
        android:textAppearance="@style/CustomSnackbarMessage" /> <-- 定義したStyleを適用する

    <Button
        android:id="@+id/snackbar_action"
        style="?attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|right|end"
        android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"
        android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"
        android:minWidth="48dp"
        android:textColor="@color/colorAccent" <-- アプリのアクセントカラーを適用
        android:visibility="gone" />

</view>

결실


아래가 이렇게 된 거 아닌가 싶어요.
before
after


이렇게 해서 MATERIAL DESIGN - Snackbars 비슷한 느낌의 스나크바를 구현했다.
LayoutResource의 참조를 덮어쓰는 방법을 사용했기 때문에 앞으로의 지원 라이브러리 업데이트에서 Snakbar 설치가 크게 바뀌었을 때 사용할 수 없음을 주의하십시오.(없을 수도 있다...)
그게 다야.스낙바의 맞춤형 제작에 어려움을 겪는 분들에게 참고가 됐으면 좋겠습니다.

좋은 웹페이지 즐겨찾기