Material Components (MDC) ช่วยให้นักพัฒนาซอฟต์แวร์นํา Material Design ไปใช้ได้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google มีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้จํานวนมาก และพร้อมใช้งานสําหรับ Android, iOS, เว็บ และ Flitter material.io/develop |
ใน Codelab MDC-103 คุณได้ปรับแต่งสี ระดับความสูง และการพิมพ์อักษรของ Material Components (MDC) เพื่อจัดรูปแบบแอป
คอมโพเนนต์ในระบบ Material Design จะทํางานต่างๆ ที่กําหนดไว้ล่วงหน้าและมีลักษณะบางอย่าง เช่น ปุ่ม อย่างไรก็ตาม ปุ่มเป็นมากกว่าแค่วิธีหนึ่งของผู้ใช้ในการกระทํา แต่เป็นการแสดงรูปร่าง ขนาด และสี ซึ่งช่วยให้ผู้ใช้ทราบว่าปุ่มนี้เป็นแบบอินเทอร์แอกทีฟ และจะมีบางสิ่งเกิดขึ้นเมื่อแตะหรือคลิก
หลักเกณฑ์ของ Material Design จะอธิบายองค์ประกอบจากมุมมองของนักออกแบบ โดยจะอธิบายฟังก์ชันพื้นฐานต่างๆ ที่ใช้ได้ในทุกแพลตฟอร์ม รวมถึงองค์ประกอบต่างๆ ของร่างกาย ตัวอย่างเช่น ฉากหลังประกอบด้วยเลเยอร์ด้านหลังและเนื้อหา เลเยอร์ด้านหน้าและเนื้อหา กฎการเคลื่อนไหว และตัวเลือกการแสดงผล คุณปรับแต่งองค์ประกอบแต่ละรายการเหล่านี้ให้เหมาะกับความต้องการ กรณีการใช้งาน และเนื้อหาของแอปแต่ละรายการได้ โดยทั่วไปแล้ว รายการเหล่านี้คือยอดดู การควบคุม และฟังก์ชันแบบดั้งเดิมจาก SDK ของแพลตฟอร์ม
แม้ว่าหลักเกณฑ์การใช้ Material Design จะตั้งชื่อองค์ประกอบหลายอย่าง แต่ก็มีบางองค์ประกอบที่ไม่ใช่องค์ประกอบที่ดีสําหรับโค้ดที่นํามาใช้ซ้ําได้ ดังนั้นจึงไม่พบใน MDC คุณจะสร้างประสบการณ์ในการใช้งานประเภทนี้ด้วยตัวเองเพื่อให้ได้รูปแบบที่เหมาะกับแอปของคุณโดยเฉพาะ โดยใช้โค้ดแบบดั้งเดิม
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะต้องเพิ่มฉากหลังลงในศาลเจ้า โดยจะกรองผลิตภัณฑ์ที่แสดงในตารางกริดแบบสมมาตรตามหมวดหมู่ คุณจะใช้สถานะต่อไปนี้
- รูปร่าง
- การเคลื่อนไหว
- ชั้นเรียน Android SDK แบบดั้งเดิม
คอมโพเนนต์ MDC-Android ใน Codelab นี้
- รูปร่าง
สิ่งที่ต้องมี
- ความรู้เบื้องต้นเกี่ยวกับการพัฒนา Android
- Android Studio (ดาวน์โหลดได้ที่นี่หากยังไม่มี)
- โปรแกรมจําลองหรืออุปกรณ์ Android (พร้อมใช้งานผ่าน Android Studio)
- โค้ดตัวอย่าง (ดูขั้นตอนถัดไป)
คุณจะให้คะแนนประสบการณ์ในการสร้างแอป Android ในระดับใด
การดําเนินการต่อจาก MDC-103
หากคุณกรอก MDC-103 เสร็จ โค้ดของคุณควรพร้อมใช้งานสําหรับ Codelab นี้ ให้ข้ามไปยังขั้นตอนที่ 3
เริ่มต้นใหม่ทั้งหมด
ดาวน์โหลดแอป Starter Lab
แอปเริ่มต้นจะอยู่ในไดเรกทอรี material-components-android-codelabs-104-starter/java ตรวจสอบว่าได้ cd ในไดเรกทอรีนั้นก่อนเริ่มต้น
...หรือโคลนจาก GitHub
หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คําสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
โหลดโค้ดเริ่มต้นใน Android Studio
- เมื่อวิซาร์ดการตั้งค่าเสร็จสิ้นและหน้าต่างยินดีต้อนรับสู่ Android Studio ปรากฏขึ้น ให้คลิกเปิดโครงการ Android Studio ที่มีอยู่ ไปที่ไดเรกทอรีที่ติดตั้งโค้ดตัวอย่าง แล้วเลือก java ->ศาลเจ้า (หรือค้นหา shrine) ในคอมพิวเตอร์เพื่อเปิดโปรเจ็กต์ศาลเจ้า
- รอสักครู่เพื่อให้ Android Studio สร้างและซิงค์โปรเจ็กต์ดังที่แสดงตามสัญญาณบอกสถานะกิจกรรมที่ด้านล่างของหน้าต่าง Android Studio
- เมื่อถึงจุดนี้ Android Studio อาจแสดงข้อผิดพลาดบิลด์บางรายการเนื่องจากคุณไม่มี Android SDK หรือเครื่องมือสร้าง เช่น ดังที่แสดงด้านล่าง ทําตามวิธีการใน Android Studio เพื่อติดตั้ง/อัปเดตและซิงค์โปรเจ็กต์
เพิ่มทรัพยากร Dependency ของโปรเจ็กต์
โครงการต้องพึ่งพาไลบรารีการสนับสนุนของ Android สําหรับ MDC โค้ดตัวอย่างที่คุณดาวน์โหลดควรมีรายการทรัพยากร Dependency นี้อยู่แล้ว แต่เราขอแนะนําให้ทําตามขั้นตอนต่อไปนี้เพื่อให้แน่ใจว่า
- ไปที่ไฟล์
build.gradleของโมดูลapp##39; และตรวจสอบว่าบล็อกdependenciesมีทรัพยากร Dependency ใน MDC ของ Android ดังนี้
api 'com.google.android.material:material:1.1.0-alpha06'
- (ไม่บังคับ) หากจําเป็น ให้แก้ไขไฟล์
build.gradleเพื่อเพิ่มทรัพยากร Dependency ต่อไปนี้และซิงค์โปรเจ็กต์
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'
}
เรียกใช้แอปเริ่มต้น
|
สำเร็จ! คุณจะเห็นแอปศาลเจ้ากําลังทํางานในอุปกรณ์
ฉากหลังเป็นพื้นผิวที่ด้านหลังสุดของแอป ซึ่งปรากฏอยู่ด้านหลังเนื้อหาและองค์ประกอบอื่นๆ ทั้งหมด ซึ่งประกอบด้วยแพลตฟอร์ม 2 อย่าง ได้แก่ เลเยอร์ด้านหลัง (ซึ่งจะแสดงการดําเนินการและตัวกรอง) และเลเยอร์ด้านหน้า (ซึ่งแสดงเนื้อหา) คุณใช้ฉากหลังเพื่อแสดงข้อมูลและการดําเนินการแบบอินเทอร์แอกทีฟได้ เช่น การนําทางหรือตัวกรองเนื้อหา
ปกปิดเนื้อหาตารางกริด
ใน 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 ให้เพิ่มสิ่งต่อไปนี้
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>เยี่ยมมาก! คุณได้เพิ่มฉากหลังที่สวยงามลงใน UI ของ 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>และเพิ่มรายการนี้ลงใน LinearLayout ที่คุณเพิ่งเพิ่มใน shr_product_grid_fragment.xml โดยใช้แท็ก <include>
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 ใน Codelab นี้ เนื้อหาหลักของผลิตภัณฑ์ตั้งอยู่บนด้านหลังสุด การเพิ่มฉากหลังทําให้เนื้อหานี้ได้รับการเน้นมากขึ้นเพราะอยู่หน้าฉากหลังนั้น
เพิ่มเลเยอร์ใหม่
เราควรแสดงชั้นตารางกริดผลิตภัณฑ์อีกครั้ง นําแอตทริบิวต์ 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">มาจัดรูปแบบเลเยอร์ด้านหน้าด้วยรอยบากที่มุมบนซ้าย การออกแบบวัสดุหมายถึงการปรับแต่งประเภทนี้เป็นรูปร่าง พื้นผิววัสดุสามารถแสดงในรูปทรงต่างๆ รูปร่างดังกล่าวช่วยเพิ่มการเน้นและสไตล์ให้กับพื้นผิวและยังใช้เพื่อแสดงการสร้างแบรนด์ได้ รูปทรงของวัสดุอาจมีมุมและขอบโค้งหรือมุม รวมถึงจํานวนด้านได้ ซึ่งอาจมีสมมาตรหรือไม่ปกติ
เพิ่มรูปร่าง
แก้ไขรูปร่างของตารางกริด เราได้ใส่พื้นหลังรูปร่างที่กําหนดเองไว้ แต่รูปร่างจะแสดงเฉพาะอย่างถูกต้องใน Android Marshmallow ขึ้นไปเท่านั้น เราสามารถตั้งค่าพื้นหลัง shr_product_grid_background_shape ใน NestedScrollView ของคุณได้เฉพาะสําหรับ Android Marshmallow ขึ้นไป ขั้นแรกให้เพิ่ม 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() ก่อนคําสั่งคืนสินค้า
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 (โดยใช้พื้นหลังรูปร่างที่กําหนดเอง) ด้วยดังนี้
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>สร้างและเรียกใช้
เรากําหนดให้ Shrine สร้างรูปร่างที่กําหนดเองไปยังพื้นผิวหลัก เนื่องจากระดับความสูงของแพลตฟอร์ม ผู้ใช้จะเห็นว่ามีบางอย่างอยู่ด้านหลังเลเยอร์สีขาวด้านหน้า มาเพิ่มการเคลื่อนไหวเพื่อให้ผู้ใช้มองเห็นสิ่งที่อยู่ในเมนูกัน
การเคลื่อนไหวเป็นวิธีหนึ่งที่จะทําให้แอปมีชีวิตชีวา การเคลื่อนไหวอาจมีความยิ่งใหญ่ ตระการตา บอบบางและน้อยที่สุด หรืออยู่ระหว่างนั้น ประเภทของการเคลื่อนไหวที่คุณใช้ควรเหมาะสมกับสถานการณ์ การเคลื่อนไหวที่คุณใช้กับการดําเนินการปกติซ้ําๆ ควรมีขนาดเล็กและเล็กน้อย จึงไม่ควรใช้เวลามากเกินไปจนเกินไป ส่วนสถานการณ์อื่นๆ เช่น ครั้งแรกที่ผู้ใช้เปิดแอปอาจทําให้สะดุดตามากขึ้น และช่วยแจ้งให้ผู้ใช้ทราบวิธีใช้แอปได้
เพิ่มการเคลื่อนไหวของการเปิดเผยไปยังปุ่มเมนู
การเคลื่อนไหวคือรูปร่างด้านหน้าที่เคลื่อนลงด้านล่าง เราได้ให้ Listener การคลิกแก่คุณแล้ว ซึ่งคุณจะต้องสร้างภาพเคลื่อนไหวของชีตในNavigationIconClickListener.java เราตั้งค่า Listener การคลิกนี้โดยใช้เมธอด 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 ไปยังไอคอนการนําทาง' คลิก Listener ดังนี้
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" />
อัปเดต Listener การคลิกใน setupToolbar() อีกครั้งใน ProductGridFragment.java เพื่อใช้ค่าที่ดึงมาได้สําหรับแถบเครื่องมือเมื่อเมนูเปิดอยู่และเมื่อปิดเบราว์เซอร์ ดังนี้
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
}
สร้างและเรียกใช้
ดีมาก เมื่อฉากหลังปรากฏขึ้นได้ ไอคอนเมนูไดมอนด์จะปรากฏขึ้น เมื่อคุณซ่อนเมนูได้ ระบบจะแสดงไอคอนปิดแทน
ตลอดช่วง 4 ครั้งที่ Codelab คุณได้เห็นวิธีใช้ Material Components เพื่อสร้างประสบการณ์ของผู้ใช้ที่สวยงามและไม่ซ้ําใคร ซึ่งแสดงถึงตัวตนและสไตล์ของแบรนด์
ขั้นตอนถัดไป
Codelab นี้ MDC-104 จะดําเนินการ Codelab นี้ให้เสร็จสมบูรณ์ คุณจะสํารวจคอมโพเนนต์ใน MDC-Android เพิ่มเติมได้โดยไปที่แคตตาล็อกวิดเจ็ต Android
สําหรับการทดลองเพิ่มเติมเกี่ยวกับ Codelab นี้ ให้แก้ไขแอปพลิเคชัน Shrine เพื่อเปลี่ยนรูปภาพผลิตภัณฑ์ที่แสดงเมื่อมีการเลือกหมวดหมู่จากเมนูฉากหลัง
ดูวิธีเชื่อมต่อแอปนี้กับ Firebase สําหรับแบ็กเอนด์ที่ใช้งานได้ได้ที่ Firebase Android Codelab