Android Material Design 그림자 구현 예시

본 고 는 Android Material Design 음영 실현 예 시 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
View 에 음영 을 주 는 방법 은 다음 과 같은 네 가지 가 있 습 니 다.
제어 elevation아웃 라인 공급 자 사용 하기그림 9 개 사용 하기

CardView,FloatingAction Button 등 MD 스타일 의 컨트롤 을 사용 합 니 다

0.Z 축의 개념
Android 는 5.0 및 이후 에 Material Design 디자인 언어 를 사용 하여 Z 축의 개념,즉 화면 에 수직 으로 있 는 축 을 도 입 했 고 Z 축 은 View 에 음영 을 주 는 효 과 를 가 집 니 다.

한 묶음 의 사광 이 화면 에 투입 된다 고 상상 하면 Z 축의 값 이 클 수록 빛 과 가 까 워 지고 그림자 의 범위 가 커진다.Z 축 값 이 작 을 수록 빛 에서 멀 어 지고 그림자 의 범위 가 작 아진 다.그리고:
Z=elevation+ translationZ
elevation 은 보통 xml 파일 에 정적 설정 을 하고 translateZ 는 애니메이션 효 과 를 제어 하 는 데 사 용 됩 니 다.
Z 축 이 View 에 음영 을 주 었 습 니 다.우리 가 음영 을 조절 하려 면 Z 축 을 제어 하 는 것 입 니 다.
1.고도 조절
elevation 을 제어 하려 면 먼저 View 의 BackGround 를 설정 하고 elevation 을 설정 해 야 합 니 다.
먼저 drawable 을 설정 합 니 다:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>

background 와 elevation 재 설정:

<TextView
android:id="@+id/myview"
android:layout_width="100dp"
android:layout_height="100dp"
android:elevation="2dp"
android:background="@drawable/myrect" />

2.OutlineProvider 사용
첫 번 째 방식 은 대부분의 상황 을 만족 시 킬 수 있 지만 View 의 background 가 color,그림 이 고 심지어 사용자 정의 View 일 때 음영 효 과 를 낼 수 없습니다.이것 은 코드 를 통 해 음영 을 설정 해 야 합 니 다.공식 적 으로 아 틀 라인 이 라 고 합 니 다.

view.setOutlineProvider(new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRect(0,0,view.getWidth(),view.getHeight());
}
});

outline 은 외부 그림자 스타일 을 그립 니 다.스타일 은 임의의 것 일 수 있 습 니 다.사각형,정원,사각형,심지어 경로:

outline 방법
3.9 도 사용
앞의 두 가지 방법 은 대부분 상황 을 포함 하 는데 정말 의외 입 니 다.예 를 들 어 5.0 전의 UI 스타일,UI 디자인 의 그림자 가 컬러 라 니!그럼 마지막 스 킬 을 사용 하 겠 습 니 다:9 그림.그러나 9 그림 을 사용 하 는 유연성 이 정말 떨 어 지고 높이 가 다 르 면 서로 다른 그림 을 자 르 려 고 한다.여기 한 사이트 가 스스로 그림자 그림 을 자 를 수 있다http://inloop.github.io/shadow4android/
4.공식 MD 구성 요소 사용
사실 공식 구성 요소 인 Action Bar,CardView,Floating Action Button 은 자체 음영 을 가지 고 있 으 므 로 최대한 사용 해 야 합 니 다.여 기 는 설명 을 하지 않 겠 습 니 다.
5.translateZ 애니메이션
Z 축 을 소개 하면 서 Z=elevation+translationZ 라 고 말 했다.elevation 은 정적 이 고 translateZ 는 동적 이다.우리 가 버튼 을 눌 렀 을 때 팝 업 효과 가 있 기 를 바 랍 니 다.이렇게:

튀다
사실은 view 설정 상태 애니메이션 제어 translationZ:
android:stateListAnimator="@drawable/selector_elevation"
애니메이션 xml 는 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.