اخیرا ورژن 28 کتابخانه Android Design Support معرفی شده و در همین ورژن آلفا، امکانات جدیدی اضافه شده است. در این مقاله نگاهی به این امکانات جدید می اندازیم که در قالب  Material view component  رونمایی شده اند.

Material Button

Material Button یک Widget است که می تواند یک material style button را در رابط کاربری شما به نمایش بگذارد. این کلاس، از کلاس AppCompatButton ارث بری می کند. نکته زیبای این ویجت این است که به طور پیش فرض، حس طبیعی material را القاء می کند و نیاز زیادی به تغییرات یا شخصی سازی ندارد. برای اضافه کردن Material Button، از کد های زیر استفاده می کنیم:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

به صورت پیش فرض، برای پس زمینه Button، از accent color و برای متن آن از رنگ سفید استفاده می شود اما اگر Button به صورت filled نباشد، از accent color به عنوان رنگ متن استفاده می شود و پس‌زمینه به حالت transparent تغییر می کند.

حال برخی از خصوصیت های لازم برای شخصی سازی این Widget را معرفی می کنیم:

• app:icon : برای نشان دادن یک drawable در سمت start استفاده می شود.
• app:iconTint : برای رنگ دادن به آیکون استفاده شده در Button به کار می رود.
• app:iconTintMode : برای تعریف یک Mode برای iconTint به کار می رود.
• app:iconPadding : برای دادن Padding به آیکون استفاده شده در Button به کار میرود.
• app: additionalPaddingLeftForIcon : برای دادن Padding از سمت چپ به آیکون استفاده می شود.
• app:additionalPaddingRightForIcon : برای دادن Padding از سمت راست به آیکون استفاده می شود.
• app:rippleColor : برای رنگ دادن به ripple به کار می رود.
• app:backgroundTint : برای تغییر رنگ پس زمینه به کار می‌رود.
• app:backgroundTintMode : برای تعریف Mode برای رنگ پس زمینه به کار می‌رود.
• app:strokeColor : برای رنگ دادن به دور Button به کار می‌رود.
• app:strokeWidth : برای تعیین پهنای دور Button به کار می‌رود.
• app: cornerRadius : برای میزان گرد شدن گوشه های Button استفاده می‌شود.

Chip

Chip در واقع یک متن با یک پس‌زمینه گرد شده می باشد. هدف از نمایش آنها، ارایه یک گروه از متن‌ها به کاربر است که قابلیت انتخاب شدن یا نشدن را دارند. برای مثال می تواند برای نشان دادن لیستی از پیشنهادات بر اساس محتوای App ما به کاربر باشد.

با استفاده ازکد زیر می توانیم یک Chip را به رابط کاربری اضافه کنیم و با استفاده از app:chipText می توانیم متن مورد نظر را وارد کنیم.

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

حال به معرفی چند مورد از attribute های این عنصر می پردازیم.

• app:chekable : به منظور تغییر حالت بین قابلیت انتخاب شدن و نشدن به کار می رود.
• app:chipIcon : برای نمایش یک آیکون در chip به کار می رود.
• app:closeIcon : برای نمایش آیکون لغو در chip به کار می رود.

همچنین می توانیم برای chip، یک listener نیز تعریف نماییم تا بتوانیم با کاربر تعامل داشته باشیم. اگر قابلیت chekable نیز فعال باشد می توانیم با استفاده ازsetOnCheckedChangeListener وضعیت انتخاب شدن یا نشدن را کنترل نماییم.

some_chip.setOnCheckedChangeListener { button, checked ->  }

برای کنترل اعمال آیکون close نیز پیاده سازی مشابه ایی را خواهیم داشت و به صورت زیر عمل می کنیم.

some_chip.setOnCloseIconClickListener {  }

Chip group

اگر می‌خواهیم گروهی از chip ها را در کنار هم نمایش دهیم، از chip group  استفاده می‌کنیم. برای ایجاد یک chip group کافی است تا chip ها را درون تگ chip group قرار دهیم.

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

</android.support.design.chip.ChipGroup>

به صورت پیش فرض خواهید دید که فاصله میان chip ها مقدار کمی دارد و به صورت فشرده کنار هم هستند. این فواصل کم را می توانید با attribute های زیر کنترل کنید.

• app:chipSpacing : برای اضافه کردن فضا در هر دو وضعیت عمودی و افقی به کار می‌رود.
• app:chipSpacingHorizontal : اضافه کردن فضا در جهت افقی
• app:chipSpacingVertical : اضافه کردن فضا در جهت عمودی

همچنین برای ردیف کردن chip ها در یک خط می توان از app:singleLine استفاده کرد.

Material Card View

تا به امروز ما از عنصری به نام Card View استفاده می کردیم اما در این کتابخانه عنصری به نام Material Card View به ما معرفی شده است که با شکل و شمایلی کاملا material در دسترس می باشد. با افزودن کد زیر می توانید این Widget را به رابط کاربری خود اضافه کنیم.

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

مانند Material Button، می توانیم از app:strokeColor و app:strokeWidth برای شخصی سازی استفاده کنیم.

Bottom App Bar

Bottom app bar یک Widget جدید در این کتابخانه است که یک toolbar را در قسمت پایین layout نمایش می دهد تا کاربران تعامل بهتری را با  فهرست‌ها و toolbar داشته باشند. این Widget را می توانیم با استفاده از کد زیر به پروژه خود اضافه کنیم.

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

به نظر می رسد که این Widget باید همراه با فهرست نمایش داده بشود. برای این کار می‌توانیم از طریق کدهای جاوا، بدین صورت عمل کنیم.

bottom_app_bar.replaceMenu(R.menu.main)

زمانی که صحبت از شخصی سازی این Widget می شود، چندین attribute وجود دارد که می تواند ما را در این کار یاری کند.

• app:fabAttached : مشخص می کند که یک fab برای toolbar در نظر گرفته شده است یا خیر. ما می توانیم با استفاده از app:layout_anchor و آی دی مربوط به Bottom app bar، مشخص کنیم که fab به این Widget متصل شود که به صورت پیش فرض در بالای آن قرار می گیرد.
• app:fabAligmentMode : می توانیم مکان قرار گیری fab را تنظیم کنیم که می تواند end یا center باشد.
• app:fabCradleVerticalOffset : میزان قرار گیری یا فرو رفتگی به صورت عمودی را می توان برای fab تنطیم کرد. که به صورت پیش فرض این مقدار 0dp در نظر گرفته شده است.
• app:backgroundTint : مانند Widget های قبل، برای رنگ دادن به پس زمینه استفاده می شود.

با توجه به ورژن جدید کتابخانه طراحی اندروید و همچنین امکانات جدید آن، بدون شک باید منتظر Appهایی با رابط کاربری‌های زیبا باشیم.