نوار ابزار تاشو در اندروید

نوار ابزار تاشو در اندروید

در این آموزش با استفاده از CollapsingToolbarLayout برنامه ای می سازیم که دارای نوار ابزار تاشو باشد. این نوع طرح بندی معمولاً در صفحه پروفایل برخی برنامه ها مثل Whatsapp دیده می شود.

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

فایل لایوتِ دارای نوار ابزار تا شونده معمولاً شامل موارد زیر است:

• Collapsing Title: عنوان با گسترش لایوت ، بزرگتر می شود. با تا شدن لایوت ، اندازه متنِ عنوان کوچکتر می شود.
• layout_scrollFlags: شیوه پیمایش این لایوت معمولاً به صورت "scroll|exitUntilCollapsed" تنظیم می شود.
• collapsedTitleGravity: مکان قرارگیری عنوان در هنگام تا بودن لایوت را مشخص می کند.
• contentScrim: به کمک آن می توان ظاهر نوار ابزار هنگام تا بودن آن را مشخص کرد. می توان یک رنگ یا drawable برای این منظور تعیین کرد.
• scrimAnimationDuration: این مورد هنگام گسترش یا تا شدن نوار ابزار، مدت زمان انیمیشنِ تغییر ظاهر نوار ابزار را مشخص می کند.

اگر به تازگی اندروید استودیو را به جدیدترین SDK به روز کرده اید ، هنگام ایجاد یک پروژه جدید ، نوع «Scrolling Activity» را انتخاب کنید. این نوع شامل پیاده سازی آماده شده CollapsingToolbarLayout است:

اجرای پروژه جدید با اکتیویتی پیش فرض «Scrolling Activity» باید خروجی مانند این را نشان دهد:

در این آموزش ، ما در پروژه پیش فرض تغییراتی مانند نمایش ImageView و نشان دادن معادل دکمه FAB در نوار ابزار به صورت یک آیکون (در هنگام تا شدن نوار ابزار) انجام خواهیم داد.

ساختار پروژه

در تصویر زیر ساختار پروژه را می بینید:

پیاده سازی

لایوت activity_scrolling.xml را در زیر می بینید:

<?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"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.clicksite.collapsingtoolbarlayout.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

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


            <ImageView
                android:id="@+id/expandedImage"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/photo"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <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/AppTheme.PopupOverlay" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_info" />

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

app:layout_anchor و app:layout_anchorGravity دکمه FAB را به سمت راست و پایین لایوت AppBarLayout وصل می کند.

لایوت content_scrolling.xml به صورت زیر است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.clicksite.collapsingtoolbarlayout.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

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

فایل menu_scrolling.xml به صورت زیر است:

<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    tools:context="com.clicksite.collapsingtoolbarlayout.ScrollingActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_info"
        android:orderInCategory="200"
        android:title="info"
        app:showAsAction="ifRoom"
        android:icon="@android:drawable/ic_dialog_info"/>

</menu>

کلاس ScrollingActivity.java به صورت زیر است:

// clicksite.ir@gmail.com
package com.clicksite.collapsingtoolbarlayout;

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class ScrollingActivity extends AppCompatActivity {


    private Menu menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow = false;
            int scrollRange = -1;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {
                    isShow = true;
                    showOption(R.id.action_info);
                } else if (isShow) {
                    isShow = false;
                    hideOption(R.id.action_info);
                }
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        this.menu = menu;
        getMenuInflater().inflate(R.menu.menu_scrolling, menu);
        hideOption(R.id.action_info);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        } else if (id == R.id.action_info) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    private void hideOption(int id) {
        MenuItem item = menu.findItem(id);
        item.setVisible(false);
    }

    private void showOption(int id) {
        MenuItem item = menu.findItem(id);
        item.setVisible(true);
    }
}

در کد بالا ، برای دانستن اینکه CollapsingToolbarLayout گسترش یافته یا تا شده، ما درون متد addOnOffsetChangedListener یک شنونده از نوع OnOffsetChangedListener را در شی AppBarLayout اضافه می کنیم. بسته به شرایط گسترش نوار ابزار، گزینه اطلاعات نوار ابزار را نشان می دهیم یا پنهان می کنیم.

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