CoordinatorLayout'ta araç çubuğunun altına görünüm ekleyin


176

Aşağıdaki düzenim var:

<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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.design.widget.CoordinatorLayout>

Ben eklemek Fragmentiçine s FrameLayoutbunların yerine,. Benim Fragments biri aşağıdaki düzeni olan bir liste:

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Burada sorunum araç çubuğunun listenin üzerine çizilmesi . Bunu, içeriğinin CoordinatorLayoutbir içine sararak çözmeyi denedim LinearLayout, bu aşırı çekmeyi çözdü, ancak bu şekilde appbar kaydırma davranışı artık çalışmıyor.

Herhangi bir yardım çok takdir!

Yanıtlar:


355

Özelliği al

app:layout_behavior="@string/appbar_scrolling_view_behavior"

kapalı RecyclerViewve FrameLayoutaltında göstermeye çalıştığınız koymak Toolbar.

Kaydırma görünümü davranışının yaptığı önemli bir şey, araç çubuğunun altındaki bileşeni düzenlemek olduğunu gördüm. FrameLayout( RecyclerView) Kaydırılacak bir alt öğeye sahip olduğundan, CoordinatorLayoutbu kaydırma olaylarını taşımak için alır Toolbar.


Bu düzen davranışı neden olur: biri başka şey farkında olmak FrameLayoutyüksekliği boyutta olması sanki Toolbarzaten kaydırılan ve birlikte, Toolbartam görünüm alt tabanına altında olduğunu basitçe böylece aşağı doğru itilir tüm görünüm görüntülenen CoordinatorLayout.

Bu benim için sürpriz oldu. Araç çubuğu yukarı ve aşağı kaydırılırken görünümün dinamik olarak yeniden boyutlandırılmasını bekliyordum. Dolayısıyla, görünümünüzün altında sabit bir bileşen içeren bir kaydırma bileşeniniz varsa, öğeyi tamamen kaydırıncaya kadar bu alt bileşeni görmezsiniz Toolbar.

Kullanıcı arayüzünün alt kısmındaki bir düğmeyi tutturmak istediğimde, düğmeyi CoordinatorLayout( android:layout_gravity="bottom") altına yerleştirerek ve düğmenin araç çubuğunun altındaki görünüme eşit bir alt kenar boşluğu ekleyerek bunun etrafında çalıştım .


1
Çok teşekkürler, bu gerçekten işe yarıyor! Bundan sonra tek sorunum, araç çubuğu taşındıysa, içereni Fragmentbaşka bir listeyle değiştirdikten sonra geri dönmedi Fragment. Araç çubuğunu bu şekilde manuel olarak göstermeyi başardım .
WonderCsabo

Vay. Her zaman Fragment'ın kendi düzeninin FrameLayout "yer tutucusunun" tamamen yerini aldığını düşündüm, ancak bunun hiç de böyle olmadığını görüyorum. Bu cevap için teşekkürler! Bana çok yardımcı oldu.
Aspiring Dev


Güzel. Teşekkür ederim!
Razvan

87

Ekleyerek bunu düzeltmeyi başardım:

android: layout_marginTop = "android:? özn / actionBarSize"

FrameLayout'a şöyle:

 <FrameLayout
        android:id="@+id/content"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

9
MarginTop eklemek yerine add app: layout_behavior = "@ string / appbar_scrolling_view_behavior"
Naveed Ahmad

3
@ String / appbar_scrolling_view_behavior olmadığında mükemmel çözüm
Julius

Lütfen kullanınandroid:layout_marginTop="?android:attr/actionBarSize"
Martin Pfeffer

6
Bu biraz hacky, MIGHT boyutunun ne olacağına bir kenar boşluğu ekliyor (her zaman bu boyutta bir araç çubuğuna sahip olacağınızı varsayarak) bir noktada kırılacak
Kenny

0

Android studio 3.4'ten itibaren, bu satırı tutan Düzeninize koymanız gerekir RecyclerView.

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

0

Çöken üst Araç Çubuğunu kullanmak veya kendi seçtiğiniz ScrollFlags'ı kullanmak için şu şekilde yapabiliriz: Material Design'dan FrameLayout'tan kurtulun

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|enterAlways">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/ic_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="back"
                android:textSize="16sp"
                android:textStyle="bold" />

        </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/post_details_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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.