کد XML ساخت appBarLayout

کد XML ساخت appBarLayout

 

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
// این اتریبیوت اینجا توضیح داده شده

    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
// وقتی تولبار میره بالا، قبل از رسیدن به وضعیت نهایی یه رنگی داره که این اتریبیوت مشخص میکنه
            app:contentScrim="@color/colorPrimary" 
            app:expandedTitleGravity="bottom|center"
            app:expandedTitleMarginBottom="15dp"
            app:expandedTitleMarginStart="15dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="My awesome APP"
            //زمان بالا رفتن تولبار
            app:scrimAnimationDuration="300"
            >


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/bg2"
//هر چی توی کلپسینگ قرار بگیره میتونه این اتریبیوت رو داشته باشه
//parallex: یعنی با جمع شدن تولبار هاید بشه
//pin: یعنی با جمع شدن تولبار ثابت بمونه
// واسه تولبار هم از این استفاده میکنیم
                app:layout_collapseMode="parallax"
                android:contentDescription="@string/app_name"
//این مشخص میکنه عکس تولبار چقدر بره بالا.
مثلا اگر یک باشه عکس ثابت میمونه و اصلا بالا نمیره و این اصلا قشنگ نیس
پیش فرض 0.5 هست و میتونه کمتر هم باشه تا مقدار بیشتری از عکس بره بالا 
                app:layout_collapseParallaxMultiplier="0.5"/>




این ویو روی عکس سایه میندازه


<!--            <View-->
<!--                android:layout_width="match_parent"-->
<!--                android:layout_height="100dp"-->
<!--                android:background="@drawable/shadow"-->
<!--                android:layout_gravity="bottom"/>-->


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetEnd="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
//برای منوی پاپ آپ استایل تعریف شده ، به طوری که رنگ بک گراندش تغییر کرده
                app:popupTheme="@style/PopUpMenu"/>


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


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


    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
//این میگه که این ویو بعد از اپ بار قرار بگیره
//اگر اینو حذف کنیم همه چی روی اپ بار میفته
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
// این همون سایه آبی هست که وقتی صفحه رو تا بالای بالا یا پایین پایین اسکرول
میکنیم ، نشون میده 
 اینجا        
android:overScrollMode="never">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="10dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="about"
                android:textStyle="bold"
                android:textSize="24sp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="12dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="@string/dummy_string"
                />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="@string/dummy_string"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="@string/dummy_string"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="@string/dummy_string"
                />

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_favorite"
//این و بعدی برای کردیناتور لیوت استفاده میشه
//واسه اینکه به لیوت مورد نظر بچسبه
//اینجا
        app:layout_anchor="@id/appBarLayout"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="24dp"
        app:maxImageSize="28dp"
        android:tint="#fff"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

توضیح انواع حالت های اسکرول در app:layout_scrollFlags در ویوی CollapsingToolbarLayout:  اینجا

 

فیلم خوبیه. اکثر اینا رو از این فیلم آموختم!

 

اینم طرح قشنگیه