متریال دیزاین اندروید
فهرست مطالب
آخرین به روزرسانی در 29/07/2022
در این مقاله قصد داریم به بررسی مبحث متریال دیزاین اندروید بپردازیم که بسیار حائز اهمیت می باشد .
متریال دیزاین اندروید مبحثی است که شباهت بسیار به مقالات رابط کاربری و تجربه ی کاربری دارد .
اما در این بخش ما به صورت تخصصی صرفا به معرفی استانداردها و اصول طراحی در اندروید و دیوایز
موبایل خواهیم پرداخت . (از مباحث مربوط به چارچوب ها و رنگ بندی ها تا معرفی کامپوننت های مهم)
تا پایان این مقاله برای یافتن این نکات مهم ما را همراهی کنید .
(لازم به ذکر است متریال دیزاینی که قصد صحبت در رابطه با آن را داریم برای زبان برنامه نویسی جاوا بوده که قبلا در مقاله ی مربوط به آن توضیحات کاملی ارائه شده است .)
(نکته ی بسیار مهمی که وجود دارد این است که این مقاله برای معرفی و آموزش متریال دیزاین اندروید و اپلیکیشن در قالب
یک پروژه برای طراحی چندین صفحه ی اپلیکیشن فروشگاهی ارائه شده است .
همچنین مقاله تنها به مباحث طراحی خلاصه نشده و نحوه ی پیاده سازی بک اند نیز در برخی از بخش ها آموزش داده شده است .)
منظور از متریال دیزاین و اجزای آن برای اندروید
متریال دیزاین سیستمی برای ساخت یک خروجی دیجیتال زیبا و کاملا داینامیک است .
که با همپاچرگی استایل ها ، تعامل و موشن های ساختاری که از اصول و اجزای ثابت تشکیل شده اند .
برای برنامههای Android، Material Components for Android (MDC Android) کتابخانه ای است که این
عملیات یکپارچه سازی و تعامل را بسیار ساده و آسان کرده است .
با تکامل سیستم Material Design ، این مؤلفهها بهروزرسانی میشوند تا از پیادهسازی بینقص پیکسلی و رعایت استانداردهای توسعه فرانتاند Google اطمینان حاصل شود.
MDC برای وب، iOS و Flutter نیز موجود است.
در این نرم افزار، یک صفحه ورود با استفاده از چندین مؤلفه MDC Android ایجاد می کنید.
مولفه های MDC Android
(ساخته صفحه ورود)
پس از بارگذاری Staeter Code که توضیحات آن در آدرس :
https://codelabs.developers.google.com/codelabs/mdc-101-java#1
آمده است وارد مراحل اضافه کرده text fields خواهیم شد .
برای شروع، ما دو فیلد متنی را به صفحه ورود خود اضافه می کنیم تا افراد بتوانند نام کاربری و رمز عبور خود را وارد کنند.
ما از مؤلفه MDC Text Field استفاده می کنیم که شامل عملکرد داخلی است که برچسب شناور و پیام های خطا را نیز نمایش می دهد.
افزودن به XML :
در shr_login_fragment.xml، دو عنصر TextInputLayout را با یک TextInputEditText فرزند در داخل ، در زیر برچسب “SHRINE” اضافه کنید :
قطعه بالا دو فیلد متنی را نشان می دهد که هر کدام از یک عنصر <TextInputLayout> و یک فرزند <TextInputEditText> تشکیل شده است.
متن اشاره برای هر فیلد متنی در ویژگی android:hint مشخص شده است.
Username
Password
خطاها :
اجزای TextInputLayout خطاهای داخلی را نمایش می دهد .
برای نمایش خطاها، تغییرات زیر را در shr_login_fragment.xml اعمال کنید:
مشخصه app:errorEnabled را در عنصر Password TextInputLayout روی true تنظیم کنید.
این المنت اضافی برای پیام خطا در زیر فیلد متنی اضافه می کند.
ویژگی android:inputType را روی “textPassword” در عنصر Password TextInputEditText قرار دهید.
با این کار متن ورودی در قسمت رمز عبور پنهان می شود.
با این تغییرات، فیلدهای متنی در shr_login_fragment.xml باید به شکل زیر باشند:
اکنون برنامه را اجرا کنید. شما باید صفحه ای با دو فیلد متنی برای «نام کاربری» و «رمز عبور» ببینید.
اضافه کردن دکمه ها
در مرحله بعد، دو دکمه را به صفحه ورود خود اضافه می کنیم: « Cancel » و « Next ».
ما از مولفه MDC Button استفاده خواهیم کرد که با یک استایل موج دار جوهری Material Design دکمه ها را اضافه می کند .
در shr_login_fragment.xml، یک <RelativeLayout> را به <LinearLayout>، در زیر عناصر TextInputLayout اضافه کنید.
سپس دو عنصر <MaterialButton> را به <RelativeLayout> اضافه کنید.
فایل XML حاصل باید به شکل زیر باشد:
حال می بینید هنگامی که برنامه را اجرا می کنید، با ضربه زدن روی هر دکمه، یک موج جوهر نمایش داده می شود.
رفتن به قسمت بعدی
در نهایت، کد جاوا را به LoginFragment.java اضافه می کنیم تا دکمه “NEXT” خود را به قطعه دیگری متصل کنیم.
متوجه خواهید شد که هر یک از مؤلفه هایی که به طرح خود اضافه کردیم، یک شناسه به آن اختصاص داده شده است.
ما از این شناسهها برای ارجاع به مؤلفههای کدمان استفاده میکنیم و برخی از قابلیت ها مانند بررسی خطاها و پیمایش را اضافه میکنیم.
بیایید یک متد بولی خصوصی isPasswordValid در LoginFragment.java در زیر () onCreateView اضافه کنیم که منطقی برای تعیین اینکه آیا رمز عبور معتبر است یا خیرمی باشد.
برای اهداف این دمو، ما فقط مطمئن می شویم که رمز عبور حداقل 8 کاراکتر باشد:
/*
In reality, this will have more complex logic including, but not limited to, actual
authentication of the username and password.
*/
private boolean isPasswordValid(@Nullable Editable text) {
return text != null && text.length() >= 8;
}
در مرحله بعد، یک کلیک listener به دکمه « NEXT» اضافه کنید که خطا را بر اساس متد () isPasswordValid که ایجاد کردیم تنظیم و پاک می کند.
در () onCreateView، این کلیک listener باید بین خط inflater و خط نمای بازگشتی قرار گیرد.
در مرحله بعد، بیایید یک listener کلیدی به رمز عبور TextInputEditText اضافه کنیم تا به رویدادهای کلیدی که خطا را پاک می کنند توجه داشته باشیم.
این listener همچنین باید از () isPasswordValid برای بررسی معتبر بودن یا نبودن رمز عبور استفاده کند.
می توانید این مورد را مستقیماً زیر کلیک شنونده در () onCreateView اضافه کنید.
متد onCreateView شما اکنون باید چیزی شبیه به این باشد:
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.shr_login_fragment, container, false);
final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
final TextInputEditText passwordEditText = view.findViewById(R.id.password_edit_text);
MaterialButton nextButton = view.findViewById(R.id.next_button);
// Set an error if the password is less than 8 characters.
nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (!isPasswordValid(passwordEditText.getText())) {
passwordTextInput.setError(getString(R.string.shr_error_password));
} else {
passwordTextInput.setError(null); // Clear the error
}
}
});
// Clear the error once more than 8 characters are typed.
passwordEditText.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View view, int i, KeyEvent keyEvent) {
if (isPasswordValid(passwordEditText.getText())) {
passwordTextInput.setError(null); //Clear the error
}
return false;
}
});
return view;
}
Structure و Layout
در بخش قبل ، شما از دو جزء متریال (MDC) برای ساختن یک صفحه ورود استفاده کردید: فیلدهای متنی و دکمه ها.
اکنون اجازه دهید این پایه را با افزودن ناوبری، ساختار و داده ها گسترش دهیم.
در این بخش از فروشگاه ما نیازمند دو بخش دیگر هستیم که عبارتند از :
- نوار برنامه برتر
- لیست شبکه ای از محصولات
اضافه کردن top app bar
زمانی که کاربر وارد شدن حال نوبت به نمایش صفحه ی اصلی می رسد صفحه ای که قائدتا باید محصولات شما در آن نمایش داده شود .
در این صفحه ما در ابتدای کار قصد داریم تاب بار را طراحی و پیاده سازی کنیم .
متریال دیزاین اندروید الگوهای ناوبری را ارائه می دهد که درجه بالایی از قابلیت استفاده را دارا می باشد.
یکی از قابل توجه ترین مؤلفه های ناوبری، نوار بالای برنامه یا همان تاب بار است.
ممکن است نوار بالای برنامه را بهعنوان «نوار پیمایش» در iOS یا به طور ساده «نوار برنامه» یا «هدر» نیز بشناسید.
برای ارائه ناوبری و دسترسی سریع کاربران به سایر اقدامات، بیایید یک نوار برنامه ی فوق العاده طراحی کنیم .
مرحله 1
در shr_product_grid_fragment.xml، تگ حاوی TextView را با موارد زیر جایگزین کنید:
shr_product_grid_fragment.xml شما باید به شکل زیر باشد:
اضافه کردن منو به تاب بار
در حالی که هنوز در بخش shr_product_grid_fragment.xml هستید، موارد زیر را به مؤلفه Toolbar XML اضافه کنید:
حال دکمه های action را اضافه کنید و به نوار بالای برنامه استایل دهید .
حال نوار بالایی را استایل دهی کرده و دکمه های action را به صورت برنامه ریزی شده به منوی آن اضافه می کنیم.
ابتدا بیایید روشی برای تنظیم نوار ابزار ایجاد کنیم. این متد باید با استفاده از شناسه خود به نوار ابزار ارجاع دهد و همچنین با استفاده از ()getActivity به اکتیویتی ارجاع دهد.
اگر اکتیویتی تهی نیست، نوار ابزار را تنظیم کنید تا با استفاده از setSupportActionBar به عنوان یک ActionBar استفاده شود:
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
اکنون یک فراخوانی به متد setUpToolbar اضافه کنید که به محتوای متد () onCreateView اضافه کردیم با موارد زیر:
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
در نهایت یک متد () onCreate به ProductGridFragment.java اضافه کنید و در بدنه متد، پارامتر setHasOptionMenu را درست تنظیم کنید.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
کد بالا نوار برنامه را از طرح XML ما به عنوان نوار action برای این فعالیت تنظیم می کند.
پاسخ به تماس onCreateOptionsMenu به action می گوید که از چه چیزی به عنوان منو استفاده کند. در این حالت، آیتم های منو از R.menu.shr_toolbar_menu را در نوار برنامه قرار می دهد.
پس از این تغییرات، فایل ProductGridFragment.java شما باید به صورت زیر باشد:
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}
افزودن جایگاه محصولات
بیایید با اضافه کردن یک جایگاه محصول در زیر نوار بالای برنامه شروع کنیم.
یک جایگاه محصول باید یک محدوده برای تصویر، یک عنوان و یک برچسب برای متن ثانویه داشته باشد.
در shr_product_grid_fragment.xml، موارد زیر را در زیر AppBarLayout اضافه کنید:
جایگاه محصولات معمولا در یک مجموعه با محصولات دیگر نشان داده می شوند.
در بخش بعدی ، ما آنها را به عنوان یک مجموعه در یک شبکه قرار خواهیم داد.
ایجاد grid برای محصولات
هنگامی که چندین محصول در یک صفحه وجود دارد، آنها با هم در یک یا چند مجموعه گروه بندی می شوند.
محصولات در یک grid (شبکه) همسطح هستند، به این معنی که آنها ارتفاع یکسانی با یکدیگر دارند .
به فایل shr_product_card.xml نگاهی بیندازید :
این طرح محصولات شامل یک محصول با یک تصویر (در اینجا NetworkImageView، که به ما امکان می دهد تصاویر را از URL اضافه کنیم) و
دو TextView است.
در مرحله بعد، به ProductCardRecyclerViewAdapter که برای شما ارائه کرده ایم نگاه کنید. این بسته در همان بسته ProductGridFragment است.
package com.google.codelabs.mdc.java.shrine;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
import java.util.List;
/**
* Adapter used to show a simple grid of products.
*/
public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter {
private List productList;
private ImageRequester imageRequester;
ProductCardRecyclerViewAdapter(List productList) {
this.productList = productList;
imageRequester = ImageRequester.getInstance();
}
@NonNull
@Override
public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
return new ProductCardViewHolder(layoutView);
}
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
// TODO: Put ViewHolder binding code here in MDC-102
}
@Override
public int getItemCount() {
return productList.size();
}
}
کلاس آداپتور بالا محتوای grid ما را مدیریت می کند. برای تعیین اینکه هر view باید با محتوای داده شده خود چه کاری انجام دهد، به زودی کد ()onBindViewHolder را می نویسیم.
در همان بسته، می توانید نگاهی به ProductCardViewHolder نیز بیندازید.
این کلاس نماهایی را ذخیره می کند که روی طرح محصولات ما تأثیر می گذارد، بنابراین می توانیم بعداً آنها را تغییر دهیم.
package com.google.codelabs.mdc.java.shrine;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
// TODO: Find and store views from itemView
}
}
برای راهاندازی grid، ابتدا میخواهیم MaterialCardView را از shr_product_grid_fragment.xml حذف کنیم.
در مرحله بعد، باید مؤلفهای را اضافه کنید که نشاندهنده grid مصولات ما است.
در این مورد، یک جزء RecyclerView را به shr_product_grid_fragment.xml خود در زیر جزء AppBarLayout XML خود اضافه کنید:
در نهایت، در () onCreateView، پس از فراخوانی setUpToolbar(view) و قبل از دستور بازگشت، کد اولیه RecyclerView را به ProductGridFragment.java اضافه کنید:
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
...
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
قطعه کد بالا شامل مراحل اولیه سازی لازم برای راه اندازی RecyclerView است.
این شامل تنظیم طرحبندی RecyclerView، به علاوه مقداردهی اولیه و تنظیم آداپتور RecyclerView است.
فایل ProductGridFragment.java شما اکنون باید به شکل زیر باشد:
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}
افزودن تصویر و متن برای محصولات
برای هر محصول، یک تصویر، نام و قیمت اضافه کنید.
ViewHolder ما نماهای هر محصول را نگه می دارد. در ViewHolder ما، سه نما را به صورت زیر اضافه کنید:
package com.google.codelabs.mdc.java.shrine;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import com.android.volley.toolbox.NetworkImageView;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public NetworkImageView productImage;
public TextView productTitle;
public TextView productPrice;
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
productImage = itemView.findViewById(R.id.product_image);
productTitle = itemView.findViewById(R.id.product_title);
productPrice = itemView.findViewById(R.id.product_price);
}
}
در RecyclerView ما، در ViewHolder، متد () onBindViewHolder را بهروزرسانی کنید تا اطلاعات هر نما را تنظیم کنید:
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
if (productList != null && position < productList.size()) {
ProductEntry product = productList.get(position);
holder.productTitle.setText(product.title);
holder.productPrice.setText(product.price);
imageRequester.setImageFromUrl(holder.productImage, product.url);
}
}
رنگ ها در متریال دیزاین اندروید
در ابتدا مطابق با شکل زیر یک گروه رنگی انتخاب و مشخص می کنیم .
در Colors.xml خطوط زیر را تغییر دهید.
اتربیوت colorAccent رنگ نوار بالای برنامه را از جمله موارد دیگر کنترل می کند و اتریبیوت colorPrimaryDark رنگ نوار وضعیت را کنترل می کند.
#FBB8AC
#FEDBD0
در Colors.xml، یک منبع رنگی جدید textColorPrimary را با تنظیم #442C2E اضافه کنید و
اتریبیوت نوار ابزارIconColor را برای ارجاع به رنگ textColorPrimary به روز کنید.
فایل styles.xml خود را به روز کنید تا اتربیوت android:textColorPrimary را روی رنگ textColorPrimary تنظیم کنید.
تنظیم android:textColorPrimary در Theme.Shrine، متن را در تمام عناصر، از جمله نوار بالای برنامه و نمادهای نوار بالای برنامه ما، استایل میدهد.
یک چیز دیگر: ویژگی android:theme را در سبک Widget.Shrine.Toolbar روی Theme.Shrine قرار دهید.
colors.xml و styles.xml شما باید به صورت زیر باشد:
#E0E0E0
#FBB8AC
#FEDBD0
#442C2E
@color/textColorPrimary
#FFFFFF
#FFFFFF
در نهایت، اتربیوت style را در هر دو مؤلفه XML TextInputLayout در shr_login_fragment.xml به استایل جدید خود اضافه کنید:
در نهایت رنگ دکمه های صفحه ورود را استایل دهی کنید. استایل های زیر را به styles.xml خود اضافه کنید:
استایل Widget.Shrine.Button از استایل MaterialButton پیشفرض گسترش مییابد و رنگ متن و رنگ پسزمینه دکمه را تغییر میدهد. Widget.Shrine.Button.TextButton از استایل متن پیش فرض MaterialButton گسترش یافته و فقط رنگ متن را تغییر می دهد.
استایل Widget.Shrine.Button را روی دکمه Next و استایل Widget.Shrine.Button.TextButton را روی دکمه Cancel به صورت زیر تنظیم کنید:
تایپوگرافی
علاوه بر تغییر رنگ، طراح شما تایپوگرافی خاصی را نیز برای استفاده در سایت به شما داده است.
بیایید آن را به نوار بالای برنامه نیز اضافه کنیم.
ظاهر متن نوار بالای برنامه خود را طوری طراحی کنید که با مشخصات ارائه شده توسط طراح شما مطابقت داشته باشد. استایل ظاهر متن زیر را به styles.xml اضافه کنید و ویژگی titleTextAppearance را برای ارجاع به این سبک در سبک Widget.Shrine.Toolbar خود تنظیم کنید.
colors.xml و styles.xml شما باید به صورت زیر باشد:
#E0E0E0
#FBB8AC
#FEDBD0
#442C2E
@color/textColorPrimary
#FFFFFF
#FFFFFF
#FBB8AC
Shape ها
ما باید مجدد لایه grid محصول را نشان دهیم. ویژگی android:visibility=”gone” را از NestedScrollView خود حذف کنید:
بیایید لایه جلویی را با یک بریدگی در گوشه سمت چپ بالا استایل دهی کنیم.
متریال دیزاین اندروید به این نوع سفارشی سازی به عنوان یک شکل اشاره می کند.
سطوح متریال را می توان به اشکال مختلف نمایش داد.
شکل ها به سطوح تاکید و سبک می بخشند و می توانند برای بیان برند استفاده شوند.
اشکال متریال می توانند گوشه ها و لبه های منحنی یا زاویه دار و هر تعداد ضلع داشته باشند. آنها می توانند متقارن یا نامنظم باشند.
افزودن shape
شکل grid را تغییر دهید. ما یک پسزمینه شکل سفارشی ارائه کردهایم،
اما شکل فقط در Android Marshmallow و بالاتر به درستی نمایش داده میشود.
ما میتوانیم پسزمینه shr_product_grid_background_shape را در NestedScrollView شما
فقط برای Android Marshmallow و بالاتر تنظیم کنیم.
ابتدا یک شناسه به NestedScrollView خود اضافه کنید تا بتوانیم به صورت کد به آن ارجاع دهیم:
سپس، پسزمینه را به صورت برنامهنویسی در ProductGridFragment.java تنظیم کنید.
منطق زیر را برای تنظیم پسزمینه در انتهای ()onCreateView، درست قبل از دستور بازگشت اضافه کنید:
// 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);
}
موشن ها
موشن راهی برای پویا کردن اپلیکیشن شماست. موشن می تواند بزرگ و دراماتیک، ظریف و مینیمال، یا هر جایی در این بین باشد.
نوع موشنی که استفاده می کنید باید متناسب با موقعیت باشد. موشنی که برای تکرار منظم اعمال می شود باید کوچک و ظریف باشد،
بنابراین زمان زیادی را به طور منظم نمی گیرد.
موقعیتهای دیگر، مانند اولین باری که کاربر یک برنامه را باز میکند، میتواند چشم نوازتر باشد و
میتواند به آموزش کاربر در مورد نحوه استفاده از برنامه شما کمک کند.
ما می توانیم یک ClickListener را در متد setupToolbar() ProductGridFragment.java تنظیم کنیم:
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
متد ()setUpToolbar شما اکنون باید به صورت زیر باشد:
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)));
}
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
در زندگی رویاهات را دنبال کن