اضافه کردن منزلت تولیدها
بیایید با افزودن یک رده مال در پایین نوار بالای اپلیکیشن طراحی اپلیکیشن در مشهد استارت کنیم.
یک مقام فرآورده می بایست یک محدوده برای تصویر، یک تیتر و یک برچسب برای متن ثانویه داشته باشد.
در shr_product_grid_fragment.xml، مفاد پایین را در پایین AppBarLayout اضافه فرمائید:
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”>
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”bottom”
android:background=”#FFFFFF”
android:orientation=”vertical”
android:padding=”8dp”>
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:padding=”2dp”
android:text=”@string/shr_product_title”
android:textAppearance=”?attr/textAppearanceHeadline6” />
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:padding=”2dp”
android:text=”@string/shr_product_description”
android:textAppearance=”?attr/textAppearanceBody2” />
منزلت تولیدات معمولا در یک دسته با تولیدها دیگر نماد داده میشوند.
در قسمت آینده ، ما آن‌ها را تحت عنوان یک دسته در یک کانال قرار خواهیم اعطا کرد.
ساخت grid برای تولیدها
زمانی که تعدادی جنس در یک ورقه وجود دارااست، آن‌ها با هم در یک یا این که تعدادی گروه مجموعه بندی می گردند.
تولیدها در یک grid (کانال) همسطح میباشند، به‌این مفهوم که آنان طول یکسانی با یکدیگر دارا‌هستند .
به فولدر shr_product_card.xml نگاهی بیندازید :
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\">
android:layout_width=\"match_parent\"
android:layout_height=\"wrap_content\"
android:orientation=\"vertical\">
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\" />
android:layout_width=\"match_parent\"
android:layout_height=\"wrap_content\"
android:orientation=\"vertical\"
android:padding=\"16dp\">
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\" />
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\" />
این طرح محصول ها دربرگیرنده یک مال با یک تصویر (در اینجا 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 خویش اضافه فرمایید:
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\">
android:layout_width=\"match_parent\"
android:layout_height=\"wrap_content\">
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\" />
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\">
android:id=\"@+id/recycler_view\"
android:layout_width=\"match_parent\"
android:layout_height=\"match_parent\" />
در غایت، در () 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.Operating System.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);
}
}