اندروید MDC-103: طرح زمینه مواد با رنگ، ارتفاع و نوع (Kotlin)

Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter در دسترس است. material.io/develop

در Codelabs MDC-101 و MDC-102، از Material Components (MDC) برای ساختن اصول اولیه اپلیکیشنی به نام Shrine استفاده کردید، یک برنامه تجارت الکترونیک که لباس و کالاهای خانگی می فروشد. این برنامه شامل یک جریان کاربری است که با صفحه ورود شروع می شود و کاربر را به صفحه اصلی که محصولات را نمایش می دهد می برد.

گسترش اخیر متریال دیزاین به طراحان و توسعه دهندگان انعطاف بیشتری برای بیان برند محصول خود می دهد. اکنون می توانید از MDC برای سفارشی کردن Shrine و بازتاب سبک منحصر به فرد آن استفاده کنید.

چیزی که خواهی ساخت

در این کد لبه، شما Shrine را سفارشی می‌کنید تا برند آن را با استفاده از:

• رنگ
• تایپوگرافی
• ارتفاع
• چیدمان

این سومین مورد از 4 نرم‌افزار کد است که شما را در ساخت اپلیکیشنی به نام Shrine راهنمایی می‌کند، یک اپلیکیشن تجارت الکترونیک که پوشاک و کالاهای خانگی را می‌فروشد. کدهای مربوطه را می توان در این آدرس یافت: MDC-101: مبانی اجزای مواد (MDC). MDC-102: ساختار و چیدمان طراحی مواد MDC-104: اجزای پیشرفته طراحی مواد در پایان MDC 104، برنامه‌ای خواهید ساخت که به شکل زیر است:

مولفه ها و زیرسیستم های اندروید MDC مورد استفاده در این کد لبه:

• تم ها
• تایپوگرافی
• ارتفاع

آنچه شما نیاز دارید

• دانش اولیه توسعه اندروید
• Android Studio (اگر قبلاً آن را ندارید آن را از اینجا دانلود کنید)
• شبیه ساز یا دستگاه اندروید (در دسترس از طریق Android Studio)
• کد نمونه (مرحله بعدی را ببینید)

سطح تجربه خود را در ساخت برنامه های اندروید چگونه ارزیابی می کنید؟

تازه کار حد واسط مسلط

از MDC-102 ادامه می دهید؟

اگر MDC-102 را تکمیل کرده اید، کد شما باید برای استفاده از این کد لبه آماده باشد. به مرحله 3 بروید: رنگ را تغییر دهید .

برنامه codelab starter را دانلود کنید

برنامه شروع را دانلود کنید

برنامه شروع در فهرست material-components-android-codelabs-103-starter/kotlin قرار دارد. حتما قبل از شروع به آن دایرکتوری cd بزنید.

... یا آن را از GitHub شبیه سازی کنید

برای شبیه سازی این کد لبه از GitHub، دستورات زیر را اجرا کنید:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

برای راهنمایی بیشتر: شبیه سازی یک مخزن از GitHub

کد شروع را در Android Studio بارگیری کنید

1. هنگامی که جادوگر راه اندازی به پایان رسید و پنجره خوش آمدید به Android Studio نشان داده شد، روی باز کردن پروژه موجود Android Studio کلیک کنید. به دایرکتوری که کد نمونه را در آن نصب کرده بودید بروید و kotlin -> shrine را انتخاب کنید (یا در رایانه خود برای shrine جستجو کنید) تا پروژه حمل و نقل باز شود.
2. همانطور که توسط نشانگرهای فعالیت در پایین پنجره Android Studio نشان داده شده است، کمی صبر کنید تا Android Studio پروژه را بسازد و همگام کند.
3. در این مرحله، Android Studio ممکن است برخی از خطاهای ساخت را ایجاد کند، زیرا شما Android SDK یا ابزارهای ساخت را از دست داده اید، مانند آنچه در زیر نشان داده شده است. دستورالعمل‌های موجود در Android Studio را برای نصب/به‌روزرسانی و همگام‌سازی پروژه خود دنبال کنید.

وابستگی های پروژه را اضافه کنید

این پروژه به کتابخانه پشتیبانی MDC Android نیاز دارد. کد نمونه ای که دانلود کرده اید باید قبلاً این وابستگی را در لیست داشته باشد، اما برای اطمینان از انجام مراحل زیر تمرین خوبی است.

1. به فایل build.gradle ماژول app بروید و مطمئن شوید که بلوک dependencies ها دارای وابستگی به MDC Android است:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (اختیاری) در صورت لزوم، فایل 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'
}

برنامه استارتر را اجرا کنید

مطمئن شوید که پیکربندی ساخت در سمت چپ دکمه Run / Play app است. برای ساخت و اجرای برنامه، دکمه سبز Run / Play را فشار دهید. در پنجره Select Deployment Target ، اگر قبلاً یک دستگاه Android در دستگاه های موجود خود فهرست شده است، به مرحله 8 بروید. در غیر این صورت، روی Create New Virtual Device کلیک کنید. در صفحه انتخاب سخت افزار ، یک دستگاه تلفن مانند Pixel 2 را انتخاب کنید و سپس روی Next کلیک کنید. در صفحه تصویر سیستم ، یک نسخه اخیر Android را انتخاب کنید، ترجیحاً بالاترین سطح API. اگر نصب نیست، روی لینک دانلودی که نشان داده شده است کلیک کنید و دانلود را کامل کنید. روی Next کلیک کنید. در صفحه دستگاه مجازی Android (AVD) ، تنظیمات را همانطور که هستند رها کنید و روی Finish کلیک کنید. یک دستگاه Android را از گفتگوی هدف استقرار انتخاب کنید. Ok را کلیک کنید. Android Studio برنامه را می سازد، آن را مستقر می کند و به طور خودکار آن را در دستگاه مورد نظر باز می کند.

اگر نتوانستید وابستگی را اضافه کنید یا برنامه را با موفقیت اجرا کنید، محیط توسعه دهنده خود را متوقف کرده و عیب یابی کنید.

اگر هنگام ساخت با خطای INSTALL_FAILED_INVALID_APK مواجه شدید، سعی کنید « ساخت » -> « پروژه پاک » را در Android Studio انجام دهید.

موفقیت! باید صفحه ورود Shrine را در دستگاه یا شبیه ساز خود مشاهده کنید. وقتی Next را فشار دهید، صفحه اصلی Shrine با نوار برنامه در بالا و شبکه ای از تصاویر محصول در زیر ظاهر می شود.

بیایید با تغییر رنگ، ارتفاع و تایپوگرافی، نوار بالای برنامه را با برند Shrine مطابقت دهیم.

این تم رنگی توسط یک طراح با رنگ های سفارشی ساخته شده است (در تصویر زیر نشان داده شده است). این شامل رنگ هایی است که از برند Shrine انتخاب شده اند و در ویرایشگر تم مواد اعمال شده اند، که آنها را برای ایجاد یک پالت کامل تر گسترش داده است. (این رنگ ها از پالت های رنگ مواد 2014 نیستند.)

ویرایشگر تم مواد آنها را در سایه هایی با برچسب عددی، از جمله برچسب های 50، 100، 200، .... تا 900 از هر رنگ، سازماندهی کرده است. حرم فقط از سایه های 50، 100 و 300 از نمونه صورتی و 900 از نمونه قهوه ای استفاده می کند.

بیایید رنگ نوار بالای برنامه را تغییر دهیم تا آن طرح رنگی را منعکس کند.

colorPrimaryDark و colorAccent را تنظیم کنید

در colors.xml ، خطوط زیر را تغییر دهید. ویژگی colorAccent رنگ نوار بالای برنامه را از جمله موارد دیگر کنترل می کند و ویژگی colorPrimaryDark رنگ نوار وضعیت را کنترل می کند.

Colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

برای استفاده از نمادهای تیره در نوار وضعیت، موارد زیر را به Theme.Shrine ، موضوع برنامه Shrine اضافه کنید:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

نکته: شما باید فضای نام ابزارها را در تگ <resource> مانند شکل زیر وارد کنید:

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml و styles.xml شما باید به شکل زیر باشد:

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

در colors.xml ، یک منبع رنگی جدید textColorPrimary را با تنظیم #442C2E کنید و ویژگی toolbarIconColor را برای ارجاع به رنگ textColorPrimary به روز کنید.

برای تنظیم فایل styles.xml خود را به روز کنید

به رنگ textColorPrimary که به تازگی تعریف کردیم نسبت داده شود.

یک چیز دیگر: ویژگی android:theme را در سبک Widget.Shrine.Toolbar روی Theme.Shrine قرار دهید.

تنظیم android:textColorPrimary در Theme.Shrine به متن در تمام عناصر، از جمله نوار برنامه بالا، و نمادهای نوار برنامه بالای ما، استایل می دهد.

colors.xml و styles.xml شما باید به شکل زیر باشد:

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

بسازید و اجرا کنید. شبکه محصول شما اکنون باید به شکل زیر باشد:

بیایید سبک صفحه ورود به سیستم را تغییر دهیم تا با طرح رنگ ما مطابقت داشته باشد.

به فیلدهای متنی استایل بدهید

بیایید ورودی های متن در صفحه ورود را تغییر دهیم تا مشخص شود و از رنگ های بهتر برای طرح بندی خود استفاده کنیم.

منبع رنگ زیر را به فایل colors.xml خود اضافه کنید:

Colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

دو سبک جدید به styles.xml خود اضافه کنید:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

در نهایت، ویژگی style را در هر دو مؤلفه XML TextInputLayout در shr_login_fragment.xml به سبک جدید خود تنظیم کنید:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

رنگ های دکمه را سبک کنید

در نهایت رنگ دکمه های صفحه ورود را استایل دهید. استایل های زیر را به styles.xml خود اضافه کنید:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

سبک Widget.Shrine.Button از سبک MaterialButton پیش‌فرض گسترش می‌یابد و رنگ متن و رنگ پس‌زمینه دکمه را تغییر می‌دهد. Widget.Shrine.Button.TextButton از سبک متن پیش‌فرض MaterialButton گسترش می‌یابد و فقط رنگ متن را تغییر می‌دهد.

استایل Widget.Shrine.Button را روی دکمه Next و سبک Widget.Shrine.Button.TextButton را روی دکمه Cancel به صورت زیر تنظیم کنید:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

رنگ آرم حرم را در صفحه ورود به روز کنید. این به یک تغییر کوچک در وکتور قابل ترسیم، shr_logo.xml دارد. فایل drawable را باز کنید و ویژگی android:fillAlpha را به 1 تغییر دهید. drawable باید به صورت زیر باشد:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

سپس، ویژگی android:tint را روی لوگوی <ImageView> در shr_login_fragment.xml به صورت زیر روی ?android:attr/textColorPrimary قرار دهید:

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

بسازید و اجرا کنید. اکنون صفحه ورود شما باید به شکل زیر باشد:

نکاتی در مورد رنگ و تم:

• می توانید رنگ را در UI خود سفارشی کنید تا برند خود را بهتر نشان دهید.
• یک پالت رنگی بسازید که از دو رنگ (رنگ های اصلی و ثانویه) شروع کنید، با تغییرات روشن و تیره آن رنگ ها. یا از ابزار Material Design palette برای تولید پالت ها استفاده کنید.
• رنگ تایپوگرافی خود را فراموش نکنید!
• مطمئن شوید که کنتراست رنگ متن به پس‌زمینه در یک نسبت قابل دسترسی باشد (3:1 برای نوع بزرگ، 4.5:1 برای کوچک).

علاوه بر تغییر رنگ، طراح شما تایپوگرافی خاصی را نیز برای استفاده در سایت به شما داده است. بیایید آن را به نوار بالای برنامه نیز اضافه کنیم.

نوار برنامه بالا را استایل کنید

ظاهر متن نوار بالای برنامه خود را طوری طراحی کنید که با مشخصات ارائه شده توسط طراح شما مطابقت داشته باشد. سبک ظاهر متن زیر را به styles.xml کنید و ویژگی titleTextAppearance را برای ارجاع به این سبک در سبک Widget.Shrine.Toolbar خود تنظیم کنید.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml و styles.xml شما باید به شکل زیر باشد:

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

به برچسب ها سبک دهید

ما به برچسب‌های کارت محصول استایل می‌دهیم تا از ظاهر متن صحیح استفاده کنند و به صورت افقی در کارت قرار بگیرند.

تایپوگرافی روی برچسب عنوان خود را از textAppearanceHeadline6 به textAppearanceSubtitle2 به صورت زیر به روز کنید:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

برای وسط برچسب‌های تصویر، برچسب <TextView> s را در shr_product_card.xml تغییر دهید تا ویژگی android:textAlignment="center" را تنظیم کنید:

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

بسازید و اجرا کنید. صفحه شبکه محصول شما اکنون باید به شکل زیر باشد:

بیایید تایپوگرافی صفحه ورود را تغییر دهیم تا مطابقت داشته باشد.

نوع صفحه ورود به سیستم را تغییر دهید

در styles.xml ، استایل زیر را اضافه کنید:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

در shr_login_fragment.xml ، استایل جدید را روی عنوان "SHRINE" خود <TextView> تنظیم کنید (و ویژگی های textAllCaps و textSize را که در آنجا هستند حذف کنید):

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

بسازید و اجرا کنید. اکنون صفحه ورود شما باید به شکل زیر باشد:

نکاتی در مورد تایپوگرافی:

• هنگام انتخاب فونت‌های متنی که برای متن‌های کوچک و متن استفاده می‌شوند، به جای سبک خاصی، فونت‌هایی را انتخاب کنید که واضح باشند.
• فونت های نمایشی که برای تایپ ها و عناوین بزرگ استفاده می شود، باید برای بیان یا تاکید بر برند استفاده شوند.

اکنون که صفحه را با رنگ و تایپوگرافی خاص مطابق با Shrine استایل داده‌اید، بیایید نگاهی به کارت‌هایی بیندازیم که محصولات Shrine را نشان می‌دهند. در حال حاضر، آنها بر روی یک سطح سفید در زیر ناوبری برنامه قرار می گیرند. برای جلب توجه به محصولات، بیایید به آنها تأکید بیشتری کنیم.

تغییر ارتفاع شبکه محصول

برای اینکه به نظر برسد که محتوا روی یک صفحه شناور بالای نوار برنامه بالا قرار دارد، ارتفاعات نوار برنامه بالایی را تغییر دهید. ویژگی app:elevation را به AppBarLayout خود و android:elevation را به اجزای NestedScrollView XML در shr_product_grid_fragment.xml به صورت زیر اضافه کنید:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

تغییر ارتفاع کارت (و رنگ)

ارتفاع هر کارت را با تغییر app:cardElevation در shr_product_card.xml از 2dp به 0dp کنید. app:cardBackgroundColor را نیز به @android @android:color/transparent تغییر دهید.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView 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="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

نگاهی بیاندازید! شما ارتفاع هر کارت را در صفحه شبکه محصول تنظیم کرده اید.

ارتفاع دکمه Next را تغییر دهید

در styles.xml ، ویژگی زیر را به استایل Widget.Shrine.Button خود اضافه کنید:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

توجه: اگر Android Studio هنگام نوشتن این کد با خطاهای نماد حل نشد ، Alt + Enter یا ( Option + Return در Mac) را فشار دهید تا نمادهای از دست رفته وارد شوند.

تنظیم android:stateListAnimator به سبک Button ، دکمه Next را برای استفاده از انیماتوری که ما ارائه کرده‌ایم تنظیم می‌کند.

بسازید و اجرا کنید. اکنون صفحه ورود شما باید به شکل زیر باشد:

نکاتی در مورد ارتفاع:

• تمام سطوح و اجزای متریال دیزاین دارای مقادیر ارتفاعی هستند.
• تقسیم بین جایی که یک سطح به پایان می رسد و دیگری شروع می شود با لبه های سطح متمایز می شود.
• تفاوت ارتفاع بین سطوح را می توان با استفاده از پس زمینه کم نور، پس زمینه روشن یا سایه ها بیان کرد.
• سطوح روبروی سطوح دیگر معمولاً حاوی محتوای مهم تری هستند.

بیایید طرح‌بندی را تغییر دهیم تا کارت‌ها را با نسبت‌ها و اندازه‌های مختلف نشان دهیم، به طوری که هر کارت از کارت‌های دیگر منحصربه‌فرد به نظر برسد.

از یک آداپتور RecyclerView staggered استفاده کنید

ما یک آداپتور RecyclerView جدید برای شما در بسته staggeredgridlayout ارائه کرده‌ایم که طرح‌بندی کارت پلکانی نامتقارن را نشان می‌دهد که به معنای اسکرول افقی است. به راحتی می توانید آن کد را به تنهایی بررسی کنید، اما ما در اینجا به نحوه پیاده سازی آن نمی پردازیم.

برای استفاده از این آداپتور جدید، روش onCreateView() خود را در ProductGridFragment.kt تغییر دهید. بلوک کد را بعد از کامنت "setup the RecyclerView " با موارد زیر جایگزین کنید:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

همچنین باید یک تغییر کوچک در shr_product_grid_fragment.xml خود ایجاد کنیم تا بالشتک‌ها را از shr_product_grid_fragment.xml خود حذف 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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

در نهایت، ما همچنین با تغییر ProductGridItemDecoration.kt ، بالشتک کارت خود را در RecyclerView تنظیم می کنیم. متد ProductGridItemDecoration.kt getItemOffsets() ProductGridItemDecoration.kt را به صورت زیر تغییر دهید:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

بسازید و اجرا کنید. اکنون اقلام شبکه محصول باید به صورت پلکانی باشد:

رنگ یک راه قدرتمند برای بیان برند شما است و یک تغییر کوچک در رنگ می تواند تأثیر زیادی بر تجربه کاربری شما داشته باشد. برای آزمایش این موضوع، بیایید ببینیم اگر طرح رنگ برند کاملاً متفاوت بود، Shrine چگونه به نظر می رسید.

سبک ها و رنگ ها را تغییر دهید

در styles.xml ، تم جدید زیر را اضافه کنید:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

و در AndroidManifest.xml از این تم جدید در برنامه خود استفاده کنید:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

رنگ آیکون نوار ابزار را در colors.xml مطابق شکل زیر تغییر دهید:

Colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

سپس، ویژگی android:theme سبک نوار ابزار خود را طوری تنظیم کنید که به موضوع فعلی با استفاده از ویژگی "?theme" ارجاع دهد، نه اینکه آن را سخت کدنویسی کنید:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

سپس، رنگ متن اشاره را در فیلدهای متنی صفحه ورود روشن کنید. ویژگی android:textColorHint را به سبک فیلدهای متنی اضافه کنید:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

بسازید و اجرا کنید. اکنون باید تم جدید برای پیش نمایش ظاهر شود.

قبل از رفتن به MDC-104، کد تغییر یافته در این بخش را برگردانید.

در حال حاضر، شما برنامه ای ایجاد کرده اید که شبیه مشخصات طراحی طراح شما است.

برنامه تکمیل‌شده MDC 103 با دانلود کد لبه تمام‌شده ، یا با بررسی نسخه تکمیل‌شده این کد لبه با git: git checkout 103-complete دسترس است.

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

مراحل بعدی

شما از اجزای MDC زیر استفاده کرده اید: تم، تایپوگرافی، و ارتفاع. می توانید اجزا و زیرسیستم های بیشتری را در [کتابخانه وب MDC] کاوش کنید.

اگر طراحی برنامه برنامه ریزی شده شما حاوی عناصری باشد که مؤلفه هایی در کتابخانه MDC ندارند، چه؟ در MDC-104: Material Design Advanced Components ، به نحوه ایجاد اجزای سفارشی با استفاده از کتابخانه MDC برای دستیابی به ظاهری خاص خواهیم پرداخت.

من توانستم با صرف زمان و تلاش معقول این کد لبه را تکمیل کنم

کاملا موافقم موافق خنثی مخالف بودن کاملا مخالف

من می‌خواهم در آینده از Material Component استفاده کنم

کاملا موافقم موافق خنثی مخالف بودن کاملا مخالف