Material Design 시리즈 의 Behavior 안 드 로 이 드 실현 첫 페이지
효과 미리 보기
효과 알 기:
본 블 로그 구현 효과:
오늘 효과 의 소스 코드 다운로드 링크 는 글 끝 에 있 습 니 다.
실현 분석
이 효 과 는 사실 실현 하기 어렵 지 않 지만 그 용도 가 매우 크다.사용자 가 손가락 이 미 끄 러 지고 화면 에 아래 내용 이 표 시 될 때 Toolbar,Tab 네 비게 이 션,FAB 를 숨 기 고 더 큰 공간 을 비 워 내용 을 표시 하여 사용 자 를 시원 하 게 한다.간단 하고 거 칠 지만 이것 이 우리 의 목적 이다.
우선 머리 에 있 는 Toolbar 입 니 다.이 건 말 할 필요 도 없 죠.기본적으로 할 줄 아 는 사람 이 제 블 로그 의 demo 를 마음대로 보 는 것 도 이런 효과 가 있 습 니 다.정말 초등학교 급 입 니 다.
그 다음 에 FAB(Flocation Action Button)의 디 스 플레이 와 숨 김 을 살 펴 보 겠 습 니 다.사용 하 는 이동 인지 알 고 있 습 니 다.우 리 는 여기 서 최적화 변경 을 하 겠 습 니 다.물론 이동 도 가능 합 니 다.만약 에 제 Material Design 시 리 즈 를 보 셨 다 면사용자 정의 Behavior 위 미끄럼 표시 끝 단추이 블 로 그 를 보 셨 다 면.그러면 우리 FAB 의 애니메이션 숨 김 과 디 스 플레이 도 지난 블 로그 의 원리 로 지난 블 로 그 를 본 친구 들 이 고 개 를 돌려 봐 야 합 니 다.여 기 는 군말 이 아 닙 니 다.
마지막 으로 아래 의 Tab 네 비게 이 션 의 숨겨 진 부분 과 디 스 플레이 를 살 펴 보 겠 습 니 다.이것 은 확실히 실 용적 이 고 이동 이 좋 습 니 다.그 렇 죠?하지만 제 Material Design 시 리 즈 를 보 셨 다 면Behavior 의 BottomSheet Behavior 와 BottomSheet Dialog이 블 로 그 를 보 셨 다 면 이 효 과 는 실현 되 기 어렵 지 않 을 것 이 라 고 믿 습 니 다.다음 글 을 보기 전에 이 글 을 읽 는 것 을 강력 히 건의 합 니 다.그렇지 않 으 면 정말 더 이상 볼 수 없습니다.
사실 코드 량 이 매우 적은 데 주로 Behavior 원리,Behavior 와 Coordinator Layout 가 어떻게 결합 하여 사용 하 는 지 입 니 다.so,위의 두 블 로 그 를 읽 어 보 는 것 을 강력 히 권장 합 니 다.
……
알 겠 습 니 다.5 분 이 지 났 습 니 다.위 에서 언급 한 블 로 그 를 대충 읽 었 을 거 라 고 믿 습 니 다.그렇다면 첫 번 째 FAB 의 그 블 로그 에서 이 루어 진 효 과 는 손가락 이 위로 미 끄 러 질 때(화면 이 아래 내용 을 표시 할 때)FAB 가 위로 돌아 가 는 것 을 보 여 주 는 것 이다.그러나 여 기 는 정반 대 이다.위로 미 끄 러 질 때 FAB 를 숨 기 는 것 이다.원리 해석 의 한 단락 을 열심히 읽 거나 demo 를 실행 한 적 이 있다 면 이 효 과 는 so easy 입 니 다.두 번 째 블 로그 에서 도 이 Tab 내 비게 이 션 을 어떻게 숨 기 고 표시 하 는 지 에 대해 이야기 했다.그러면 어떤 학생 들 은 오늘 블 로그 가 끝났다 고 생각 하지?답 은 당연히 No 다.그렇지 않 으 면 나 도 다 시 는 블 로 그 를 열 어 이 야 기 를 하지 않 을 것 이다.
왜 일 까요?아니면 어 려 운 점 이 있 습 니까?어 려 운 점 이 어디 에 있 습 니까?바로 위 에서 말 한 두 가지 Behavior 가 Coordinator Layout 와 어떻게 결합 하여 사용 하 는 지,동시에 두 가지 효 과 를 실현 하 는 지 하 는 것 이다.그리고 BottomSheet Behavior 는 Tab 내 비게 이 션 을 숨 기 고 표시 하기 전에 Button 을 사용 하여 제어 합 니 다.'Coordinator Layout 의 ContentView 가 미 끄 러 질 때 동적 으로 Tab 내 비게 이 션 을 표시 하고 숨 기 는 방법 은 무엇 입 니까?
다음은 진짜 재 료 를 가지 고 모 두 를 데 리 고 코드 를 훑 어 보 겠 습 니 다.
페이지 레이아웃
위의 인용문 과 소 개 는 FAB 의 디 스 플레이 와 숨 김 이 사용자 정의 Behavior 로 이 루어 진 다 는 것 을 알 게 되 었 습 니 다.Tab 네 비게 이 션 은 BottomSheet Behavior 로 이 루어 집 니 다.그러면 우리 레이아웃 파일 도 출시 될 것 입 니 다.
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<LinearLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
app:layout_behavior="@string/bottom_sheet_behavior">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:src="@mipmap/ic_action_new"
app:layout_behavior="@string/scale_down_show_behavior"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.CoordinatorLayout>
app:layout_behavior="@string/appbar_scrolling_view_behavior"
그리고 LinearLayout 에서 사용 하 는 Behavior 는 design 의 BottomSheet Behavior 입 니 다.
app:layout_behavior="@string/bottom_sheet_behavior"
마지막 FloatingAction 단추 입 니 다.사용자 정의 Scale DownShowBehavior 를 사용 하 십시오.
app:layout_behavior="@string/scale_down_show_behavior"
다른 두 가 지 는 모두 design 이 자체 적 으로 가지 고 있 습 니 다.Floating Action Button 의 Scale DownShowBehavior 만 사용자 정의 가 필요 합 니 다.다음은 Scale DownShowBehavior 를 실현 하 겠 습 니 다.
Behavior 사용자 정의 FAB 애니메이션 제어
사용자 정의 Behavior 에 대해 서도 언급 했 습 니 다.먼저 사용자 의 손가락 이 화면 에서 미 끄 러 지고 FAB 를 숨 기 며 더 많은 위 치 를 남 겨 두 었 습 니 다.
여 기 는 FloatingActionButton.Behavior 를 계승 합 니 다:
public class ScaleDownShowBehavior extends FloatingActionButton.Behavior {
public ScaleDownShowBehavior(Context context, AttributeSet attrs) {
super();
}
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, ...) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
@Override
//
private boolean isAnimatingOut = false;
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimatingOut
&& child.getVisibility() == View.VISIBLE) {// ， FAB
AnimatorUtil.scaleHide(child, listener);
} else if ((dyConsumed < 0 || dyUnconsumed < 0) && child.getVisibility() != View.VISIBLE) {
AnimatorUtil.scaleShow(child, null);// ， FAB
}
}
private ViewPropertyAnimatorListener listener = new ViewPropertyAnimatorListener() {
@Override
public void onAnimationStart(View view) {
isAnimatingOut = true;
}
@Override
public void onAnimationEnd(View view) {
isAnimatingOut = false;
view.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(View arg0) {
isAnimatingOut = false;
}
};
com.yanzhenjie.definebehavior.behavior.ScaleDownShowBehavior ScaleDownShowBehavior 의 view 디 스 플레이/숨 김 을 통 해 Tab 내 비게 이 션 표시 줄 을 제어 합 니 다.
사실 Material Design 시 리 즈 를 보면 Behavior 의 BottomSheet Behavior 와 BottomSheet Dialog 라 는 글 을 본 학생 들 은 BottomSheet Behavior 의 컨트롤 이 기본적으로 숨겨 져 있 기 때문에 우리 가 그것 의 View 디 스 플레이 를 제어 하 는 방법 을 사용 해 야 한 다 는 것 을 알 게 될 것 이다.그래서 저 희 는 Coordinator Layout 의 ContentView 가 굴 러 갈 때 BottomSheet Behavior 를 사용 하 는 방법 으로 의존 하 는 View 를 표시 하고 숨 겨 야 합 니 다.
그러면 우 리 는 Scale Downshow Behavior 가 시스템 에 의 해 자동 으로 호출 되 었 고 View 의 숨 김 과 표 시 를 촉발 한 것 을 발 견 했 습 니 다.Coordinator Layout 이 물건 은 우리 에 게 BottomSheet Behavior 를 자동 으로 호출 하지 않 았 습 니 다.우 리 는 어떻게 합 니까?만약 당신 이 잊 지 않 았 다 면,우리 가 Scale Downshow Behavior 를 사용자 정의 할 때,onNested Scroll()방법 중 하 나 는 FAB 의 디 스 플레이 와 숨 김 을 호출 하 는 것 입 니 다.그래서 우 리 는 외부 에서 그것 의 동작 을 감청 할 수 있 도록 리 셋 감청 을 추가 합 니 다.BottomSheet Behavior 를 동시에 제어 할 수 있 습 니까?아직 밝 혀 지지 않 았 다 면 코드 를 보 세 요.
먼저 Scale DownShowBehavior 에서 Listener 를 정 합 니 다.
// 。
public interface OnStateChangedListener {
void onChanged(boolean isShow);
}
private OnStateChangedListener mOnStateChangedListener;
public void setOnStateChangedListener(OnStateChangedListener mOnStateChangedListener) {
this.mOnStateChangedListener = mOnStateChangedListener;
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimatingOut
&& child.getVisibility() == View.VISIBLE) {//
AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);
if (mOnStateChangedListener != null) {
mOnStateChangedListener.onChanged(false);
}
} else if ((dyConsumed < 0 || dyUnconsumed < 0) && child.getVisibility() != View.VISIBLE) {
AnimatorUtil.scaleShow(child, null);
if (mOnStateChangedListener != null) {
mOnStateChangedListener.onChanged(true);
}
}
}
FAB 의 Behavior 대상 을 가 져 와 감청 을 통 해 BottomSheet Behavior 의 View 를 제어 하 는 디 스 플레이/숨 기기
View 에 Behavior 대상 을 설정 할 때 xml 에 설정 되 어 있 기 때문에 Behavior 는 View 의 LayoutParams 속성 인 거 아 시 죠?하하 하,알 겠 죠?그리고 Behavior 는 Coordinator Layout 와 결합 해서 사용 해 야 합 니 다.그렇지 않 으 면 농담 입 니 다.so.이 View 도 Coordinator Layout 의 하위 View 여야 합 니 다.그래서 Scale DownShowBehavior 에서 다음 과 같은 정적 방법 이 생 겼 습 니 다.
public static <V extends View> ScaleDownShowBehavior from(V view) {
ViewGroup.LayoutParams params = view.getLayoutParams();
if (!(params instanceof CoordinatorLayout.LayoutParams)) {
throw new IllegalArgumentException(" View CoordinatorLayout View");
}
CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params).getBehavior();
if (!(behavior instanceof ScaleDownShowBehavior)) {
throw new IllegalArgumentException(" View Behaviro ScaleDownShowBehavior");
}
return (ScaleDownShowBehavior) behavior;
}
private BottomSheetBehavior mBottomSheetBehavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.zhihu_main);
ScaleDownShowBehavior scaleDownShowFab = ScaleDownShowBehavior.from(FAB);
scaleDownShowFab.setOnStateChangedListener(onStateChangedListener);
mBottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.tab_layout));
}
private OnStateChangedListener onStateChangedListener = new OnStateChangedListener() {
@Override
public void onChanged(boolean isShow) {
mBottomSheetBehavior.setState(
isShow ? BottomSheetBehavior.STATE_EXPANDED
: BottomSheetBehavior.STATE_COLLAPSED);
}
};
페이지 초기 화 후 Tab 탐색 보이 기
우 리 는 위의 글 에서 BottomSheet Behavior 속성 을 추가 한 View 는 기본적으로 숨겨 져 있 기 때문에 페이지 를 초기 화 할 때 Tab 내 비게 이 션 을 표시 해 야 합 니 다.
private boolean initialize = false;
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (!initialize) {
initialize = true;
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【IE 대응】Google Material Icons를 data 속성을 사용해 스마트하게 표시한다방법 1: HTML로 직접 작성 가장 쉬운 방법이지만 문제가 하나 있습니다. 구글의 검색 결과에 표시되는 타이틀이나 메뉴 부분에 이 방법으로 아이콘을 설치해 버리면, emailお問い合わせフォーム 와 같은 형태로 아이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
