دوره طراحی متریال اندروید را با آموزش ایجاد تولبار ادامه می‌دهیم.

به صورت پیش فرض صفحات اندروید دارای یک ActionBar هستند که نام برنامه در آن‌ها ظاهر می‌شود. در طراحی متریال باید ActionBar را حذف کرد.

همانطور که در قسمت قبل گفتیم دو فایل styles.xml و styles.xml (v21) به منظور تفکیک Theme برای گوشی‌های با نسخه 5 یا بالاتر و گوشی‌های دارای نسخه پایین تر از اندروید 5 ایجاد گردید.

به انتهای parent موجود در فایل‌های styles.xml و styles.xml (v21) عبارت NoActionBar را اضافه می‌کنیم تا ActionBar از این رابط کاربری حذف گردد. در ضمن بدلیل حذف کردن ActionBar باید item با نام colorPrimary را نیز از هر دو فایل style حذف کرد. بنابراین سورس‌های درون هر دو فایل style باید به شکل زیر باشد:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
</resources>

روی پوشه layout راست کلیک کرده و از New گزینه Layout Resource File را انتخاب می‌کنیم. نام را toolbar و Root element را android.support.v7.widget.Toolbar وارد کنید:

طراحی متریال دیزاین

فایل toolbar.xml را به شکل زیر ویرایش می‌کنیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:layout_width="match_parent"
                                   android:layout_height="wrap_content"
                                    android:background="#F44336"
                                    android:elevation="5dp">
</android.support.v7.widget.Toolbar>

در فایل فوق در سطر 4 مقدار layout_height را برابر wrap_content دادیم و در سطر 5 یک android:background نیز اختصاص دادیم.

در سطر 6 با android:elevation یک سایه به زیر تولبار می‌دهیم، این سایه تنها در گوشی‌های با اندروید 5 به بالا دیده می‌شود.

برای اضافه کردن toolbar فوق به لایه نمایش activity_main درون این لایه فایل toolbar را include می‌کنیم:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context="hitos.ir.hitosapp.MainActivity">

    <include layout="@layout/toolbar"
             android:id="@+id/toolbar" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_below="@id/toolbar"
        />
</RelativeLayout>

در تگ RelativeLayout تمام خصوصیت‌های padding را حذف کردیم. در سطرهای 9 و 10 می‌توانید کدهای مربوط به وارد کردن layout با نام toolbar را ببینید. به این واحد یک id اختصاص دادیم تا بتوانیم از Activity‌ها روی این toolbar کنترل داشته باشیم.

بدلیل RelativeLayout بودن رابط کاربری فوق در سطر 16 دستوری به TextView دادیم تا این TextView را زیر Toolbar قرار دهیم و از تداخل toolbar و TextView جلوگیری کنیم.

نتیجه اجرای برنامه ایجاده شده در فوق در گوشی با API 23 و API 16 به شکل زیر است:

طراحی متریال دیزاین و ایجاد تولبار

گوشی سمت راست با API 23 و گوشی سمت چپ با API 16 ظاهری مشابه دارند با این تفاوت که در گوشی سمت راست یک سایه زیر Toolbar ظاهر شده است. دلیل این امر این است که خاصیت android:elevation که سایه را به زیر المان‌ها اضافه می‌کند تنها در اندروید با API بالاتر از 21 کار می‌کند.

البته Toolbar فوق مانند یک Toolbar واقعی نیست و به عنوان مثال نام برنامه را نشان نمی‌دهد. در MainActivity تغییرات زیر را اعمال کنید:

public class MainActivity extends AppCompatActivity {

  private Toolbar toolbar;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar= (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
  }
}

در سطر سوم یک متغیر از نوع Toolbar ایجاد کردیم که در سطر 9 آن را با شناسه id تعریف کردیم.

در سطر 10 نیز با متد setSupportActionBar این Toolbar را فراخوانی می‌کنیم.

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

طراحی متریال دیزاین و ایجاد toolbar

همانطور که در بالا می‌بینید نام برنامه در Toolbar آمده است.

تگ ها: android / اندرویدطراحی متریال