Android 머티리얼 디자인 문서에서 하단 시트를 구현하는 방법


79

하단 시트 사양을 어떻게 구현합니까? http://www.google.com/design/spec/components/bottom-sheets.html

Google 드라이브의 새로운 업데이트는 플로팅 작업 버튼 누름->

여기에 이미지 설명 입력

허용되는 사양은 가능 여부에 관계없이 둥근 모서리에 대해 아무 말도하지 않고 어떻게해야할지 확신 할 수 없습니다. 현재 AppCompat 라이브러리를 사용하고 있으며 대상은 21로 설정되어 있습니다.

감사


링크가 끊어졌습니다. 새 링크 material.io/design/components/sheets-bottom.html#usage
Ray Li

답변:


66

편집하다

BottomSheet지금의 일부입니다 android-support-library. John Shelleys의 답변을 참조하십시오 .


안타깝게도 현재이 작업을 수행하는 방법에 대한 "공식적인"방법이 없습니다 (적어도 내가 아는 바 없음).
다행스럽게도 "BottomSheet"(클릭) 라는 라이브러리 가 있습니다.BottomSheet Android 2.1 이상을 지원 있습니다.

드라이브 앱의 경우이 라이브러리의 코드는 다음과 같습니다.

    new BottomSheet.Builder(this, R.style.BottomSheet_Dialog)
            .title("New")
            .grid() // <-- important part
            .sheet(R.menu.menu_bottom_sheet)
            .listener(new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            // TODO
        }
    }).show();

menu_bottom_sheet (기본적으로 표준 /res/menu/*.xml 리소스)

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/folder"
        android:title="Folder"
        android:icon="@drawable/ic_action_folder" />
    <item
        android:id="@+id/upload"
        android:title="Upload"
        android:icon="@drawable/ic_action_file_upload" />
    <item
        android:id="@+id/scan"
        android:title="Scan"
        android:icon="@drawable/ic_action_camera_alt" />
</menu>

출력은 다음과 같습니다.

하단 시트의 그림

제 생각에는 원본과 매우 비슷합니다. 색상이 마음에 들지 않으면 사용자 정의 할 수 있습니다 . 여기를 클릭하십시오 (클릭) .


팔. 이것이 바로 제가 찾고있는 것입니다! 오늘 밤 한번해볼 게요!
John Shelley 2014

1
공유해 주셔서 감사합니다! 공유 의도에 표시되는 모든 옵션을 표시하려면 어떻게해야합니까? 장치에 설치된 앱을 기반으로 동적으로 생성됩니다. 그것이 어떻게 성취 될 수 있는지에 대한 생각이 있습니까?
Cat

1
@Cat Well 기본적으로 의도를 처리 할 수있는 모든 응용 프로그램의 목록 ( 예 : StackO-Question 참조)을 가져와 BottomSheet 를 "공급"하는 어댑터에 추가하면됩니다. 요청한 작업을 정확히 수행하는 lib의 공식 샘플을 볼 수도 있습니다. ( 클릭-라인 153-179 ).
reVerse

감사합니다 @reVerse! getShareActions가능한 모든 공유 옵션을 얻기 위해 메서드 에서 코드를 재사용했습니다 . Btw, .limit(R.integer.num_share_actions)시트가 전체 화면을 가리지 않는 한 빌더 를 호출 하는 것도 유용합니다
Cat

1
@JohnShelley 그건 괜찮아요. 나는 또한 "공식적인 해결책"을 추천하고 싶지만 현재로서는 정말 제한적이지만 적어도 구글은 마침내 기초를 놓았다. ;)
reVerse

65

개발자가 새로운 지원 라이브러리가 마침내 이것을 제공한다는 것을 알 수 있도록 내 질문에 답하십시오! 모두 강력한 Google을 환영합니다!

Android 개발자 블로그 의 예 :

// The View with the BottomSheetBehavior
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);  
BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);  
behavior.setBottomSheetCallback(new BottomSheetCallback() {  
   @Override  
   public void onStateChanged(@NonNull View bottomSheet, int newState) {  
     // React to state change  
   }  

  @Override  
  public void onSlide(@NonNull View bottomSheet, float slideOffset) {  
     // React to dragging events  
  }  
});

의 @reVerse의 답변 은 여전히 ​​유효한 옵션이지만 Google도 지원하는 표준이 있다는 것을 아는 것이 좋습니다.


게시 해 주셔서 감사합니다. 나는 이것이 지금 "정확한"대답이어야한다고 생각한다 :)
vine'th

@androiddeveloper 완료되었습니다. 현재 지원 특정 사항을 고려할 때 사용자가 해당 예제를 찾는 데 더 나은 운이있을 것이라고 생각합니다. 원래 질문을했을 때 지원 라이브러리에 제공되지 않았습니다. 질문이 "지원 라이브러리 하단 시트보기를 구현하는 방법"이라면 더 자세한 답변을 제공했을 것입니다. :)
John Shelley

@JohnShelley XML도 사용할 필요가 없습니까? 하단 시트보기 / 접기 (또는 하단에있을 때 호출되는 모든 항목)를 내용 줄 바꿈보기로 설정하고 확장 할 때 전체 화면으로 설정할 수 있습니까?
안드로이드 개발자

4
나는 구글의 새로운 지원 API를 사용하는 방법을 궁금해 많은 사람들이 생각하고 또는 Vipul 샤는 당신이 유튜브 링크를 참조하시기 바랍니다, 그것을 사용하는 방법을 이해하는 데 도움이 훌륭한 YouTube 링크가 stackoverflow.com/a/35731959/1053037를
호치민은의 Truong

문제는 남아 있습니다. 하단 시트 메뉴를 구현하는 방법입니다. 위의 예에서 메뉴 항목은 어디에 있습니까 ??????? 당신은 당신이 클릭 것으로, 메뉴 항목을 알고 ...
ekashking

8

블로그 게시물 다음 : http://android-developers.blogspot.com/2016/02/android-support-library-232.html

내 XML은 다음과 같이 보입니다.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinator_layout"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
        <ImageView
            android:src="@android:drawable/ic_input_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

그리고 내 조각의 onCreateView에서 :

    coordinatorLayout = (CoordinatorLayout)v.findViewById(R.id.coordinator_layout);
    View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setPeekHeight(100);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            // React to state change
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events
        }
    });

setPeekHeight의 기본값은 0이므로 설정하지 않으면 뷰를 볼 수 없습니다.


예, xml은 정확히 내 조각이 보이는 방식입니다. 당신을 위해 작동하지 않습니까?
mcorrado

기본 들여다 높이가 -1, 0이 아닌 (AUTO!)
Zordid

1
AndroidX를 사용하는 경우 패키지 이름 변경을 염두에 두십시오.com.google.android.material.bottomsheet.BottomSheetBehavior
Ultimo_m

메뉴 항목은 어디에 있습니까 ????????????????? (하단 메뉴의 요점)
ekashking

7

이제 공식을 사용할 수 있습니다. BottomSheetBehavior Android 지원 라이브러리 23.2에서 API를 .

아래는 샘플 코드 스 니펫입니다.

bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheet));

case R.id.expandBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
 break;
case R.id.collapseBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
 break;
case R.id.hideBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
 break;
case R.id.showBottomSheetDialogButton:
 new MyBottomSheetDialogFragment().show(getSupportFragmentManager(), "sample");

그것에 대한 이해를 얻으려면 Android BottomSheet youtube 자습서 를 참조하십시오 .


안녕하세요 Vipul, 링크 주셔서 감사합니다. 그래도 질문이 하나 있습니다. 하단 시트의 앵커 포인트를 설정할 수 있습니까?
koraxis

멋진 유튜브 링크. 어딘가에 공개 저장소에 소스 코드가 있습니까?
John Shelley

좋은 일, 당신이 내 일을 저장, 나는이 가능해야한다 대답 생각
FaisalAhmed

5

가이드 라인에있는 그대로 직선 모서리로 갈 것입니다. 구현에 관해서는-https: //github.com/umano/AndroidSlidingUpPanel 에서 아이디어를 사용하는 것이 가장 좋습니다.

그대로 사용하거나 구현 아이디어를 취할 수 있다고 생각합니다. 유사한 슬라이딩 패널을 구현하는 방법에 대한 또 다른 훌륭한 기사는 http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/ 에서 찾을 수 있습니다.


5

다른 옵션은 다음과 같습니다.

  • Flipboard 에서 사용 가능한 것이 있습니다. 에서 있지만 하단 시트가 작동하려면 임베딩 활동을 수정해야합니다.
  • tutti-ch 's bottomsheet : Android Repo의 ResolverActivity에서 추출되었으며 시작 활동을 수정할 필요가 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.