این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

1. مقدمه

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

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

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

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

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

رنگ
تایپوگرافی
ارتفاع
طرح بندی

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

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

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

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

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

تازه کار

متوسط

مسلط

2. محیط توسعه خود را تنظیم کنید

از 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

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

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

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMlSkwXbTmqBMuZ0XbT

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

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

به فایل 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'
}

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

مطمئن شوید که پیکربندی ساخت در سمت چپ دکمه 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 برنامه را می سازد، آن را مستقر می کند و به طور خودکار آن را در دستگاه مورد نظر باز می کند.

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

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

3. رنگ را تغییر دهید

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

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

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi-nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJcXWSV0LP 1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4QHTOsRLe-40sTu

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

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>

<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 قرار دهید.

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" />

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

4. تایپوگرافی و سبک های برچسب را تغییر دهید

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

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

ظاهر متن نوار بالای برنامه خود را طوری طراحی کنید که با مشخصات ارائه شده توسط طراح شما مطابقت داشته باشد. سبک ظاهر متن زیر را به 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" />

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

5. ارتفاع را تنظیم کنید

اکنون که صفحه را با رنگ و تایپوگرافی خاص مطابق با 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: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:stateListAnimator به سبک Button ، دکمه Next را برای استفاده از انیماتوری که ما ارائه کرده‌ایم تنظیم می‌کند.

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

6. چیدمان را تغییر دهید

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

از یک آداپتور 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 خود ایجاد کنیم تا بالشتک‌ها را از 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 تنظیم می کنیم. متد getItemOffsets() ProductGridItemDecoration.kt را به صورت زیر تغییر دهید:

ProductGridItemDecoration.kt

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

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

7. تم دیگری را امتحان کنید

رنگ یک راه قدرتمند برای بیان برند شما است و یک تغییر کوچک در رنگ می تواند تأثیر زیادی بر تجربه کاربری شما داشته باشد. برای آزمایش این موضوع، بیایید ببینیم اگر طرح رنگ برند کاملاً متفاوت بود، 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، کد تغییر یافته در این بخش را برگردانید.

8. خلاصه کنید

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

مراحل بعدی

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

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

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

کاملا موافقم

موافقم

خنثی

مخالف

به شدت مخالفم

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

کاملا موافقم

موافقم

خنثی

مخالف

به شدت مخالفم

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

1. مقدمه

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

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

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

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

2. محیط توسعه خود را تنظیم کنید

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

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

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

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

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

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

3. رنگ را تغییر دهید

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

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

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

4. تایپوگرافی و سبک های برچسب را تغییر دهید

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

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

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

5. ارتفاع را تنظیم کنید

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

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

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

6. چیدمان را تغییر دهید

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

7. تم دیگری را امتحان کنید

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

8. خلاصه کنید

مراحل بعدی

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

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