<به نام خدایی که خود خالق ماست و ما را به شکلی آفرید که توانایی خلق نیاز هامون را داشته باشیم>

سلام محمد علی ریاضتی هستم و در این آموزش توی سایت “خانه اندروید” با شما همراهان همیشگی همراه هستم.

من گشتی توی اینترنت میزدم و میگشتم که متوجه موضوعی شدم. این آموزشی که بنده امروز قصد دارم براتون شرح بدم و مهم تر از همه (رایگان) توی بعضی سایتا فروشی بوده یا خیلی مختصر گفته شده یا خیلی پیچیده. من این در این آموزش نه از RecyclerView استفاده میکنم نه چیز دیگه ای که فقط ۲ Layout و یک کلاس تشکیل شده است.

خب زیاد حرف نمیزنم و میریم سراغ آموزشمون.

۱)  مرحله اول شما باید داخل گریدل برنامتون این ۴ خط کد را وارد کنید:

    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
    compile 'com.android.support:cardview-v7:23.1.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.1'

از کتابخانه design برای تولبارمون استفاده میکنیم.

از کتابخانه cardview هم برای نمایش متن های مورد نظرمون به صورت کادر بندی شده و شیک استفاده میکنیم.

نکته: برای اضافه کردن کتابخونه ها بهتره گریدلتون رو آنلاین کنید و با اینترنت بارگذاری کنید اما باید از برنامه های گذر از تحریم استفاده کنید و دلیل این هم تحریم بودن کشورمون توسط گوگل میباشد.

نکته: گاها شده که از ScrollingActivity  خود اندروید استودیو بخواهید استفاده کنید که نیازمند minSDK 14 است و شدنیه اما برای افراد مبتدی قابل درک نیست که چیشد و چرا شد.

*برای فهمیدن بهتر شما همراهان عزیز چون کدها ترکیب خواهند شد با جمله “//محل قرار گیری کدهای قسمت بعدی آموزش//” مشخص کردیم که مثلا کدی که در آموزش ۳) است باید در محلی که مشخص کردیم در کد ۲) گذاشته بشه!

۲) و حالا قسمت دوم آموزش نوشتن کد های لایه متناظرمون که ما به اسم main_activity قرار دادیم. در این لایه ابتدا لایه کلی خودمون رو تعریف میکنیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
    //محل قرار گیری کدهای قسمت بعدی آموزش//
    
</android.support.design.widget.CoordinatorLayout>

۳) حالا داخل تگ Layout اصلیمون یک AppBarLayout تعریف میکنیم:

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="320dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
      
        //محل قرار گیری کدهای قسمت بعدی آموزش//
       
       </android.support.design.widget.AppBarLayout>

*در پوشه values در فایل style کد های زیر را وارد وارد کنید:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#413E3E</item>
        <item name="colorPrimaryDark">#3F3E3D</item>
        <item name="colorAccent">#81C569</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>


    <style name="Widget.CardContent" parent="android:Widget">
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="android:paddingTop">24dp</item>
        <item name="android:paddingBottom">24dp</item>
        <item name="android:orientation">vertical</item>
    </style>

۴) حالا در تگ AppBarLayout کد های زیر را قرار میدیم:

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp" >

            <ImageView  
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:src="@drawable/your_pic"
                android:alpha="0.5"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="170dp"
                android:layout_gravity="center">


                <TextView
                    android:id="@+id/quote"
                    android:layout_width="match_parent"
                    android:layout_height="160dp"
                    android:layout_gravity="center"
                    android:textColor="#FFFFFF"
                    android:text="محل متن دلخواه شما"
                    android:textSize="25sp"
                    android:lineSpacingMultiplier="1.2"
                    android:gravity="center"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="&quot;"
                    android:textColor="#81C569"
                    android:textSize="70sp"
                    android:layout_alignParentTop="true"
                    android:layout_alignLeft="@+id/quote"
                    android:layout_alignStart="@+id/quote" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="&quot;"
                    android:textColor="#81C569"
                    android:textSize="70sp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignRight="@+id/quote"
                    android:layout_alignEnd="@+id/quote"/>
            </RelativeLayout>


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

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

و اما این که کد ها چی هستن؟

*در قسمت Collapsing Toolbar Layout تولبار متحرک خودمون رو تعریفف کردیم و طبق مشخصه هایی که میخواستیم تعریفش کردیم.

*ذر قسمت ImageView عکس بگراند تولبارمون که در پوشه Drawable قرار دادیم و با تولبار ست میکنیم و “آدرس عکس شما”=android:src است.

*در قسمت RelativeLayout ما درون تولبارمون یک layout اضافه میکنیم تا متن هامون رو داخلش قرار بدیم.

*در قسمت ۳تا textView ما ۳ عدد متن قرار دادیم یک متن ک در وسط عکس نمایش داده میشه و ۲ متن دیگه که مثل کادر متن اول قرار میگیره.

*و خارج از تگ RelativeLayout هم تولبار خودمون رو اضافه کردیم که بعد از بسته شدن تولبار متحرکمون اون تولبار رو نمایش بده.

کار تولبار متحرک ما تقریبا تموم شده اما هنوز نیاز به آیتم هایی داریم که توی عملکرد تولبار بهمون کمک کنند تا تولبارمون از زیبایی بیشتری برخوردار باشه پس با استفاده از cardView این کار رو انجام میدیم.

۵) در مسیر app/res/layout یک layout جدید میسازیم و اسم آن را من برابر با nested_scroll_view قرار میدم و هر آیتمی که نیاز دارم را درون اون میریزم. بعد ساخته شدن layout مقادیر پیش فرضی درون اون قرار داده شده پس شما اون مقادیر رو میبایست پاک کنید و مقادیر زیر را جایگزین کنید:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:android="https://schemas.android.com/apk/res/android">

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


      //محل قرار گیری کدهای قسمت بعدی آموزش//


    </LinearLayout>
    
</android.support.v4.widget.NestedScrollView>

*اینجا ما از یک به اصطلاح طومار تو در تو یا NestedScrollView استفاده کردیم برای تا بتونیم آیم هامون رو درونش قرار بدیم.

*درون NestedScrollView از یک LinierLayout استفاده کردیم تا بتوانیم تمامی آیتم های مد نطرمون رو درونش قرار بدیم.

۶) و حالا نوبت به استفاده از CardView میرسه که توی اون از یک Layout استفاده کردیم و داخلش ۲ تا TextView قرار دادیم مثل کد های زیر:

<android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp">

            <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="سربرگ"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="توضیحات سربرگ شما" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

۷) من در این آموزش از ۴تا CardView استفاده کردم برای بهتر عمل کردن تولبار متحرکمون و فرقی با کدهای بالا ندارن فقط کدهای بالا رو ۴ بار پشت هم کپی میکنیم مثل زیر:

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp">

            <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="سربرگ ۱"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="توضیحات ۱" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp">

            <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="سربرگ ۲"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="توضیحات ۲" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp">

            <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="سربرگ ۳"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="توضیحات ۳" />

            </LinearLayout>

        </android.support.v7.widget.CardView>
        
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp">

            <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="سربرگ ۴"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="توضیحات ۴" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

۸) حالا برمیگردیم به activity_main و بعد AppBarLayout با include لایه ای که ساختیم رو وارد میکنیم با نوشتن کد زیر:

    <include layout="@layout/nested_scroll_view"/>

*برای توضیح و درک بهتر به این روش عمل میکنیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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:fitsSystemWindows="true">


        //تمامی کد های مربوط به این قسمت را قبلا با هم وارد کردیم//


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

    <include layout="@layout/nested_scroll_view"/>


    //این قسمت مربوط به کدهای قسمت (۹) است که در گزینه بعد شرح میدهیم//


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

۹) و حالا نوبت به کار با دکمه fab یا همون FloatingActionButton میرسه کا با هم تکمیلش میکنیم, قسمت آخر طراحی دیزاین.

برای گذاشتن این سبک دکمه (درصورت نیاز) کافیه کد های زیر رو توی قسمتی که توی کد های بالا مشخص کردیم وارد کنیم:

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="عکسی که میخواهید توی دکمه نمایش دهید"
        android:layout_marginRight="10dp"
        android:longClickable="true"
        android:contextClickable="true"
        android:layout_margin="16dp"
        android:id="@+id/fab"
        android:clickable="true"/>

خب دوستان عزیز کار ما با طراحی دیزاین تولبار متحرکمون تموم شد.

*****

حالا نوبت میرسه به کلاس جاوا که تعریفش کنیم تولبارمون رو و به fab هم یک رویداد برای عملکرد بدیم.

۱۰) برای معرفی کردن تولبار متحرکمون که اگر این کار رو نکنیم با خطای “Unfortunately, yourApp has stopped working “ مواجه خواهید شد. و برای دادن یک عملکرد به fab که با لمس کاری رو انجام بده هم به این شکل عمل میکنیم:

package your package; ///اسم پکیج شما میباشد///

import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;



         //نام اکتیویتی شما//
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
		                    //اسم لایه متناظر شما//
		
		
        //تولبار متحرک را تعریف میکنیم و با استفاده از مشخصه ای که بهش دادیم شناسایی میکنیم//
        CollapsingToolbarLayout ct = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
		
        ct.setTitle("تماس با ما");
		//اسمی که میخواهید سربرگ اکتیویتی شما نمایش داده بشه//

		//
        FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //کاری که قصد انجام آن را دارید//
				
				Toast.makeText(getBaseContext(),"تلاش راز تمام موفقیت هاست",Toast.LENGTH_LONG).show();

            }
        });

    }
}

۱۱) ما تولبارمون و fab رو تعریف کردیم به کلاس و بر اساس id گفتیم که منظورمون دقیقا کدوم آیتمه و به fab رویداد نمایش Toast که در اموزش قبلی گفتیم رو دادیم که با کلیک کردن رویداد Toast رو برامون اجرا کنه که شما میتونید با پاک کردن Toast رویداد مد نظرتون رو بنویسید.

کار با Toast در برنامه نویسی اندروید

***و در نهایت خواهیم دید***

دانلود دمو آموزش:   CollapsingToolbarLayout.apk

دانلود سورس آموزش:   CollapsingToolbarLayout.zip

***********************************

بالاخره این آموزش هم پایان یافت

همواره بهترین ها را برای شما آرزومندیم!

موفق و پیروز باشید:)