사용자 정의 Snakbar 디자인
하고 싶은 일
최근 몇 년 동안 사용자에 대한 간단한 피드백은 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 설치가 크게 바뀌었을 때 사용할 수 없음을 주의하십시오.(없을 수도 있다...)
그게 다야.스낙바의 맞춤형 제작에 어려움을 겪는 분들에게 참고가 됐으면 좋겠습니다.
Reference
이 문제에 관하여(사용자 정의 Snakbar 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/gari_jp/items/6d44844ce050da37853a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 설치가 크게 바뀌었을 때 사용할 수 없음을 주의하십시오.(없을 수도 있다...)
그게 다야.스낙바의 맞춤형 제작에 어려움을 겪는 분들에게 참고가 됐으면 좋겠습니다.
Reference
이 문제에 관하여(사용자 정의 Snakbar 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/gari_jp/items/6d44844ce050da37853a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)