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

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

بررسی اجمالی

Toolbar (نوار ابزار) در Android Lollipop ، نسخه API 21 برای جایگزینی ActionBar معرفی شد. شکل و عملکرد Toolbar راحت تر از ActionBar می تواند سفارشی شود و کاربرد های دیگری نیز دارد. چون  Toolbarجزء ViewGroup ها است پس هرجایی در layout می تواند قرار داده شود. توجه کنید که چون ViewGroup از کلاس View ارث بری دارد پس Toolbar که ViewGroup است، View نیز هست.

Toolbar با برنامه های ساخته شده برای API 21 و بالاتر به خوبی سازگار است. ولی Android کتابخانه های پشتیبانی AppCompat را به روز کرده است تا بتوان از Toolbar در دستگاه های دارای سیستم عامل Android پایین تر نیز استفاده کرد. در AppCompat ، نوار ابزار در کلاس androidx.appcompat.widget.Toolbar قرار دارد.

دو روش یا دلیل برای استفاده از Toolbar وجود دارد:

1. استفاده از Toolbar بجای ActionBar وقتی می خواهید امکانات معمولی ActionBar را داشته باشید (امکاناتی مثل منو، حالت انتخاب، ActionBarDrawerToggle و موارد مشابه) ولی نیاز به سفارشی کردن ظاهر ActionBar داشته باشید.
2. استفاده از ویژگی های خاص Toolbar برای وقتی که ActionBar نیاز شما را پشتیبانی نمی کند مثل نمایش چند نوار ابزار در صفحه، نوار ابزار با عرضی کمتر از عرض صفحه و غیره. 

مقایسه Toolbar با ActionBar

Toolbar در واقع یک تعمیم برای ActionBar است. تفاوت های کلیدی که Toolbar را از ActionBar متمایز می کند عبارتند از:

• Toolbar یک View هست که مثل هر View دیگری می توان آن را در layout قرار داد
• چون Toolbar یک View  است پس مثل هر View دیگری به راحتی می توان آن را در مکان دلخواه قرار داد، جابجا و کنترل کرد.
• چند Toolbar مستقل می تواند در یک Activity استفاده شود.

بخاطر داشته باشید که Toolbar را می توان به شکل ActionBar نیز پیکربندی و استفاده کرد به این معنی که منویی که قبلاً در ActionBar قرار می گرفت نیز می تواند در Toolbar به همان شکل قرار داده شود. ولی ActionBar هنوز منسوخ نشده و اگر تنها چیزی که نیاز دارید یک نوار ثابت در بالای صفحه است که بتواند آیکون ها و یک دکمه برگشت داشته باشد ، می توانید با خیال راحت به استفاده از ActionBar ادامه دهید. ولی اگر امکانات بیشتری نیاز دارید باید از Toolbar استفاده کنید.

استفاده از Toolbar بجای ActionBar

برای استفاده از Toolbar به عنوان ActionBar ، ابتدا اطمینان حاصل کنید که کتابخانه پشتیبانی AndroidX به فایل build.gradle (Module: app) برنامه شما اضافه شده باشد:

dependencies {
  ...
  implementation 'androidx.appcompat:appcompat:1.0.0'
}

سپس ، باید ActionBar ارائه شده در تم برنامه را حذف کنیم. باید تم برنامه خود را تغییر دهید تا از تمی ارث بری کند که NoActionBar باشد. مثلاً در کد زیر از Theme.AppCompat.NoActionBar ارث بری شده:

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  </style>
</resources>

حالا برای داشتن نوار ابزار باید Toolbar را به فایل layout اضافه کنید. یکی از مزایای استفاده از Toolbar امکان قرار دادن آن در مکان دلخواه در صفحه است مثلاً در کد زیر Toolbar در بالای صفحه قرار داده شده تا در مکان ActionBar قرار بگیرد:

<LinearLayout 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:fitsSystemWindows="true"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
      android:id="@+id/toolbar"
      android:minHeight="?attr/actionBarSize"  
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:titleTextColor="@android:color/white"
      android:background="?attr/colorPrimary">
    </androidx.appcompat.widget.Toolbar>

    <!-- سایر ویوو ها را در اینجا قرار دهید  -->

</LinearLayout>

نکته: کد "android:fitsSystemWindows="true را به تگ ریشه layout ی که Toolbar دارد اضافه کنید تا ارتفاع Activity به درستی محاسبه شود.

چون Toolbar از جنس ViewGroup است و مثل هر View دیگری می تواند استیل و مکان آن در صفحه تغییر داده شود،  وقتی آن را در layout قرار می دهید مکان آن را مثل سایر View ها باید مشخص کنید در غیر اینصورت ممکن است Toolbar در مکان اشتباه در صفحه دیده شود و یا حتی در صفحه نمایش داده نشود.

در مرحله بعد برای اینکه از Toolbar بجای ActionBar استفاده کنید باید از متد setSupportActionBar(toolbar) در Activity یا Fragment استفاده کنید.

نکته: دقت کنید که از کلاس androidx.appcompat.widget.Toolbar استفاده کنید و از کلاس android.widget.Toolbar استفاده نکنید.

// Mohamadreza Amani
// for support contact me at: help4usr@gmail.com

package com.amani.example;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

public class MyActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        // Find the toolbar view inside the activity layout
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        // Sets the Toolbar to act as the ActionBar for this Activity window.
        // Make sure the toolbar exists in the activity and is not null
        setSupportActionBar(toolbar);
    }

    // Menu icons are inflated just as they were with actionbar
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}

در مرحله بعد باید منوها را تعریف کنیم. فایل res/menu/menu_main.xml با کد زیر را بسازید. در خط ماقبل آخر کد بالا getMenuInflater().inflate(R.menu.menu_main, menu) می بینید که از این فایل برای ایجاد منو ها استفاده کرده ایم.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/miCompose"
        android:icon="@drawable/ic_compose"
        app:showAsAction="ifRoom"
        android:title="Compose">
    </item>
    <item
        android:id="@+id/miProfile"
        android:icon="@drawable/ic_profile"
        app:showAsAction="ifRoom|withText"
        android:title="Profile">
    </item>
</menu>

تصویر Toolbar را در زیر می بینید:

بکارگیری یک Toolbar در Activity های متفاوت

اکثر برنامه ها از یک ظاهر ثابت برای Toolbar در اکتیویتی های مختلف استفاده می کنند. برای اینکار نیازی به تکرار کد نیست بجای آن از تگ include استفاده کنید:

ابتدا کد Toolbar را در یک فایل layout مثلاً در فایل res/layout/toolbar_main.xml بنویسید:

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"/>

سپس می توان از تگ include برای اضافه کردن Toolbar به هر Activity دلخواه استفاده کرد:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <!-- در کد زیر نوار ابزار اضافه شد -->
    <include
        layout="@layout/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/> 

    <!-- ادامه کدهای اکتیویتی اینجا قرار می گیرد -->

</LinearLayout>

در ادامه روش استفاده از Toolbar بجای ActionBar را می بینید:

// Mohamadreza Amani
// for support contact me at: help4usr@gmail.com

public class MyActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        // Find the toolbar view inside the activity layout
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_main);
        // Sets the Toolbar to act as the ActionBar for this Activity window.
        // Make sure the toolbar exists in the activity and is not null
        setSupportActionBar(toolbar);
    }

با این روش بدون نیاز به تکرار کد به راحتی می توان ظاهر Activity ها را سازگار کرد.

رنگ و ظاهر Toolbar

نوار ابزار را می توان به طرق مختلف سفارشی کرد و از صفت های مختلفی مثل android:theme, app:titleTextAppearance, app:popupTheme استفاده کرد. همه آنها را می توان در یک style قرار داد و با صفت Theme به Toolbar اعمال کرد. ابتدا استیل مورد نظر را به فایل res/values/styles.xml اضافه می کنیم:

<!-- کد زیر تم برنامه را تعیین می کند  -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- Customize your theme here. -->
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
</style>

<!-- کد زیر استیل نوار ابزار را تغییر می دهد   -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  <!-- android:textColorPrimary is the color of the title text in the Toolbar  -->
  <item name="android:textColorPrimary">@android:color/holo_blue_light</item>
  <!-- actionMenuTextColor is the color of the text of action (menu) items  -->
  <item name="actionMenuTextColor">@android:color/holo_green_light</item>
  <!-- Tints the input fields like checkboxes and text fields -->
  <item name="colorAccent">@color/cursorAccent</item>
  <!-- Applies to views in their normal state. -->
  <item name="colorControlNormal">@color/controlNormal</item>
  <!-- Applies to views in their activated state (i.e checked or switches) -->
  <item name="colorControlActivated">@color/controlActivated</item>
  <!-- Applied to framework control highlights (i.e ripples or list selectors) -->
  <item name="colorControlHighlight">@color/controlActivated</item>

  <!-- Enable these below if you want clicking icons to trigger a ripple effect -->
  <!-- 
  <item name="selectableItemBackground">?android:selectableItemBackground</item>
  <item name="selectableItemBackgroundBorderless">?android:selectableItemBackground</item> 
  -->
</style>

<!-- کد زیر استیل عنوان در نوار ابزار را تغییر می دهد   -->
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">21sp</item>
    <item name="android:textStyle">italic</item>
</style>

سپس استیل را به Toolbar اعمال می کنیم:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"  
    android:background="?attr/colorPrimary"
    android:theme="@style/ToolbarTheme"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

نتیجه را در زیر می بینید:

نمایش آیکون برنامه در Toolbar

ممکن است بخواهیم آیکون برنامه را در Toolbar نمایش دهیم. برای اینکار کد زیر را به Activity اضافه کنید:

// قرار دادن نوار ابزار بجای اکشن بار
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// ...
// نمایش آیکون برنامه در نوار ابزار
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayUseLogoEnabled(true);

در مرحله بعد می توان فضای خالی که بین آیکون و ابتدای Toolbar وجود دارد را حذف کرد. برای اینکار از کد زیر استفاده می کنیم:

<androidx.appcompat.widget.Toolbar
      android:id="@+id/toolbar"
      app:contentInsetLeft="0dp"
      app:contentInsetStart="0dp"
      ...
      >
</androidx.appcompat.widget.Toolbar>

با این تغییرات آیکون برنامه باید به درستی در Toolbar نمایش داده شود.

عنوان سفارشی

Toolbar در واقع ViewGroup است پس عنوانی که در آن استفاده می شود را می توان کاملاً سفارشی کرد. اینکار را می توان با قرار دادن یک View داخل تگ Toolbar انجام داد. در کد زیر TextView داخل Toolbar قرار داده شده:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleTextColor="@android:color/white"
    android:background="?attr/colorPrimary">

     <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:textColor="@android:color/white"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_gravity="center"
     />

</androidx.appcompat.widget.Toolbar>

برای استفاده از این عنوان سفارشی حتماً باید در اکتیویتی عنوان پیش فرض را از طریق متد setDisplayShowTitleEnabled مخفی کرد:

/* داخل اکتیویتی */
// قرار دادن تول بار بجای اکشن بار
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// مخفی کردن عنوان پیش فرض
getSupportActionBar().setDisplayShowTitleEnabled(false);
// دسترسی به عنوان سفارشی شده
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);

همانطور که در کد بالا می بینید حتی می توان در Activity به این TextView که نقش عنوان را دارد دسترسی داشت و آن را تغییر داد. همانطور که در تصویر زیر می بینید چون layout_gravity را center قرار دادیم عنوان در وسط Toolbar قرار دارد:

نیمه شفاف کردن نوار وضعیت

نوار وضعیت (Status Bar) نوار بالای صفحه دستگاه هست که معمولاً آیکون های ساعت، شارژ باتری، آنتن و ... در آن دیده می شود. گاهی نیاز است که نوار وضعیت را نیمه شفاف کرد. مثل تصویر زیر:

برای اینکار ابتدا کد های زیر را داخل تگ تم اصلی برنامه قرار دهید (تم اصلی معمولاً در فایل res/values/styles.xml یا res/values/themes.xml قرار دارد):

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>

در ریشه فایل layout اکتیویتی که می خواهید نوار وضعیت شفاف داشته باشد به صورت زیر صفت fitsSystemWindows

را برابر true قرار دهید:

<RelativeLayout
  android:fitsSystemWindows="true"
  ...
>

کاملاً شفاف کردن نوار وضعیت

برای کاملاً شفاف کردن نوار وضعیت (در نسخه اندروید کیت کت یا جدیدتر) ساده ترین روش اضافه کردن کد زیر به متد onCreate در Activity است:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  Window w = getWindow(); // in Activity's onCreate() for instance
  w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

و سپس کد زیر را داخل تگ تم برنامه اضافه کنید:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>

واکنش به پیمایش

می توان Toolbar را تغییر داد تا به پیمایش صفحه مثل تصویر زیر واکنش نشان دهد:

برای این کار باید از CoordinatorLayout استفاده کرد. در ابتدا باید کتابخانه مربوط به طراحی را به فایل app/build.gradle اضافه کرد:

dependencies {
    // ...
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'com.google.android.material:material:1.0.0-rc01'
}

سپس داخل فایل layout مثلاً در فایل res/layout/activity_main.xml باید CoordinatorLayout را با Toolbar و یک View قابل پیمایش مثل RecyclerView تنظیم کرد برای اینکار از تگ AppBarLayout باید استفاده کرد به صورت زیر:

<!-- CoordinatorLayout is used to create scrolling and "floating" effects within a layout -->
<!-- This is typically the root layout which wraps the app bar and content -->
<androidx.coordinatorlayout.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">

    <!-- AppBarLayout is a wrapper for a Toolbar in order to apply scrolling effects. -->
    <!-- Note that AppBarLayout expects to be the first child nested within a CoordinatorLayout -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <!-- Toolbar is the actual app bar with text and the action items --> 
        <androidx.appcompat.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" />
    </com.google.android.material.appbar.AppBarLayout>

    <!-- This could also be included from another file using the include tag -->
    <!-- i.e `res/layout/content_main.xml` -->
    <!-- `app:layout_behavior` is set to a pre-defined standard scrolling behavior -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

البته بجای RecyclerView می توان از FrameLayout استفاده کرد و داخل FrameLayout فرگمنت قرار داد تا پیمایش فرگمنت با Toolbar تنظیم شود. به صورت زیر:

<androidx.coordinatorlayout.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">

    <!-- AppBarLayout is a wrapper for a Toolbar in order to apply scrolling effects. -->
    <!-- Note that AppBarLayout expects to be the first child nested within a CoordinatorLayout -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <!-- Toolbar is the actual app bar with text and the action items --> 
        <androidx.appcompat.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" />
    </com.google.android.material.appbar.AppBarLayout>

    <!-- `app:layout_behavior` is set to a pre-defined standard scrolling behavior -->

    <!-- FrameLayout can be used to insert fragments to display the content of the screen -->
    <!-- `app:layout_behavior` is set to a pre-defined behavior for scrolling -->
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

اتصال Toolbar به RecyclerView را در تصویر زیر می بینید: