1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
কোডল্যাব MDC-101-এ, আপনি একটি লগইন পৃষ্ঠা তৈরি করতে দুটি ম্যাটেরিয়াল কম্পোনেন্ট (MDC) ব্যবহার করেছেন: টেক্সট ফিল্ড এবং কালির লহরযুক্ত বোতাম। এখন আসুন নেভিগেশন, কাঠামো এবং ডেটা যোগ করে এই ভিত্তিটি আরও বিস্তৃত করি।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম স্ক্রিন তৈরি করবেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এতে থাকবে:
- একটি শীর্ষ অ্যাপ বার
- পণ্যে ভরা একটি গ্রিড তালিকা
এই কোডল্যাবে MDC-Android উপাদানগুলি
- অ্যাপবারলেআউট
- ম্যাটেরিয়ালকার্ডভিউ
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
MDC-101 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপ 3 এ যান: একটি শীর্ষ অ্যাপ বার যোগ করুন ।
একেবারে শুরু থেকে?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-102-starter/kotlin ডিরেক্টরিতে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 102-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন
- সেটআপ উইজার্ডটি শেষ হয়ে গেলে এবং "ওয়েলকাম টু অ্যান্ড্রয়েড স্টুডিও" উইন্ডোটি প্রদর্শিত হলে, "একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন" এ ক্লিক করুন। আপনি যে ডিরেক্টরিতে নমুনা কোডটি ইনস্টল করেছিলেন সেখানে নেভিগেট করুন এবং শিপিং প্রকল্পটি খুলতে "কোটলিন -> shrine" নির্বাচন করুন (অথবা আপনার কম্পিউটারে shrine অনুসন্ধান করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই মুহুর্তে, Android Studio-তে কিছু বিল্ড ত্রুটি দেখা দিতে পারে কারণ আপনার Android SDK বা বিল্ড টুলগুলি, যেমন নীচে দেখানো হয়েছে, অনুপস্থিত। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android Studio-তে নির্দেশাবলী অনুসরণ করুন।
প্রকল্পের নির্ভরতা যোগ করুন
প্রকল্পটির জন্য MDC অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরির উপর নির্ভরতা প্রয়োজন। আপনার ডাউনলোড করা নমুনা কোডটিতে ইতিমধ্যেই এই নির্ভরতা তালিকাভুক্ত থাকা উচিত, তবে নিশ্চিত করার জন্য নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করা ভাল অভ্যাস।
-
appমডিউলেরbuild.gradleফাইলে যান এবং নিশ্চিত করুন যে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'
}
স্টার্টার অ্যাপটি চালান
|
সফল! আপনার MDC-101 কোডল্যাব থেকে শ্রাইন লগইন পৃষ্ঠাটি দেখা উচিত।
এখন যেহেতু লগইন স্ক্রিনটি ভালো দেখাচ্ছে, আসুন অ্যাপটিতে কিছু পণ্য যোগ করি।
৩. একটি শীর্ষ অ্যাপ বার যোগ করুন
লগইন পৃষ্ঠাটি বন্ধ হয়ে গেলে হোম স্ক্রিনটি প্রকাশিত হয়, যেখানে একটি স্ক্রিন লেখা থাকে "তুমি এটা করেছো!"। দারুন! কিন্তু এখন আমাদের ব্যবহারকারীর কোনও পদক্ষেপ নেওয়ার নেই, অথবা অ্যাপে তারা কোথায় আছে তার কোনও ধারণা নেই। এটিকে সাহায্য করার জন্য, নেভিগেশন যোগ করার সময় এসেছে।
ম্যাটেরিয়াল ডিজাইন এমন নেভিগেশন প্যাটার্ন অফার করে যা উচ্চ মাত্রার ব্যবহারযোগ্যতা নিশ্চিত করে। সবচেয়ে দৃশ্যমান উপাদানগুলির মধ্যে একটি হল একটি শীর্ষ অ্যাপ বার।
নেভিগেশন প্রদান করতে এবং ব্যবহারকারীদের অন্যান্য ক্রিয়াকলাপে দ্রুত অ্যাক্সেস দিতে, আসুন একটি শীর্ষ অ্যাপ বার যুক্ত করি।
একটি অ্যাপবার উইজেট যোগ করুন
shr_product_grid_fragment.xml এ, "You did it!" TextView সম্বলিত <LinearLayout> ব্লকটি মুছে ফেলুন এবং এটিকে নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:
shr_product_grid_fragment.xml সম্পর্কে
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
আপনার shr_product_grid_fragment.xml এখন এইরকম দেখাবে:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>
অনেক অ্যাপ বারে শিরোনামের পাশে একটি বোতাম থাকে। আমাদের অ্যাপ বারে একটি মেনু আইকন যোগ করা যাক।
একটি নেভিগেশন আইকন যোগ করুন
shr_product_grid_fragment.xml এ থাকাকালীন, আপনার লেআউটে যোগ করা Toolbar XML কম্পোনেন্টে নিম্নলিখিতটি যোগ করুন:
shr_product_grid_fragment.xml সম্পর্কে
app:navigationIcon="@drawable/shr_menu"
তোমার shr_product_grid_fragment.xml দেখতে এরকম হওয়া উচিত:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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>
</FrameLayout>
অ্যাকশন বোতাম যোগ করুন এবং উপরের অ্যাপ বারটি স্টাইল করুন
আপনি অ্যাপ বারের শেষ দিকেও বোতাম যোগ করতে পারেন। অ্যান্ড্রয়েডে এগুলোকে অ্যাকশন বোতাম বলা হয়। আমরা উপরের অ্যাপ বারটি স্টাইল করব এবং প্রোগ্রাম্যাটিকভাবে এর মেনুতে অ্যাকশন বোতাম যোগ করব।
ProductGridFragment.kt এর onCreateView ফাংশনে, setSupportActionBar ব্যবহার করে activity Toolbar ActionBar হিসেবে ব্যবহার করার জন্য সেট করুন। inflater দিয়ে ভিউ তৈরি হওয়ার পরে আপনি এটি করতে পারেন।
প্রোডাক্টগ্রিডফ্রেগমেন্ট.কেটি
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
return view;
}
এরপর, টুলবার সেট আপ করার জন্য আমরা যে পদ্ধতিটি পরিবর্তন করেছি তার ঠিক নীচে, shr_toolbar_menu.xml এর বিষয়বস্তু টুলবারে স্ফীত করতে onCreateOptionsMenu ওভাররাইড করি:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.কেটি
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
অবশেষে, ProductGridFragment.kt এ onCreate() ওভাররাইড করুন, এবং super() কল করার পরে, setHasOptionMenu true দিয়ে কল করুন:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.কেটি
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
উপরের কোড স্নিপেটগুলি আমাদের XML লেআউট থেকে অ্যাপ বারটিকে এই অ্যাক্টিভিটির জন্য অ্যাকশন বার হিসাবে সেট করে। কলব্যাক onCreateOptionsMenu অ্যাক্টিভিটিকে আমাদের মেনু হিসাবে কী ব্যবহার করতে হবে তা বলে। এই ক্ষেত্রে, এটি R.menu.shr_toolbar_menu থেকে মেনু আইটেমগুলিকে অ্যাপ বারে রাখবে। মেনু ফাইলটিতে দুটি আইটেম রয়েছে: "অনুসন্ধান" এবং "ফিল্টার"।
shr_toolbar_menu.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/search"
android:icon="@drawable/shr_search"
android:title="@string/shr_search_title"
app:showAsAction="always" />
<item
android:id="@+id/filter"
android:icon="@drawable/shr_filter"
android:title="@string/shr_filter_title"
app:showAsAction="always" />
</menu>
এই পরিবর্তনগুলির পরে, আপনার ProductGridFragment.kt ফাইলটি এইরকম দেখাবে:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.কেটি
package com.google.codelabs.mdc.kotlin.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 androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*
class ProductGridFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the tool bar
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
return view;
}
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
}
তৈরি করুন এবং চালান। আপনার হোম স্ক্রিনটি এইরকম দেখাবে:
এখন টুলবারটিতে একটি নেভিগেশন আইকন, একটি শিরোনাম এবং ডানদিকে দুটি অ্যাকশন আইকন রয়েছে। টুলবারটি একটি সূক্ষ্ম ছায়া ব্যবহার করে উচ্চতা প্রদর্শন করে যা দেখায় যে এটি কন্টেন্টের চেয়ে ভিন্ন স্তরে রয়েছে।
৪. একটি কার্ড যোগ করুন
এখন যেহেতু আমাদের অ্যাপটির কিছু কাঠামো আছে, আসুন আমরা কার্ডগুলিতে রেখে বিষয়বস্তুটি সাজাই।
একটি কার্ড যোগ করুন
উপরের অ্যাপ বারের নিচে একটি কার্ড যোগ করে শুরু করা যাক। একটি কার্ডে একটি ছবির জন্য একটি অঞ্চল, একটি শিরোনাম এবং সেকেন্ডারি টেক্সটের জন্য একটি লেবেল থাকা উচিত। AppBarLayout নিচে shr_product_grid_fragment.xml এ নিম্নলিখিতটি যোগ করুন।
shr_product_grid_fragment.xml সম্পর্কে
<com.google.android.material.card.MaterialCardView
android:layout_width="160dp"
android:layout_height="180dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="70dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#FFFFFF"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
তৈরি করুন এবং চালান:
এই প্রিভিউতে, আপনি দেখতে পাচ্ছেন যে কার্ডটি বাম প্রান্ত থেকে ইনসেট করা হয়েছে এবং এর কোণগুলি গোলাকার এবং একটি ছায়া রয়েছে (যা কার্ডের উচ্চতা প্রকাশ করে)। সম্পূর্ণ উপাদানটিকে "ধারক" বলা হয়। ধারকটি ছাড়াও, এর মধ্যে থাকা সমস্ত উপাদান ঐচ্ছিক।
আপনি একটি কন্টেইনারে নিম্নলিখিত উপাদানগুলি যোগ করতে পারেন: হেডার টেক্সট, একটি থাম্বনেইল বা অবতার, সাবহেড টেক্সট, ডিভাইডার, এমনকি বোতাম এবং আইকনও। উদাহরণস্বরূপ, আমরা যে কার্ডটি তৈরি করেছি, তাতে দুটি TextView (একটি শিরোনামের জন্য এবং একটি গৌণ টেক্সটের জন্য) একটি LinearLayout তে রয়েছে, যা কার্ডের নীচে সারিবদ্ধ।
কার্ডগুলি সাধারণত অন্যান্য কার্ডের সাথে একটি সংগ্রহে দেখানো হয়। এই কোডল্যাবের পরবর্তী বিভাগে, আমরা সেগুলিকে একটি গ্রিডে একটি সংগ্রহ হিসাবে রাখব।
৫. কার্ডের একটি গ্রিড তৈরি করুন
যখন একটি স্ক্রিনে একাধিক কার্ড উপস্থিত থাকে, তখন সেগুলিকে এক বা একাধিক সংগ্রহে একত্রিত করা হয়। একটি গ্রিডে থাকা কার্ডগুলি কোপ্ল্যানার হয়, যার অর্থ তারা একে অপরের মতো একই বিশ্রামের উচ্চতা ভাগ করে নেয় (যদি না তোলা হয় বা টেনে আনা হয়, তবে আমরা এই কোডল্যাবে এটি কভার করব না)।
কার্ডের গ্রিড সেট আপ করুন
আমরা আপনার জন্য যে shr_product_card.xml ফাইলটি দিয়েছি তা একবার দেখুন:
shr_product_card.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<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/white"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/product_image"
android:layout_width="match_parent"
android:layout_height="@dimen/shr_product_card_image_height"
android:background="?attr/colorPrimaryDark"
android:scaleType="centerCrop" />
<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:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:id="@+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
এই কার্ড লেআউটে একটি ছবি সহ একটি কার্ড রয়েছে (এই ক্ষেত্রে, একটি NetworkImageView , যা আমাদের একটি URL থেকে ছবি লোড করতে এবং দেখাতে দেয়), এবং দুটি TextViews ।
এরপর, আমরা আপনার জন্য যে ProductCardRecyclerViewAdapter টি দিয়েছি তা দেখুন। এটি ProductGridFragment এর মতো একই প্যাকেজে রয়েছে।
প্রোডাক্টকার্ডরিসাইক্লারভিউঅ্যাডাপ্টার.কেটি
package com.google.codelabs.mdc.kotlin.shrine
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
return ProductCardViewHolder(layoutView)
}
override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
// TODO: Put ViewHolder binding code here in MDC-102
}
override fun getItemCount(): Int {
return productList.size
}
}
উপরের অ্যাডাপ্টার ক্লাসটি আমাদের গ্রিডের কন্টেন্ট পরিচালনা করে। প্রতিটি ভিউ তার প্রদত্ত কন্টেন্টের সাথে কী করবে তা নির্ধারণ করার জন্য, আমরা শীঘ্রই onBindViewHolder() এর কোড লিখব।
একই প্যাকেজে, আপনি ProductCardViewHolder দেখতে পারেন। এই ক্লাসটি আমাদের কার্ড লেআউটকে প্রভাবিত করে এমন ভিউ সংরক্ষণ করে, যাতে আমরা পরে সেগুলি পরিবর্তন করতে পারি।
package com.google.codelabs.mdc.kotlin.shrine
import android.view.View
import androidx.recyclerview.widget.RecyclerView
class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
: RecyclerView.ViewHolder(itemView)
আমাদের গ্রিড সেট আপ করার জন্য, প্রথমে আমরা shr_product_grid_fragment.xml থেকে MaterialCardView প্লেসহোল্ডারটি সরিয়ে ফেলতে চাইব। এরপর, আমাদের কার্ডের গ্রিডের প্রতিনিধিত্বকারী উপাদানটি যোগ করতে হবে। এই ক্ষেত্রে, আমরা একটি RecyclerView ব্যবহার করব। আপনার AppBarLayout XML উপাদানের নীচে আপনার shr_product_grid_fragment.xml এ RecyclerView উপাদানটি যোগ করুন:
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: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>
তোমার shr_product_grid_fragment.xml দেখতে এরকম হওয়া উচিত:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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: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>
</FrameLayout>
অবশেষে, onCreateView() তে, setUpToolbar(view) কল করার পরে এবং return স্টেটমেন্টের আগে ProductGridFragment.kt তে RecyclerView ইনিশিয়ালাইজেশন কোড যোগ করুন:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.কেটি
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
val adapter = ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))
return view;
}
উপরের কোড স্নিপেটে একটি RecyclerView সেট আপ করার জন্য প্রয়োজনীয় প্রাথমিককরণ ধাপগুলি রয়েছে। এর মধ্যে রয়েছে RecyclerView এর লেআউট ম্যানেজার সেট করা, এবং RecyclerView এর অ্যাডাপ্টারটি শুরু করা এবং সেট করা।
আপনার ProductGridFragment.kt ফাইলটি এখন এইরকম দেখাবে:
পণ্যগ্রিডফ্রেগমেন্ট .kt
package com.google.codelabs.mdc.kotlin.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 androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*
class ProductGridFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment with the ProductGrid theme
val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
val adapter = ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))
return view;
}
override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
super.onCreateOptionsMenu(menu, menuInflater)
}
}
তৈরি করুন এবং চালান:
কার্ডগুলো এখন আছে! তারা এখনও কিছু দেখায় না, তাই কিছু পণ্যের তথ্য যোগ করা যাক।
ছবি এবং টেক্সট যোগ করুন
প্রতিটি কার্ডের জন্য, একটি ছবি, পণ্যের নাম এবং মূল্য যোগ করুন। আমাদের ViewHolder অ্যাবস্ট্রাকশন প্রতিটি কার্ডের ভিউ ধরে রাখে। আমাদের ViewHolder এ, নিম্নলিখিতভাবে তিনটি ভিউ যোগ করুন।
প্রোডাক্টকার্ডভিউহোল্ডার.কেটি
package com.google.codelabs.mdc.kotlin.shrine
import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.toolbox.NetworkImageView
class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
var productTitle: TextView = itemView.findViewById(R.id.product_title)
var productPrice: TextView = itemView.findViewById(R.id.product_price)
}
ProductCardRecyclerViewAdapter এ onBindViewHolder() পদ্ধতিটি আপডেট করুন যাতে প্রতিটি পণ্যের ভিউয়ের জন্য শিরোনাম, মূল্য এবং পণ্যের ছবি সেট করা যায়, যেমনটি নীচে দেখানো হয়েছে:
প্রোডাক্টকার্ডরিসাইক্লারভিউঅ্যাডাপ্টার.কেটি
override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
if (position < productList.size) {
val product = productList[position]
holder.productTitle.text = product.title
holder.productPrice.text = product.price
ImageRequester.setImageFromUrl(holder.productImage, product.url)
}
}
উপরের কোডটি আমাদের RecyclerView এর অ্যাডাপ্টারকে ViewHolder ব্যবহার করে প্রতিটি কার্ডের সাথে কী করতে হবে তা বলে দেয়।
এখানে, এটি ViewHolder এর প্রতিটি TextView এর টেক্সট ডেটা সেট করে এবং একটি URL থেকে একটি ছবি পেতে ImageRequester কে কল করে। ImageRequester হল একটি ক্লাস যা আমরা আপনার সুবিধার জন্য প্রদান করেছি এবং এটি Volley লাইব্রেরি ব্যবহার করে (এটি এই কোডল্যাবের আওতার বাইরের একটি বিষয়, তবে আপনি নিজেই কোডটি অন্বেষণ করতে পারেন)।
তৈরি করুন এবং চালান:
আমাদের পণ্যগুলি এখন অ্যাপে দেখা যাচ্ছে!
৬. সংক্ষিপ্তসার
আমাদের অ্যাপটিতে একটি মৌলিক প্রবাহ রয়েছে যা ব্যবহারকারীকে লগইন স্ক্রিন থেকে হোম স্ক্রিনে নিয়ে যায়, যেখানে পণ্যগুলি দেখা যায়। মাত্র কয়েকটি লাইন কোডের মাধ্যমে, আমরা আমাদের অ্যাপের বিষয়বস্তু উপস্থাপনের জন্য একটি শীর্ষ অ্যাপ বার এবং তিনটি বোতাম এবং কার্ডের একটি গ্রিড যুক্ত করেছি। আমাদের হোম স্ক্রিন এখন সহজ এবং কার্যকর, একটি মৌলিক কাঠামো এবং কার্যকরী বিষয়বস্তু সহ।
পরবর্তী পদক্ষেপ
উপরের অ্যাপ বার, কার্ড, টেক্সট ফিল্ড এবং বোতাম সহ, আমরা এখন MDC-Android লাইব্রেরি থেকে চারটি মূল মেটেরিয়াল ডিজাইন উপাদান ব্যবহার করেছি! আপনি MDC-Android ক্যাটালগ পরিদর্শন করে আরও উপাদান অন্বেষণ করতে পারেন।
যদিও এটি সম্পূর্ণরূপে কার্যকর, আমাদের অ্যাপটি এখনও কোনও নির্দিষ্ট ব্র্যান্ড বা স্টাইল প্রকাশ করে না। MDC-103: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদান ডিজাইন থিমিং -এ , আমরা একটি প্রাণবন্ত, আধুনিক ব্র্যান্ড প্রকাশ করার জন্য এই উপাদানগুলির স্টাইল কাস্টমাইজ করব।