مراد از متریال صفحه ارایی و اجزای آن برای اندروید
متریال طراحی صفحه سیستمی برای تشکیل داد یک خروجی دیجیتال قشنگ و به طور کامل داینامیک میباشد .
که با همپاچرگی استایل ها ، تعامل و موشن های ساختاری که از اصول و اجزای اثبات تشکیلشده اند . برای نرمافزارهای 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” اضافه نمایید :
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_username">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1" />
android:id="@+id/password_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_password">
android:id="@+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
قطعه بالا دو فیلد متنی را علامت میدهد که هرکدام از یک عنصر و یک فرزند ساخته شده میباشد.
متن اشاره برای هر فیلد متنی در خصوصیت android:hint مشخص و معلوم گردیدهاست.
Username
Password
ایرادات :
اجزای TextInputLayout خطاهای داخلی را اکران میدهد .
برای اکران ایرادات، تغییرات ذیل را در shr_login_fragment.xml انجام فرمایید:
مشخصه app:errorEnabled را در عنصر Password TextInputLayout روی true تهیه فرمایید.
این المنت مازاد برای پیام اشتباه در تحت فیلد متنی اضافه می نماید.
خصوصیت android:inputType را روی “textPassword” در عنصر Password TextInputEditText قرار دهید.
با این فعالیت متن ورودی در بخش راز عبور مخفی میگردد.
با این تغییرات، فیلدهای متنی در shr_login_fragment.xml بایستی به صورت ذیل باشند:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_username">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1" />
android:id="@+id/password_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="@string/shr_hint_password"
app:errorEnabled="true">
android:id="@+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
اینک اپ را جاری ساختن فرمائید. شما می بایست برگه ای با دو فیلد متنی برای «اسم کاربری» و «راز عبور» ملاحظه کنید.
افزودن دکمه ها
در مرحله بعد از آن، دو دکمه را به ورقه ورود خویش اضافه میکنیم: « Cancel » و « Next ».
ما از مولفه MDC Button به کار گیری خوا هیم کرد که با یک استایل موج دار جوهری Material Design دکمه ها را اضافه می نماید .
در shr_login_fragment.xml، یک را به ، در تحت ارکان TextInputLayout اضافه نمایید.
بعد دو عنصر را به اضافه نمایید.
پوشه XML نتیجه ها می بایست به صورت ذیل باشد:
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/next_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" />
android:id="@+id/cancel_button"
style="@style/Widget.MaterialComponents.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" />
اکنون میبینید زمانی که اپ را اعمال میکنید، با ضربه زدن روی هر دکمه، یک موج جوهر نمایش داده میشود.
منزلت تبلیغ در حاصل گوگل