Material Design 시리즈 의 Behavior 는 결제 암호 창 과 상품 속성 선택 효 과 를 실현 합 니 다.
현재 사용 하고 있 는 앱 정리:
1.알 리 페 이 팝 업 을 모방 하여 결제 비밀 번 호 를 입력 합 니 다.
2.타 오 바 오/티몰 팝 업 상품 속성 선택 상자.
3.첫 페이지 가 위아래 로 미 끄 러 지 는 것 을 알 고 있 습 니 다.ToolBar 와 Navigation Bar 를 숨 깁 니 다.
4. …
시리즈 블 로그:
1.Material Design 시리즈,Behavior 의 BottomSheet Behavior 와 BottomSheet Dialog
2.Material Design 시리즈,Behavior 의 SwipeDismiss Behavior
3.Material Design 시리즈,사용자 정의 Behavior 위 미끄럼 표시 끝 단추
4.Material Design 시리즈,사용자 정의 Behavior 구현 Android 알 기 홈 페이지
5.Material Design 시리즈,사용자 정의 동작 지원 모든 보기
효과 미리 보기
인용문
제 기술 군 에서 친구 들 이 Behavior 에 대해 토론 을 했 습 니 다.저도 놀 러 갔 고 저도 Behavior 에 대해 시리즈 블 로 그 를 썼 습 니 다.Behavior 를 선택 하고 ctrol+t 를 선택 한 후에 Behavior 의 실현 유형 을 발 견 했 습 니 다.BottomSheet Behavior,저 는 Android 홈 페이지 에 가서 자 료 를 뒤 져 보 았 습 니 다.뒤 져 보 니 서 프 라 이 즈 를 발 견 했 습 니 다.다음은 이 서 프 라 이 즈 를 소개 하 겠 습 니 다.
더 많은 글 은 구 글/바 이 두 에서 내 이름 을 검색 하 세 요:엄 진 걸 씨,1 위 는 바로 저 입 니 다.
BottomSheet Behavior 어떻게 해 요?
이 게임 을 하려 면 먼저 Behavior 가 Coordinator Layout 의 하위 View 인 Layout Params(이 유 를 보고 설명)이기 때문에 Coordinator Layout 는 절대 없어 서 는 안 됩 니 다.먼저 전체 레이아웃 을 보 여 드 리 겠 습 니 다.
<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:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/tab_layout"
android:gravity="center"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<Button
android:id="@+id/btn_bottom_sheet_control"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="sheet / " />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:background="@android:color/holo_purple"
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.CoordinatorLayout>
대충 소개 하 겠 습 니 다.페이지 에는 Toolbar 와 하나의 Button:sheet 표시/숨 기기,그리고 android:id="@+id/tab 만 볼 수 있 습 니 다.layot"이 레이아웃 은 가로 입 니 다.Behavior:app:layot 를 설정 하 였 습 니 다.behavior="@string/bottom_sheet_behavior",테스트 를 통 해 tab 를 주지 않 으 면layot 는 BottomSheet Behavior 를 설정 합 니 다.전체 페이지 의 상단 에 떠 있 고 Toolbar 아래 에 있 습 니 다.BottomSheet Behavior 를 설정 하면 BottomSheet Behavior 에 의 해 자동 으로 페이지 아래쪽 밖으로 이동 하기 때문에 페이지 에 서 는 android:id="@+id/tab 가 보이 지 않 습 니 다.레이아웃페이지 가 다 그 려 졌 는데,설마 그것 이 자동 으로 꺼 질 까요?어떻게 그것 의 열 림 과 닫 기 를 제어 합 니까?그러면 우 리 는 이 물건 의 실제 모습 을 살 펴 보 겠 습 니 다.제 가 안 드 로 이 드 의 공식 api 를 보면 BottomSheet Behavior 라 는 물건 은 정태 적 인 방법 이 있 습 니 다.BottomSheet Behavior.from(View)는 이 View 가 인용 한 BottomSheet Behavior 를 되 돌려 줍 니 다.
public static <V extends View> BottomSheetBehavior<V> from(V view) {
ViewGroup.LayoutParams params = view.getLayoutParams();
if (!(params instanceof CoordinatorLayout.LayoutParams)) {
throw new Exception("The view is not a child of CoordinatorLayout");
}
CoordinatorLayout.Behavior behavior = params.getBehavior();
if (!(behavior instanceof BottomSheetBehavior)) {
throw new IllegalArgumentException("...");
}
return (BottomSheetBehavior<V>) behavior;
}
이 방법 은 이 View 가 Coordinator Layout 의 하위 View 인지 확인 합 니 다.그렇다면 이 View 의 Behavior 를 받 을 수 있 습 니 다.그래서 여러분 도 왜 제 가 처음에 Behavior 를 Coordinator Layout 서브 View 의 Layout Params 라 고 말 했 는 지 알 아야 합 니 다.다음은 이 물건 을 받 은 후에 어떻게 사용 하 는 지 봅 시다.
private BottomSheetBehavior mBottomSheetBehavior;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bsbehavior_activity);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
findViewById(R.id.btn_bottom_sheet_control).setOnClickListener(onClickListener);
// tab_layout BottomSheetBehavior
mBottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.tab_layout));
}
findViewById(R.id.btn_bottom_sheet_control).setOnClickListener(onClickListener);방금 말 한 페이지 의 Button 에 감청 을 설정 한 것 입 니 다.이 버튼 으로 tab 을 제어 합 니 다.layot 의 표시 와 숨 김.나 는 그것 이 의존 하 는 View 의 현재 상 태 를 얻 을 수 있 는 방법 이 있다 는 것 을 발견 했다.mBottomSheet Behavior.getState()는 소스 코드 를 뒤 져 본 후에 그 반환 값 이 다음 과 같은 몇 가지 가 있 음 을 발견 했다.
/**
* The bottom sheet is dragging.
*/
public static final int STATE_DRAGGING = 1;
/**
* The bottom sheet is settling.
*/
public static final int STATE_SETTLING = 2;
/**
* The bottom sheet is expanded.
*/
public static final int STATE_EXPANDED = 3;
/**
* The bottom sheet is collapsed.
*/
public static final int STATE_COLLAPSED = 4;
/**
* The bottom sheet is hidden.
*/
public static final int STATE_HIDDEN = 5;
내 가 STATE 를 보 았 을 때EXPANDED 와 STATECOLLAPSED 는 그 용법 을 알 게 되 었 습 니 다.펼 치고 숨 기 는 것 이 아 닙 니까?그래서 우 리 는 이 상 태 를 판단 합 니 다.숨 기 면 표시 하고 표시 하면 숨 깁 니 다.
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_bottom_sheet_control) {
if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
}
여기까지 첫 페이지 에 있 는 Bottom 의 숨겨 진 모습 과 디 스 플레이 를 알 고 놀 았 습 니 다.알 리 페 이 타 오 바 오의 아래 탄창 이 어떻게 실현 되 는 지 살 펴 보 겠 습 니 다.BottomSheetDialog 는 어떻게 합 니까?
이런 발견 도 안 드 로 이 드 홈 페이지 에서 BottomSheet Behavior 를 검색 할 때 발 견 된 것 입 니 다.BottomSheet Dialog 를 보 자마자 마음 이 미 친 듯 이 기뻐 했 습 니 다.나중에 제 가 검증 한 결과 효과 가 제 가 예상 한 것 과 똑 같 습 니 다.Dialog 라면 용법 은 일반 Dialog 와 다 를 바 가 없 을 것 입 니 다.
그리고 나 서 나 는 뉴 를 따라 BottomSheetDialog 를 만 들 었 다.
private BottomSheetDialog mBottomSheetDialog;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
createBottomSheetDialog();
}
private void createBottomSheetDialog() {
mBottomSheetDialog = new BottomSheetDialog(this);
View view = LayoutInflater.from(this).inflate(R.layout.dialog_bottom_sheet, null, false);
mBottomSheetDialog.setContentView(view);
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
...
recyclerView.setAdapter(adapter);
}
View 안 은 RecyclerView 입 니 다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
그리고 아래 코드 로 표시 와 숨 김 을 제어 합 니 다.
if (mBottomSheetDialog.isShowing()) {
mBottomSheetDialog.dismiss();
} else {
mBottomSheetDialog.show();
}
이 Dialog Show 가 나 왔 을 때 반 을 보 여 주 었 습 니 다.네,이 효과 가 정말 좋 습 니 다.그러면 우리 가 처음에 말 한 알 리 페 이 비밀번호 팝 업 창 과 타 오 바 오/티몰 상품 속성 선택 에 이 르 렀 습 니 다.우리 가 미 끄 러 질 때 아래 에 내용 이 있 으 면 EXPANDED 가 됩 니 다.일반적인 View(비 RecyclerView,Nested ScrollView)라면 계속 위로 미 끄 러 지지 않 고 아래 내용 은 계속 따라 나 오지 만 아래로 미 끄 러 져 숨 길 수도 있 고 dismiss 와 close 로 닫 을 수도 있 습 니 다.BottomSheetDialog 의 신 갱
정 겨 운 프로그래머 로 서 제 가 밟 았 던 구덩이 와 해결 방안 을 여러분 과 공유 하 겠 습 니 다.
나 는 이 Dilaog 가 열 리 고 닫 히 면 Dialog.show()로 다시 열 수 없다 는 것 을 알 았 다.왜 일 까?
나 는 BottomSheetDialog 소스 코드 를 읽 고 다음 과 같은 코드 를 발견 했다.
@Override
public void setContentView(View view, ViewGroup.LayoutParams params) {
super.setContentView(wrapInBottomSheet(0, view, params));
}
private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
final CoordinatorLayout coordinator = View.inflate(getContext(),R.layout...., null);
FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
BottomSheetBehavior.from(bottomSheet).setBottomSheetCallback(mBottomSheetCallback);
...
return coordinator;
}
private BottomSheetCallback mBottomSheetCallback = new BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
dismiss();
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
};
즉,시스템 의 BottomSheetDialog 는 BottomSheetBehavior 를 기반 으로 포 장 된 것 으로,여기 서 우리 가 미끄러져 BottomSheetBehavior 의 View 를 숨 긴 후 내부 에 BottomSheetBehavior 가 설 치 된 상 태 를 STATE 로 판단 했다.HIDDEN,이어서 Dialog 를 닫 아 주 었 습 니 다.그래서 dialog.show()를 다시 호출 할 때 Dialog 는 이 상태 에서 HIDE 인 dialog 를 열 수 없습니다.여기에 의문 이 하나 있다.
Google 은 왜 BottomSheetCallback 인 터 페 이 스 를 자체 적 으로 설정 하지 않 았 습 니까?
괜 찮 습 니 다.소스 코드 를 보면 간단 합 니 다.저희 가 직접 실현 하고 사용자 가 미 끄 러 지 는 것 을 듣 고 BottomSheetDialog 를 닫 은 후에 저 희 는 BottomSheetBehavior 의 상 태 를 BottomSheetBehavior.STATE 로 설정 합 니 다.COLLAPSED,즉 반 열 린 상태(BottomSheet Behavior.STATEEXPANDED 는 모두 열기)원본 코드 에 따라 설정 방법 을 제공 합 니 다.
private void setBehaviorCallback() {
View view = mBottomSheetDialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet);
final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(view);
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
mBottomSheetDialog.dismiss();
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
}
이렇게 해서 BottomSheetDialog 가 닫 힌 후에 다시 열 수 없 는 문 제 를 해결 했다.원본 다운로드:http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.