it-swarm.asia

Android Materyal Tasarımı dokümanlar Alt Sayfası nasıl uygulanır

Alt tabaka özelliklerini nasıl uygularsınız? http://www.google.com/design/spec/components/bottom-sheets.html

Google Drive’daki yeni güncelleme bunu Yüzer İşlem Düğmesi’yle birlikte gösterir ->

enter image description here

Teknik özelliklere yuvarlatılmış köşeler hakkında hiçbir şey söylemedi, yapılması mümkün olmasa da, nasıl yapılacağından emin değil. Şu anda AppCompat kütüphanesi ve hedefi 21'e ayarlanmış.

Teşekkürler

74
John Shelley

Kendi sorumu yanıtlayarak geliştiricilerin yeni destek kütüphanesinin nihayet bunu sağladığını bilmeleri! Hepsi güçlü Google'ı selamlayın!

Android Geliştiricisinin Blog'undan bir örnek :

// 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 yukarıdaki yanıt hala geçerli bir seçenek ancak Google’ın da desteklediği bir standart olduğunu bilmek Güzel.

61
John Shelley

Düzenle

BottomSheet şimdi Android-support-library öğesinin bir parçası. Bkz. John Shelley'nin cevabı .


Maalesef şu anda bunun nasıl yapılacağına dair "resmi" bir yol yok (en azından bildiğim kadarıyla).
Neyse ki, "BotSheet" (tıkla) adında, BottomSheet dosyasının görünümünü taklit eden ve Android 2.1 ve üzeri sürümleri destekleyen bir kütüphane var.

Drive uygulaması durumunda, kodun bu kitaplıkla nasıl göründüğü:

    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 (temelde standart /res/menu/*.xml kaynak)

<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>

Çıktı şöyle görünür:

picture of the bottom sheet

Ki bence, aslına oldukça yakın. Renklerden memnun değilseniz, onu özelleştirebilirsiniz - buna bakın (tıklayın) .

63
reVerse

Blog gönderisinin ardından: http://Android-developers.blogspot.com/2016/02/Android-support-library-232.html

Xml'im şöyle görünmeye başladı: 

<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>

Ve benim parçamın onCreateView'ında:

    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'ın varsayılan değeri 0'dır, bu nedenle ayarlamazsanız görünümünüzü göremezsiniz.

7
mcorrado

Artık Resmi BottomSheetBehavior API'yi Android destek kütüphanesinden 23.2 kullanabilirsiniz.

Aşağıda örnek kod pasajı 

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");

Anlamak için lütfen Android BottomSheet youtube tutorial 'a bakınız.

7
Vipul Shah

İşte diğer seçeneklerden bazıları:

  • Flipboard 'dan bir tane var, ancak gömme etkinliği Alt sayfanın çalışması için değiştirilmesi gerekiyor. 
  • tutti-ch's dipnot : Bu, Android Repo ResolverActivity'den çıkarıldı ve başlatma aktivitesinin değiştirilmesine gerek yok.
5
vine'th

Kurallarda olduğu gibi düz köşelerle giderdim. Uygulama gelince - belki de bu projeden fikir kullanmak en iyisidir: https://github.com/umano/AndroidSlidingUpPanel

Olduğu gibi kullanabileceğinizi veya uygulama fikrinizi alabileceğinizi düşünüyorum . Benzer sürgülü panellerin nasıl uygulanacağı ile ilgili harika bir makale burada bulunabilir: http://blog.neteril.org/blog/2013/10/10/framelayout-en iyi arkadaşın/

5
Zh. Atanasov

Google son zamanlarda Android Destek Kütüphanesi 23.2 resmi olarak Alt sayfaları / Android Tasarım Destek Kütüphanesine getiriyor.

0
Mehlyfication