Google Haritalar'ın alt sayfa 3 aşamalı davranışını nasıl taklit edebilirim?


110

Arka fon

Google Haritalar'ın bulunan bir sonuç için alt sayfayı nasıl gösterdiğine benzer şekilde davranan bir kullanıcı arayüzü yapmak üzere görevlendirildim.

Üç farklı aşaması vardır:

  1. Alt içerik. Üst alan hala dokunulabilir ve alt kısımdaki hiçbir şeyi kaydırmaz
  2. Tam ekran içeriği, üst alanda ise büyük bir başlık vardır.
  3. Tam ekran içeriği, üst kısımda sadece araç çubuğu bulunur.

İşte Google Haritalar'da bahsettiğim konu:

Buraya resim açıklamasını girin

Sorun

Mesele şu ki, alt sayfa henüz tasarım kitaplığının bir parçası değil ( burada talep edilmiş olmasına rağmen ).

Sadece bu da değil, kullanıcı arayüzü oldukça karmaşık görünüyor ve araç çubuğunun birden çok aşamada kullanılması gerekiyor.

Ne denedim

Alt sayfa ( burada ) için iyi (yeterli) bir kitaplık buldum ve malzeme tasarım örneklerinde gösterilenle ( burada olduğu gibi ) yaklaşık aynı görünümlere sahip olmak için parça örneğine içerik ekledim , CollapsingToolbarLayout 2 + 3 aşamaları.

Yaptığım uygulamada, siz kaydırdıkça bir simgeyi de hareket ettirmem gerekiyor, ancak geri kalanıyla başarılı olursam, bunun kolay olacağını düşünüyorum. İşte kod:

fragment_my.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Related"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@android:drawable/ic_menu_send"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

MyFragment.java

public class MyFragment extends BottomSheetFragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_my, container, false);
        view.setMinimumHeight(getResources().getDisplayMetrics().heightPixels);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("AAA");
        final Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
        final AppCompatActivity activity = (AppCompatActivity) getActivity();
        activity.setSupportActionBar(toolbar);
        activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                NavUtils.navigateUpFromSameTask(getActivity());
            }
        });
        final ImageView imageView = (ImageView) view.findViewById(R.id.backdrop);

        Glide.with(this).load(R.drawable.cheese_1).centerCrop().into(imageView);
        return view;
    }
}

BottomSheetFragmentActivity.java

public final class BottomSheetFragmentActivity extends AppCompatActivity {

    protected BottomSheetLayout bottomSheetLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet_fragment);
        bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
        findViewById(R.id.bottomsheet_fragment_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new MyFragment().show(getSupportFragmentManager(), R.id.bottomsheet);
            }
        });
        bottomSheetLayout.setShouldDimContentView(false);
        bottomSheetLayout.setPeekOnDismiss(true);
        bottomSheetLayout.setPeekSheetTranslation(200);
        bottomSheetLayout.setInterceptContentTouch(false);
        bottomSheetLayout.setDefaultViewTransformer(new BaseViewTransformer() {
            @Override
            public void transformView(final float translation, final float maxTranslation, final float peekedTranslation, final BottomSheetLayout parent, final View view) {
                Log.d("AppLog", "translation:" + translation + " maxTranslation:" + maxTranslation + " peekedTranslation:" + peekedTranslation);
            }
        });
    }
}

Neredeyse iyi çalışıyor. Tek sorun, # 3'ten # 2'ye geçiş:

görüntü açıklamasını buraya girin

Soru

Kodun nesi var? Gerekli davranışı elde etmek için ne yapabilirim?


Bana Etkinlik Geçişleri gibi görün. 2 Aktivite oluşturmayı ve bunlar arasında malzeme geçişleri uygulamayı denediniz mi? Ve CoordinatorLayout2. ekranda kullanılıyor?
SD

@SD 2 etkinlik olmadığından eminim çünkü aşamalar arasında gezinmek ve geçiş yapmak için ekrana dokunmaya devam edebilirsiniz. Bir sonraki / önceki aktiviteye gitmenizi engellemez. Yeni bir aktivite açarken, kaydırma mekanizması için aynı dokunma olaylarını sürdürmenin mümkün olduğunu sanmıyorum. Parçaların kullanılmasının mümkün olup olmadığından bile emin değilim, ama bu muhtemelen aktivitelerden daha mümkün.
android geliştiricisi

O zaman tüm görünümlerin aynı düzende olduğunu ve her birinin üzerinde belirli bir Davranış setine sahip olduğunu düşünüyorum. Ve tüm davranışlar, her şeyi koordine eden kök düzenindeki dikey kaydırma engellemesinden tetikleniyor.
SD

@SD Nasıl çalışmasını sağlayacağınızı biliyor musunuz? Bulduğumdan daha mı iyi?
android geliştiricisi

1
Bence bu kütüphaneye bir göz atmalısın .
Savelii Zagurskii

Yanıtlar:


18

Not : Alttaki düzenlemeleri okuyun


Tamam, bunu yapmanın bir yolunu buldum, ancak birden çok sınıfın kodunu değiştirmek zorunda kaldım, böylece alttaki sayfa appBarLayout'un durumunu bilsin (genişletilmiş veya değil) ve bu durumda yukarı kaydırmayı genişletilmedi:

BottomSheetLayout.java

Eklenen alanlar:

private AppBarLayout mAppBarLayout;
private OnOffsetChangedListener mOnOffsetChangedListener;
private int mAppBarLayoutOffset;

init () - şunu ekledi:

    mOnOffsetChangedListener = new OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
            mAppBarLayoutOffset = verticalOffset;
        }
    };

AppBarLayout'u ayarlamak için işlev eklendi:

public void setAppBarLayout(final AppBarLayout appBarLayout) {
    if (mAppBarLayout == appBarLayout)
        return;
    if (mAppBarLayout != null)
        mAppBarLayout.removeOnOffsetChangedListener(mOnOffsetChangedListener);
    mAppBarLayout = appBarLayout;
    mAppBarLayout.addOnOffsetChangedListener(mOnOffsetChangedListener);
}

onDetachedFromWindow () - şunu ekledi:

    if (mAppBarLayout != null)
        mAppBarLayout.removeOnOffsetChangedListener(mOnOffsetChangedListener);

onTouchEvent () - şunu ekledi:

      ...
      if (bottomSheetOwnsTouch) {
        if (state == State.EXPANDED && scrollingDown && mAppBarLayout != null && mAppBarLayoutOffset != 0) {
            event.offsetLocation(0, sheetTranslation - getHeight());
            getSheetView().dispatchTouchEvent(event);
            return true;
        }
      ...

Bunlar ana değişikliklerdi. Şimdi onları ayarlayan şey için:

MyFragment.java

onCreateView () - şunu ekledi:

    mBottomSheetLayout.setAppBarLayout((AppBarLayout) view.findViewById(R.id.appbar));

Bu işlevi de ekledim:

 public void setBottomSheetLayout(final BottomSheetLayout bottomSheetLayout) {
    mBottomSheetLayout = bottomSheetLayout;
}

Şimdi etkinlik, appBarLayout ile ilgili parçayı şu şekilde anlatıyor:

            final MyFragment myFragment = new MyFragment();
            myFragment.setBottomSheetLayout(bottomSheetLayout);
            myFragment.show(getSupportFragmentManager(), R.id.bottomsheet);

Proje artık GitHub'da mevcuttur:

https://github.com/AndroidDeveloperLB/ThreePhasesBottomSheet

Umarım herhangi bir hatası yoktur.


Maalesef çözümde hatalar var, bu yüzden bu yanıtı doğru yanıt olarak işaretlemeyeceğim:

  1. Yalnızca Android 6 ve üzeri sürümlerde iyi çalışır. Diğerlerinin, her seferinde, her seferinde, alt sayfayı bir zamanın çok küçük bir bölümünde genişletilmiş olarak gösterme gibi garip bir davranışı vardır.
  2. Yön değişiklikleri kaydırma durumunu hiç kaydetmiyor, bu yüzden devre dışı bıraktım.
  3. Hala daraltılmış haldeyken alt sayfanın içeriğini kaydırmanın nadir görülen bir sorunu (altta)
  4. Daha önce bir klavye gösterilmişse, bakılmaya çalışıldığında alt sayfa tam ekrana geçebilir.

Yardım edebilecek biri varsa lütfen yapın.


1. sorun için, alt sayfa henüz göz atılmadığında görünürlüğü GÖRÜNMEZ olarak ayarlayarak bir düzeltme eklemeyi denedim, ancak her zaman çalışmıyor, özellikle bir klavye gösteriliyorsa.


1. sorun için, CoordinatorLayout'u kullanmak istediğiniz herhangi bir görünümle ("fragment_my.xml" içinde) sarmalayarak (FrameLayout kullandım) ve ayrıca tam boyutlu bir görünüm koyarak nasıl düzelteceğimi buldum ("Görünüm" yazdım), şu şekilde:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--This full sized view, together with the FrameLayout above, are used to handle some weird UI issues on pre-Android-6 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <...CollapsingToolbarLayout 
    ...

CoordinatorLayout'un görüşünü aldığımda, muhtemelen alt sayfayı karıştırdı. Projeyi güncelledim, ancak yine de daha güzel bir çözüme sahip olmanın bir yolu varsa, bunu bilmek isterim.


Geçtiğimiz aylarda Google kendi bottomSheet sınıfını yayınladı, ancak bulduğum kadarıyla birçok sorunu var, bu yüzden deneyemiyorum bile.


peki ya bu görüntü? cloud.githubusercontent.com/assets/5357526/11641271/… Bu tür bir resim slaydı uygulamak istiyorum ve alt sayfa yukarı çıkıyor
Hardy

@HBdroid Bence mümkün. belki "onOffsetChanged" işlevi için mBottomSheetBackgroundImageView çevirisini de değiştirebilir misiniz? Benim durumumdaki gereksinim ilk önce 3 aşamayı ele almaktı. Şimdi bu, neyin nasıl değiştirileceği sorusudur ve bu çok özeldir ve ihtiyaçlarınıza bağlıdır. Aynı zamanda çok fazla sinir bozucu matematik gerektirir. Denemeyi hızlı hale getirmek için anında çalıştırma özelliğini kullanmanızı öneririm.
android geliştiricisi

Çözümü bulamıyorum lütfen yardım edin
Hardy

@HBdroid Üzgünüm bilmiyorum. Belki bu uygulamayı kaldırmayı deneyin: layout_collapseMode = "parallax". ayrıca çeviriyi transformView'da yapmayı deneyin.
android geliştiricisi

2
@Hardy, istediğiniz çözümü oluşturdunuz mu? evet ise açık kaynak kodlu ve paylaşılabilir mi?
N Jay

15

BÜYÜK GÜNCELLEME

Çünkü aynı konuyla ilgili AMA FARKLI gereksinimleri olan 4 veya 5 soru vardı ve hepsini cevaplamaya çalıştım, ancak kibar olmayan bir yönetici onları sildi / kapattı, her biri için bir bilet oluşturup bunları değiştirmemi sağladı. "kopyala yapıştır" dan kaçının Size, Google Haritalar gibi tam davranışı nasıl elde edeceğinizle ilgili tüm açıklamaları bulabileceğiniz tam yanıta bir bağlantı vereceğim .


Sorunuzu cevaplamak

Google Haritalar'ın alt sayfa 3 aşamalı davranışını nasıl taklit edebilirim?

23.x.x + destek kitaplığı ile, varsayılanı değiştirerek, BottomSheetBehavioraşağıdaki adımlarla bir istatistik daha ekleyerek yapabilirsiniz:

  1. Bir Java sınıfı oluşturun ve bunu CoordinatorLayout.Behavior<V>
  2. Varsayılan BottomSheetBehaviordosyadan yeni dosyanıza kodu kopyalayın .
  3. Yöntemi clampViewPositionVerticalaşağıdaki kodla değiştirin:

    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
        return constrain(top, mMinOffset, mHideable ? mParentHeight : mMaxOffset);
    }
    int constrain(int amount, int low, int high) {
        return amount < low ? low : (amount > high ? high : amount);
    }
  4. Yeni bir durum ekleyin:

    public static final int STATE_ANCHOR_POINT = X;
  5. Aşağıdaki yöntemler değiştirin: onLayoutChild, onStopNestedScroll, BottomSheetBehavior<V> from(V view)ve setState(isteğe bağlı)

Bu değiştirilmiş yöntemleri ve örnek projeye bir bağlantı ekleyeceğim .

Ve işte nasıl göründüğü:
CustomBottomSheetBehavior


Şimdi github deposunu test ettim ve güzel görünüyor. Ancak üstteki mavi alan bazen kısmi görünüyor. Ayrıca, alt sayfayı sürüklerken taşınması gereken görünümleri nerede işleyeceğimi bulamıyorum. Yaptığım depoda (burada: github.com/AndroidDeveloperLB/ThreePhasesBottomSheet ), görüntü soluyor ve küçük görüntü, boyutu da dahil olmak üzere bir yerden diğerine taşınıyor. Bunları nereye ekleyeceğimi bilmek istiyorum.
android geliştiricisi

Merhabalar, paralaks görüntüsüne sahip yerel bir sürümüm var ama henüz iyi çalışmıyor (Bakmak istersen itebilirim). İçinde herhangi bir görünümü ekleyebilirsiniz CoordinatorLayoutin activity_main.xml. Koordinatör düzeni konusunda iyi bir deneyime sahip olduğunuzu tahmin ediyorum, yoksa bulduğum
MiguelHincapieC

Araç çubuğu davranışını nasıl elde ettiğinizi göreceğim ve benimkinde kullanacağım: D. Bu arada, yalnızca destek kitaplığı 23.2'yi kullanırsam taklit edebileceğim küçük bir davranış var: Google haritalarında, araç çubuğunun altındaki görüntüyü sürüklerseniz alt sayfayı hareket ettirir, ancak 23.4 veya minSdkVersion 14+ sürümüne yükseltirseniz bu davranışı kaybet o_O '
MiguelHincapieC

@androiddeveloper Anladım! şimdi görüntü paralaks efekti ve araç çubukları animasyonlarıyla çalışıyor ... Sadece yukarı kaydırmaya devam ettiğinizde araç çubuğunu alan rengi özlüyorum: D
MiguelHincapieC

@MiguelHincapieC Merhaba, sadece ana araç çubuğunu görüntülemek istiyorum ve birleştirilmiş uygulama çubuğu düzenini kaldırdım, ancak alt sayfada zaman durum çubuğunu genişletme ve durum çubuğu konumuna parallex görüntüyü sonlandırma ve ana araç çubuğunun altında parallex görüntü yapışkan yapmak istiyorum. bunu nasıl yapabilirim açıklayabilir misin
Vijay Rajput

0

Bunu denedin mi http://android-developers.blogspot.in/2016/02/android-support-library-232.html?m=1 Burada, sadece bir alt sayfa düzeni davranışı belirtebileceğimizi söylüyor.

GÜNCELLEME:

Temelde bağlantı durumu-

Bir CoordinatorLayout'un alt Görünümüne bir BottomSheetBehavior ekleyerek (yani, app: layout_behavior = "android.support.design.widget.BottomSheetBehavior"), beş durum arasında geçiş yapmak için uygun dokunma algılamasını otomatik olarak elde edersiniz:

STATE_COLLAPSED: this collapsed state is the default and shows just a portion of the layout along the bottom. The height can be controlled with the app:behavior_peekHeight attribute (defaults to 0)
STATE_DRAGGING: the intermediate state while the user is directly dragging the bottom sheet up or down
STATE_SETTLING: that brief time between when the View is released and settling into its final position
STATE_EXPANDED: the fully expanded state of the bottom sheet, where either the whole bottom sheet is visible (if its height is less than the containing CoordinatorLayout) or the entire CoordinatorLayout is filled
STATE_HIDDEN: disabled by default (and enabled with the app:behavior_hideable attribute), enabling this allows users to swipe down on the bottom sheet to completely hide the bottom sheet
Keep in mind that scrolling containers in your bottom sheet must support nested scrolling (for example, NestedScrollView, RecyclerView, or ListView/ScrollView on API 21+).

Durum değişikliklerinin geri aramalarını almak istiyorsanız, bir BottomSheetCallback ekleyebilirsiniz:

// 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  
   }  
 });  

BottomSheetBehavior kalıcı alt sayfa durumunu yakalarken, bu sürüm aynı zamanda, modal alt sayfa kullanım durumunu doldurmak için BottomSheetDialog ve BottomSheetDialogFragment sağlar. Diyaloğunuzun alt sayfa olarak biçimlendirilmesi için AppCompatDialog veya AppCompatDialogFragment'ı alt sayfa eşdeğerleriyle değiştirmeniz yeterlidir.


Soru, Google destek kitaplığı sınıfını göstermeden önce yapıldı. Eğer onu kullanan çalışan bir çözümünüz varsa, lütfen burada gösterin.
android geliştiricisi

@androiddeveloper Sorunun tarihini okumadım ve bu yüzden bu cevabı önerdim. Ama bu kütüphaneyi kullanmak istiyorsanız, onu kullanabilirsiniz. Bu kod için çalışma çözümü konusunda bende yok. Afedersiniz.
Vaibhav Sharma

0

Ayrıca, Google Haritalar'ın bulunan bir sonuç için alt sayfayı nasıl gösterdiğine benzer bir görünüm uygulamam gerekiyordu.

Benimki şöyle görünüyor:

Göz atma görünümü

Yukarı kaydırılmış görünümü genişlet

Görünümü aşağı kaydırarak genişlet

İlk başta, bir başlık ve kaydırılabilir içeriğe sahip bir alt sayfa tanımladım, ancak layout_height, belirtilmesine rağmen içeriği ne üstbilgi ne de kaydırılabilir içeriği sarmıyor gibiydi wrap_content.

Bu sorun , 'ın çocuk düzeni (ve çocukları için) LinearLayoutyerine kullandığımda ortadan kalktı.ConstraintLayoutCoordinatorLayout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/buttonPeek"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Peek"
        app:layout_constraintEnd_toStartOf="@+id/buttonExpand"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonExpand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Expand"
        app:layout_constraintEnd_toStartOf="@+id/buttonClose"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/buttonPeek"
        app:layout_constraintTop_toTopOf="@+id/buttonPeek" />

    <Button
        android:id="@+id/buttonClose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/buttonExpand"
        app:layout_constraintTop_toTopOf="@+id/buttonExpand" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/layout_coordinator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/layout_coordinator_child"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:behavior_hideable="true"
            app:layout_behavior="@string/bottom_sheet_behavior">

            <LinearLayout
                android:id="@+id/layout_bottom_sheet_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFF0000"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/headerTextView_a"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="a" />

                <TextView
                android:id="@+id/headerTextView_b"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b" />

                <TextView
                android:id="@+id/headerTextView_c"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="c" />

                <TextView
                android:id="@+id/headerTextView_d"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="d" />

                <TextView
                android:id="@+id/headerTextView_e"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="e" />

                <TextView
                android:id="@+id/headerTextView_f"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="f" />

                <TextView
                android:id="@+id/headerTextView_g"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="g" />

                <TextView
                android:id="@+id/headerTextView_h"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="h" />

                <TextView
                android:id="@+id/headerTextView_i"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="i" />

                <TextView
                android:id="@+id/headerTextView_j"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="j" />

                <TextView
                android:id="@+id/headerTextView_k"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="k" />

            </LinearLayout>

            <androidx.core.widget.NestedScrollView
                android:id="@+id/layout_bottom_sheet_scrollable_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FF00FF00"
                android:fillViewport="true" >

                <LinearLayout
                    android:id="@+id/layout_bottom_sheet_scrollable_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/textView0"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="0" />

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="1" />

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="2" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="3" />

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="4" />

                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="5" />

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="6" />

                    <TextView
                        android:id="@+id/textView7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="7" />

                    <TextView
                        android:id="@+id/textView8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="8" />

                    <TextView
                        android:id="@+id/textView9"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="9" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="10" />

                    <TextView
                        android:id="@+id/textView11"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="11" />

                    <TextView
                        android:id="@+id/textView12"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="12" />

                    <TextView
                        android:id="@+id/textView13"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="13" />

                    <TextView
                        android:id="@+id/textView14"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="14" />

                    <TextView
                        android:id="@+id/textView15"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="15" />

                    <TextView
                        android:id="@+id/textView16"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="16" />

                    <TextView
                        android:id="@+id/textView17"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="17" />

                    <TextView
                        android:id="@+id/textView18"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="18" />

                    <TextView
                        android:id="@+id/textView19"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="19" />

                    <TextView
                        android:id="@+id/textView20"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="20" />

                    <TextView
                        android:id="@+id/textView21"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="21" />

                    <TextView
                        android:id="@+id/textView22"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="22" />

                    <TextView
                        android:id="@+id/textView23"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="23" />

                    <TextView
                        android:id="@+id/textView24"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="24" />

                    <TextView
                        android:id="@+id/textView25"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="25" />

                    <TextView
                        android:id="@+id/textView26"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="26" />

                    <TextView
                        android:id="@+id/textView27"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="27" />

                    <TextView
                        android:id="@+id/textView28"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="28" />

                    <TextView
                        android:id="@+id/textView29"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="29" />

                    <TextView
                        android:id="@+id/textView30"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="30" />

                    <TextView
                        android:id="@+id/textView31"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="31" />

                    <TextView
                        android:id="@+id/textView32"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="32" />

                    <TextView
                        android:id="@+id/textView33"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="33" />

                    <TextView
                        android:id="@+id/textView34"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="34" />

                    <TextView
                        android:id="@+id/textView35"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="35" />

                    <TextView
                        android:id="@+id/textView36"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="36" />

                    <TextView
                        android:id="@+id/textView37"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="37" />

                    <TextView
                        android:id="@+id/textView38"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="38" />

                    <TextView
                        android:id="@+id/textView39"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="39" />

                    <TextView
                        android:id="@+id/textView40"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="40" />

                    <TextView
                        android:id="@+id/textView41"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="41" />

                    <TextView
                        android:id="@+id/textView42"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="42" />

                    <TextView
                        android:id="@+id/textView43"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="43" />

                    <TextView
                        android:id="@+id/textView44"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="44" />

                    <TextView
                        android:id="@+id/textView45"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="45" />

                    <TextView
                        android:id="@+id/textView46"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="46" />

                    <TextView
                        android:id="@+id/textView47"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="47" />

                    <TextView
                        android:id="@+id/textView48"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="48" />

                    <TextView
                        android:id="@+id/textView49"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="49" />

                </LinearLayout>

            </androidx.core.widget.NestedScrollView>
        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.bottomsheetwithscrollablecontent;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.android.material.bottomsheet.BottomSheetBehavior;

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

public class MainActivity extends AppCompatActivity {
    private CoordinatorLayout layout_coordinator;
    private View layout_coordinator_child;
    private View layout_bottom_sheet_header;

    private BottomSheetBehavior behavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout_coordinator = findViewById(R.id.layout_coordinator);
        layout_coordinator_child = layout_coordinator.findViewById(R.id.layout_coordinator_child);
        layout_bottom_sheet_header = layout_coordinator.findViewById(R.id.layout_bottom_sheet_header);

        behavior = BottomSheetBehavior.from(layout_coordinator_child);

        Button buttonPeek = findViewById(R.id.buttonPeek);
        buttonPeek.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                behavior.setPeekHeight(layout_bottom_sheet_header.getHeight());
                behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            }
        });

        Button buttonExpand = findViewById(R.id.buttonExpand);
        buttonExpand.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        Button buttonClose = findViewById(R.id.buttonClose);
        buttonClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
            }
        });
    }
}

Uygulamanın / build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.bottomsheetwithscrollablecontent"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.0-alpha4'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha4'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0-beta01'
    implementation "com.google.android.material:material:1.1.0-alpha04"
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.