خانه اندروید

800 ساعت آموزش اختصاصی

بیش از 30 هزار دانشجو

آموزش های پروژه محور

مطالب پیشنهادی حتما مشاهده کنید :

نوار ابزار متحرک یا Collapsing Toolbar Layout

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

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

من گشتی توی اینترنت میزدم و میگشتم که متوجه موضوعی شدم. این آموزشی که بنده امروز قصد دارم براتون شرح بدم و مهم تر از همه (رایگان) توی بعضی سایتا فروشی بوده یا خیلی مختصر گفته شده یا خیلی پیچیده. من این در این آموزش نه از 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

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

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

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

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

دسته بندی و برچسب ها

درباره نویسنده

محمد هستم و امیدوارم که بتونم سهم کوچکی توی پیشترفت برنامه نویسان جوان و آینده دار داشته باشم.

قبل از ارسال دیدگاه

  • قبل از ارسال دیدگاه: لطفا دیدگاه خودتون رو فقط در مورد این مطلب بنویسید.سپاسگزارم.

    دیدگاه های طولانی نادیده گرفته می شوند لذا دیدگاه خودتان را در دو خط خلاصه کنید.

    دیدگاه های که شامل توهین یا متن توهین آمیز اصلا تایید نمی شود.

    به دیدگاه های بی نام و نشان که ایمیل فیک و نام فیک وارد می کنند پاسخ داده نمی شود

16 دیدگاه

  1. soofi گفت:

    سلام ممنون از آموزشتون
    ولی ای کاش در ابتدای کار یک ویدیو کوچک در مورد متدی که میخواید آموزش بدین بگذارید تا به درستی متوجه بشیم قراره چه کاری انجام بدیم !!
    با تشکر

    • Admin گفت:

      سلام خدمت شما دوست گرامی
      اگر با دقت مشاهده کنید یک گیفی قرار داده شده برای این موضوع همراه با تصویر
      با احترام. موفق باشین.

  2. محمود گفت:

    سلام و خسته نباشید

    آموزش فوق رو دیدم و خیلی کاربردی بود و سوال بنده اینه که چطوری یک عکس هم در گوشه سمت راستAppBarLayout بذاریم همانند FloatingActionButton بذاریم مانند این عکس:

    http://s9.picofile.com/file/8308783926/Screenshot_%DB%B2%DB%B0%DB%B1%DB%B7_%DB%B1%DB%B0_%DB%B1%DB%B1_%DB%B1%DB%B2_%DB%B5%DB%B3_%DB%B5%DB%B7.png

    من هر کاری کردم اما نشد البته میشه داخل CollapseToolbarLayout عکس رو قرار بدیم که اینجوری زیاد جالب نیست.

    خیلی ممنون میشم یه راهکاری بدید.

    • Admin گفت:

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

      • محمود گفت:

        خیلی ممنون میشم اگه این آموزش رو تهیه کنید.
        بی صبرانه منتظر آموزشتون هستم.

        پیشاپیش ممنون

    • Mohammad Ali Riazati گفت:

      با سلام
      دوست عزیز شما میتوانید با استفاده از لایه بندی constraint-layout و یکم تغییر در کد های جاوا این کار رو انجام بدین. من این کار رو قبلا کردم و کاملا راحته
      http://s8.picofile.com/file/8313112268/_4.png

      • محمود گفت:

        سلام

        خیلی ممنون از شما ولی اگر تصویری که بنده پیوست دادم رو مشاهده کنید تصویر کاربر و دکمه fab در وسط تصویر کاور و بقیه نوشته های پایین قرار داره.
        داخل تصویر کاور هم میشه قرار داد مثل کار شما ولی قبلا به نتیجه رسیدم و تونستم مثل تصویر طراحی کنم.
        بازم ممنون
        موفق باشید

  3. مهدی گفت:

    با سلام
    ببخشید رو میشه در Collapsing Toolbar Layout اکلیپس هم ساخت.

    • Admin گفت:

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

  4. ابوالفضل سلمانی از کاشان گفت:

    یعنی این آموزش رایگان نیست؟ نسخه بجز دمو برای دانلود کجاست؟

    • Admin گفت:

      درود و احترام
      آموزش فوق رایگان هست دوستم.
      سورس کد و توضیحات کامل قرار گرفته شده ولی فیلم آموزش این قسمت تهیه نشده و فقط توضیحات + سورس کد قرار گرفته شده و اگر اموزش به صورت رایگان نباشه در زیر پست نوشته میشه هزینه برای تهیه این آموزش باید بپردازید مثل این اموزش پرداز فایل xml
      موفق باشید.
      با احترام.

  5. مخمد گفت:

    عالی بود
    لی ای کاش همراه اموزش ها سورس هم قرار میدادین
    چون وقتی خودمون پیادش میکنیم خیلی وقتا با ارور مواجه میشیم
    ولی اگه سورس بود میتونستیم کامل با سوزس خودمون مقایسه کنیم و بهتر متوجه میشدیم
    در هر حال تشکر

  6. مهدی گفت:

    سلام خیلی ممنونم بابت آموزش خوبی گذاشتید خانه اندروید رو دوست دارم واقعا حرف ندارید.