۱. مقدمه
کامپوننتهای متریال (MDC) به توسعهدهندگان در پیادهسازی طراحی متریال کمک میکنند. MDC که توسط تیمی از مهندسان و طراحان UX در گوگل ایجاد شده است، دهها کامپوننت رابط کاربری زیبا و کاربردی را ارائه میدهد و برای اندروید، iOS، وب و Flutter.material.io/develop در دسترس است. |
در codelab MDC-103، شما رنگ، ارتفاع و تایپوگرافی کامپوننتهای متریال (MDC) را برای استایلدهی به برنامه خود سفارشی کردید.
یک کامپوننت در سیستم طراحی متریال، مجموعهای از وظایف از پیش تعریفشده را انجام میدهد و ویژگیهای خاصی مانند یک دکمه دارد. با این حال، یک دکمه چیزی بیش از راهی برای انجام یک عمل توسط کاربر است، بلکه یک بیان بصری از شکل، اندازه و رنگ است که به کاربر اطلاع میدهد که تعاملی است و با لمس یا کلیک، اتفاقی خواهد افتاد.
دستورالعملهای طراحی متریال، اجزا را از دیدگاه یک طراح توصیف میکنند. آنها طیف گستردهای از عملکردهای اساسی موجود در پلتفرمها و همچنین عناصر آناتومیکی که هر جزء را تشکیل میدهند، توصیف میکنند. به عنوان مثال، یک پسزمینه شامل یک لایه پشتی و محتوای آن، لایه جلویی و محتوای آن، قوانین حرکت و گزینههای نمایش است. هر یک از این اجزا را میتوان برای نیازها، موارد استفاده و محتوای هر برنامه سفارشی کرد. این قطعات، در بیشتر موارد، نماها، کنترلها و عملکردهای سنتی از SDK پلتفرم شما هستند.
اگرچه دستورالعملهای طراحی متریال، اجزای زیادی را نام میبرند، اما همه آنها کاندیداهای خوبی برای کد قابل استفاده مجدد نیستند و بنابراین در MDC یافت نمیشوند. شما میتوانید خودتان این تجربیات را ایجاد کنید تا به یک سبک سفارشی برای برنامه خود برسید، همه با استفاده از کد سنتی.
آنچه خواهید ساخت
در این کدلب، یک پسزمینه به Shrine اضافه خواهید کرد. این کار محصولات نمایش داده شده در شبکه نامتقارن را بر اساس دستهبندی فیلتر میکند. شما از موارد زیر استفاده خواهید کرد:
- شکل
- حرکت
- کلاسهای سنتی SDK اندروید
اجزای MDC-Android در این آزمایشگاه کد
- شکل
آنچه نیاز دارید
- دانش پایه در توسعه اندروید
- اندروید استودیو (اگر ندارید، از اینجا دانلود کنید)
- یک شبیهساز یا دستگاه اندروید (از طریق اندروید استودیو قابل دسترسی است)
- کد نمونه (به مرحله بعدی مراجعه کنید)
سطح تجربه خود در ساخت برنامههای اندروید را چگونه ارزیابی میکنید؟
۲. محیط توسعه خود را تنظیم کنید
ادامه از MDC-103؟
اگر MDC-103 را تکمیل کردهاید، کد شما باید برای این آزمایشگاه کد آماده باشد. به مرحله ۳ بروید.
از صفر شروع کردن؟
اپلیکیشن استارتر codelab را دانلود کنید
برنامهی آغازین در دایرکتوری material-components-android-codelabs-104-starter/java قرار دارد. قبل از شروع، حتماً با cd به آن دایرکتوری بروید.
... یا آن را از گیتهاب کلون کنید
برای کپی کردن این codelab از گیتهاب، دستورات زیر را اجرا کنید:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
کد شروع را در اندروید استودیو بارگذاری کنید
- پس از اتمام مراحل نصب و نمایش پنجره Welcome to Android Studio ، روی Open an existing Android Studio project کلیک کنید. به پوشهای که کد نمونه را در آن نصب کردهاید بروید و java -> shrine را انتخاب کنید (یا در رایانه خود عبارت shrine را جستجو کنید) تا پروژه Shrine باز شود.
- لحظهای صبر کنید تا اندروید استودیو پروژه را بسازد و همگامسازی کند، همانطور که توسط نشانگرهای فعالیت در پایین پنجره اندروید استودیو نشان داده شده است.
- در این مرحله، ممکن است اندروید استودیو به دلیل فقدان SDK اندروید یا ابزارهای ساخت، مانند آنچه در زیر نشان داده شده است، برخی خطاهای ساخت را ایجاد کند. برای نصب/بهروزرسانی این موارد و همگامسازی پروژه خود، دستورالعملهای موجود در اندروید استودیو را دنبال کنید.
اضافه کردن وابستگیهای پروژه
این پروژه به یک وابستگی (dependency) در کتابخانه پشتیبانی اندروید MDC نیاز دارد. کد نمونهای که دانلود کردهاید باید از قبل این وابستگی را داشته باشد، اما برای اطمینان، انجام مراحل زیر توصیه میشود.
- به فایل
build.gradleماژولappبروید و مطمئن شوید که بلوکdependenciesشامل یک وابستگی به MDC Android است:
api 'com.google.android.material:material:1.1.0-alpha06'
- (اختیاری) در صورت لزوم، فایل
build.gradleرا ویرایش کنید تا وابستگیهای زیر را اضافه کرده و پروژه را همگامسازی کنید.
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}
برنامه شروع کننده را اجرا کنید
|
موفقیت! شما باید برنامه Shrine را در حال اجرا روی دستگاه خود ببینید.
۳. منوی پسزمینه را اضافه کنید
پسزمینه، دورترین سطح پشتی یک برنامه است که در پشت تمام محتوا و اجزای دیگر ظاهر میشود. این لایه از دو سطح تشکیل شده است: یک لایه پشتی (که عملکردها و فیلترها را نمایش میدهد) و یک لایه جلویی (که محتوا را نمایش میدهد). میتوانید از پسزمینه برای نمایش اطلاعات و عملکردهای تعاملی، مانند ناوبری یا فیلترهای محتوا، استفاده کنید.
محتوای شبکه را پنهان کنید
در shr_product_grid_fragment.xml ، ویژگی android:visibility="gone" را به NestedScrollView خود اضافه کنید تا محتوای محصول به طور موقت حذف شود:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
ما یک پسزمینه در این ناحیه نصب خواهیم کرد. برای جلوگیری از نمایش جدایی بین نوار برنامه بالایی و محتوای منو که در پسزمینه ظاهر میشود، پسزمینه را همرنگ نوار برنامه بالایی قرار میدهیم.
در shr_product_grid_fragment.xml ، کد زیر را به عنوان اولین عنصر در FrameLayout ریشه، قبل از AppBarLayout اضافه کنید:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>
در styles.xml ، موارد زیر را اضافه کنید:
سبکها.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>
آفرین! شما یک پسزمینه زیبا به رابط کاربری Shrine اضافه کردهاید. در مرحله بعد، یک منو اضافه خواهیم کرد.
منو را اضافه کنید
یک منو اساساً لیستی از دکمههای متنی است. ما اینجا یکی اضافه خواهیم کرد.
یک طرحبندی جدید به نام shr_backdrop.xml در پوشه res -> layout خود ایجاد کنید و موارد زیر را به آن اضافه کنید:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>
و این لیست را با استفاده از تگ <include> به LinearLayout که در shr_product_grid_fragment.xml اضافه کردید، اضافه کنید:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>
صفحه اصلی شما باید به این شکل باشد:
کار پسزمینه شما تمام شد. بیایید محتوایی را که قبلاً پنهان کرده بودیم، برگردانیم.
۴. یک شکل اضافه کنید
قبل از اینکه در این آزمایشگاه کد، تغییری در Shrine ایجاد کنیم، محتوای اصلی محصول آن در دورترین سطح پشتی قرار داشت. با اضافه کردن یک پسزمینه، این محتوا اکنون بیشتر مورد تأکید قرار میگیرد زیرا در جلوی آن پسزمینه ظاهر میشود.
یک لایه جدید اضافه کنید
ما باید لایه شبکه محصول را دوباره نمایش دهیم. ویژگی android:visibility="gone" را از NestedScrollView خود حذف کنید:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
بیایید لایه جلویی را با یک بریدگی در گوشه بالا سمت چپ استایل دهیم. طراحی متریال به این نوع سفارشیسازی به عنوان یک شکل اشاره دارد. سطوح متریال را میتوان در شکلهای مختلف نمایش داد. شکلها به سطوح تأکید و سبک اضافه میکنند و میتوانند برای بیان برند استفاده شوند. اشکال متریال میتوانند گوشهها و لبههای منحنی یا زاویهدار و هر تعداد ضلع داشته باشند. آنها میتوانند متقارن یا نامنظم باشند.
اضافه کردن شکل
شکل شبکه را تغییر دهید. ما یک پسزمینه شکل سفارشی ارائه دادهایم، اما شکل فقط در اندروید مارشمالو و بالاتر به درستی نمایش داده میشود. میتوانیم پسزمینه shr_product_grid_background_shape را در NestedScrollView خود فقط برای اندروید مارشمالو و بالاتر تنظیم کنیم. ابتدا، یک id به NestedScrollView خود اضافه کنید تا بتوانیم به صورت زیر در کد به آن ارجاع دهیم:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
سپس، پسزمینه را به صورت برنامهنویسی شده در ProductGridFragment.java تنظیم کنید. منطق زیر را برای تنظیم پسزمینه در انتهای onCreateView() ، درست قبل از دستور return، اضافه کنید:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}
در نهایت، منبع رنگ productGridBackgroundColor (که توسط پسزمینه شکل سفارشی نیز استفاده میشود) را به صورت زیر بهروزرسانی خواهیم کرد:
رنگها.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
ساخت و اجرا:
ما به سطح اصلی Shrine یک شکل با استایل سفارشی دادهایم. به دلیل ارتفاع سطح، کاربران میتوانند ببینند که چیزی درست پشت لایه سفید جلویی وجود دارد. بیایید حرکت را اضافه کنیم تا کاربران بتوانند آنچه را که آنجاست ببینند: منو.
۵. حرکت اضافه کنید
حرکت راهی برای جان بخشیدن به برنامه شماست. حرکت میتواند بزرگ و چشمگیر، ظریف و مینیمال یا هر چیزی بین این دو باشد. نوع حرکتی که استفاده میکنید باید مناسب موقعیت باشد. حرکتی که برای اقدامات منظم و مکرر اعمال میشود باید کوچک و ظریف باشد، بنابراین به طور منظم زمان زیادی را صرف نمیکنند. موقعیتهای دیگر، مانند اولین باری که کاربر یک برنامه را باز میکند، میتوانند جذابتر باشند و به کاربر در مورد نحوه استفاده از برنامه شما آموزش دهند.
اضافه کردن حرکت آشکارسازی به دکمه منو
حرکت، شکلی است که در جلو به صورت مستقیم به سمت پایین حرکت میکند. ما قبلاً یک شنونده کلیک برای شما فراهم کردهایم که انیمیشن ترجمه را برای برگه، در NavigationIconClickListener.java انجام میدهد. میتوانیم این شنونده کلیک را درون متد setupToolbar() از ProductGridFragment.java تنظیم کنیم:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
متد setUpToolbar() شما اکنون باید به شکل زیر باشد:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}
ساخت و اجرا. دکمه منو را فشار دهید:
با فشار دادن دوباره آیکون منوی ناوبری، باید منو پنهان شود.
حرکت لایه جلویی را تنظیم کنید
حرکت راهی عالی برای بیان برند شماست. بیایید ببینیم انیمیشن رونمایی با استفاده از یک منحنی زمانبندی متفاوت چگونه به نظر میرسد.
کد خود را در setupToolbar() در ProductGridFragment.java بهروزرسانی کنید تا یک Interpolator به شنونده کلیک آیکون ناوبری خود، به شرح زیر ارسال کنید:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator()));
}
این یه جلوه متفاوت ایجاد میکنه، مگه نه؟
۶. آیکون برنددار
آیکونوگرافی برند به آیکونهای آشنا نیز گسترش مییابد. بیایید آیکون آشکارسازی را سفارشی کنیم و آن را با عنوان خود ادغام کنیم تا ظاهری منحصر به فرد و برنددار داشته باشیم.
تغییر آیکون دکمه منو
دکمه منو را طوری تغییر دهید که آیکونی با طرح الماس نمایش داده شود. نوار ابزار خود را در shr_product_grid_fragment.xml بهروزرسانی کنید تا از آیکون برند جدیدی که ما ارائه کردهایم ( shr_branded_menu ) استفاده کند، و ویژگیهای app:contentInsetStart و android:padding تنظیم کنید تا نوار ابزار با مشخصات طراح شما بهتر مطابقت داشته باشد:
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
شنونده کلیک خود را دوباره در setupToolbar() در ProductGridFragment.java بهروزرسانی کنید تا وقتی منو باز است و وقتی بسته است، drawableهای نوار ابزار را به صورت زیر دریافت کند:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator(),
getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}
ساخت و اجرا:
عالیه! وقتی پسزمینه قابل نمایش باشد، آیکون منوی لوزیشکل نمایش داده میشود. وقتی بتوان منو را پنهان کرد، به جای آن یک آیکون بستن نمایش داده میشود.
۷. خلاصه
در طول این چهار آزمایشگاه کد، شما نحوه استفاده از کامپوننتهای متریال برای ساخت تجربیات کاربری منحصر به فرد و زیبا که بیانگر شخصیت و سبک یک برند هستند را مشاهده کردید.
مراحل بعدی
این آزمایشگاه کد، MDC-104، این توالی آزمایشگاههای کد را تکمیل میکند. شما میتوانید با مراجعه به کاتالوگ ویجتهای اندروید ، اجزای بیشتری را در MDC-Android بررسی کنید.
برای چالش بیشتر با این codelab، برنامه Shrine خود را طوری تغییر دهید که تصاویر محصول نشان داده شده هنگام انتخاب یک دسته از منوی پسزمینه را تغییر دهد.
برای یادگیری نحوه اتصال این برنامه به Firebase برای یک backend فعال، به Firebase Android Codelab مراجعه کنید.