จะใช้ RecyclerView ภายใน NestedScrollView ใน Android ได้อย่างไร

ตัวอย่างนี้สาธิตวิธีการใช้ RecyclerView ภายใน NestedScrollView ใน Android

ขั้นตอนที่ 1 − สร้างโครงการใหม่ใน Android Studio ไปที่ไฟล์ ⇒ โครงการใหม่และกรอกรายละเอียดที่จำเป็นทั้งหมดเพื่อสร้างโครงการใหม่

เพิ่มการพึ่งพาต่อไปนี้ใน build.gradle (โมดูล:แอป)

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.intuit.sdp:sdp-android:1.0.3'

ขั้นตอนที่ 2 − เพิ่มรหัสต่อไปนี้ใน res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">
   <androidx.core.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:scrollbars="none">
      <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:focusableInTouchMode="true"
         android:orientation="vertical">
   <ImageView
      android:id="@+id/sellerProduct"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:adjustViewBounds="true"
      android:src="@drawable/iphone"
      android:scaleType="fitXY"
      android:contentDescription="@string/app_name" />
      <androidx.recyclerview.widget.RecyclerView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:scrollbars="vertical"
         android:id="@+id/productList"/>
      </LinearLayout>
   </androidx.core.widget.NestedScrollView>
</LinearLayout>

ขั้นตอนที่ 3 − สร้างไฟล์ทรัพยากรเลย์เอาต์ (list_item.xml) และเพิ่มรหัสต่อไปนี้ -

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:app="https://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   app:cardElevation="2dp"
   app:cardUseCompatPadding="true">
   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="vertical"
      android:padding="8dp">
      <ImageView
         android:id="@+id/phoneImage"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:contentDescription="TODO"
         android:src="@drawable/iphone2" />
      <TextView
         android:id="@+id/phoneName"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         android:text="IPHONE"
         android:textColor="@color/colorPrimaryDark"
         android:textSize="12sp"
         android:textStyle="bold" />
   </LinearLayout>
</androidx.cardview.widget.CardView>

ขั้นตอนที่ 4 − สร้างไฟล์คลาส java ตามที่ระบุด้านล่างและเพิ่มรหัสที่เกี่ยวข้อง -

PhoneAdapter.java −

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class PhoneAdapter extends RecyclerView.Adapter<PhoneViewHolder>{
   private Context context;
   private List<ProductObject> productList;
   PhoneAdapter(Context context, List<ProductObject> productList) {
      this.context = context;
      this.productList = productList;
   }
   @NonNull
   @Override
   public PhoneViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
      return new PhoneViewHolder(view);
   }
   @Override
   public void onBindViewHolder(PhoneViewHolder holder, int position){
      ProductObject productObject = productList.get(position);
      int imageRes = getResourceId(context, productObject.getImagePath(), context.getPackageName());
      holder.phoneImage.setImageResource(imageRes);
      holder.phoneName.setText(productObject.getName());
   }
   @Override
   public int getItemCount() {
      return productList.size();
   }
   private static int getResourceId(Context context, String pVariableName, String pPackageName) throws RuntimeException {
      try {
         return context.getResources().getIdentifier(pVariableName, "drawable", pPackageName);
      } catch (Exception e) {
         throw new RuntimeException("Error getting Resource ID.", e);
      }
   }
}

PhoneViewHolder.java −

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
class PhoneViewHolder extends RecyclerView.ViewHolder {
   ImageView phoneImage;
   TextView phoneName;
   PhoneViewHolder(View itemView) {
      super(itemView);
      phoneName = itemView.findViewById(R.id.phoneName);
      phoneImage = itemView.findViewById(R.id.phoneImage);
   }
}

ProductObject.java −

class ProductObject {
   private String imagePath;
   private String name;
   ProductObject(String name, String imagePath) {
      this.imagePath = imagePath;
      this.name = name;
   }
   String getImagePath() {
      return imagePath;
   }
   String getName() {
      return name;
   }
}

ขั้นตอนที่ 5 − เพิ่มรหัสต่อไปนี้ใน src/MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      RecyclerView bestRecyclerView = findViewById(R.id.productList);
      GridLayoutManager mGrid = new GridLayoutManager(this, 2);
      bestRecyclerView.setLayoutManager(mGrid);
      bestRecyclerView.setHasFixedSize(true);
      PhoneAdapter mAdapter = new PhoneAdapter(MainActivity.this, getProductTestData());
      bestRecyclerView.setAdapter(mAdapter);
   }
   private List<ProductObject> getProductTestData() {
      List<ProductObject> featuredProducts = new ArrayList<>();
      featuredProducts.add(new ProductObject("Iphone 6", "iphone2"));
      featuredProducts.add(new ProductObject("Iphone 6S", "iphone2"));
      featuredProducts.add(new ProductObject("Iphone 8S", "iphone2"));
      featuredProducts.add(new ProductObject("Iphone X", "iphone2"));
      featuredProducts.add(new ProductObject("Iphone XR", "iphone2"));
      featuredProducts.add(new ProductObject("Iphone XS", "iphone2"));
      return featuredProducts;
   }
}

ขั้นตอนที่ 6 − เพิ่มรหัสต่อไปนี้ใน androidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

มาลองเรียกใช้แอปพลิเคชันของคุณกัน ฉันคิดว่าคุณได้เชื่อมต่ออุปกรณ์มือถือ Android จริงกับคอมพิวเตอร์ของคุณ ในการรันแอพจาก android studio ให้เปิดไฟล์กิจกรรมของโปรเจ็กต์แล้วคลิกไอคอน Run จากแถบเครื่องมือ เลือกอุปกรณ์มือถือของคุณเป็นตัวเลือก แล้วตรวจสอบอุปกรณ์มือถือของคุณซึ่งจะแสดงหน้าจอเริ่มต้นของคุณ -