Android studio 微信APP之Fragment中使用ReclerView

Android studio 微信APP之Fragment中使用ReclerView

如題，本次實驗的內容就是在已經創建好的微信程序的首頁處，在fragment控件中增加ReclerView控件，實現首頁內容的多樣化（微信首頁的製作參考：微信程序首頁）
首先還是對佈局進行一個說明：

在fragment對應的layout中添加ReclerView控件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#BBBBBB"/>

</LinearLayout>

這一步僅僅是將控件添加到fragment中，而並沒有對ReclerView進行佈局。
因此，我們還要對ReclerView進行佈局

ReclerView的佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff">
<!--左側的圖片佈局盒子-->
    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="wrap_content"
        android:layout_height="125dp"
        android:gravity="center">
        <ImageView
            android:id="@+id/item_goods_img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/picture1"
            android:background="#4D2BD5"/>
    </LinearLayout>
<!--右側文字盒子佈局-->
    <LinearLayout
        android:id="@+id/ll_2"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        android:orientation="vertical">
        <!--名字TextView所在盒子佈局-->
        <LinearLayout
            android:id="@+id/ll_2_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="10dp">
            <TextView
                android:id="@+id/item_goods_nametitle"
                android:layout_width="90dp"
                android:layout_height="25dp"
                android:text=""
                android:textSize="16sp"
                android:textColor="#000000" />
            <TextView
                android:id="@+id/item_goods_name"
                android:layout_width="190dp"
                android:layout_height="25dp"
                android:text=""
                android:textSize="20sp"
                android:textColor="#000000" />
        </LinearLayout>

		<!--價格TextView所在盒子佈局-->
        <LinearLayout
            android:id="@+id/ll_2_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">
            <TextView
                android:id="@+id/item_goods_pricetitle"
                android:layout_width="90dp"
                android:layout_height="25dp"
                android:text=""
                android:textSize="16sp"
                android:textColor="#000000" />
            <TextView
                android:id="@+id/item_goods_price"
                android:layout_width="190dp"
                android:layout_height="25dp"
                android:text=""
                android:textSize="20sp"
                android:textColor="#000000" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

接下來就是對控件的函數控制了

首先，我們需要爲需要引用的數據建立一個類，來提供數據修改的接口

GoodsEntity.java:

class GoodsEntity implements Serializable {
    public String imgPath;//圖片地址
    public String goodsName;//貨物名稱
    public String goodsPrice;//貨物價格
    public String goodsNameTitle;//商品名稱標籤
    public String goodsPriceTitle;//商品價格標籤

    public GoodsEntity() {
    }

    public GoodsEntity(String imgPath, String goodsName, String goodsPrice,String goodsNameTitle,String goodsPriceTitle) {
        this.imgPath = imgPath;
        this.goodsName = goodsName;
        this.goodsPrice = goodsPrice;
        this.goodsNameTitle = goodsNameTitle;
        this.goodsPriceTitle = goodsPriceTitle;

    }

    //圖片的路徑獲取方法
    public String getImgPath() {
        return imgPath;
    }

    public void setImgPath(String imgPath) {
        this.imgPath = imgPath;
    }

    //商品名字的獲取方法
    public String getGoodsName() {
        return goodsName;
    }

    public void setGoodsName(String goodsName) {
        this.goodsName = goodsName;
    }

    //商品名字標籤的獲取方法
    public String getGoodsNameTitle(){
        return goodsNameTitle;
    }

    public void setGoodsNameTitle(String goodsNameTitle){
        this.goodsNameTitle = goodsNameTitle;
    }

    //商品價格標籤的獲取方法
    public  String getGoodsPriceTitle(){
        return goodsPriceTitle;
    }

    public void setGoodsPriceTitle(String goodsPriceTitle){
        this.goodsPriceTitle = goodsPriceTitle;
    }

    //商品價格的獲取方法
    public String getGoodsPrice() {
        return goodsPrice;
    }

    public void setGoodsPrice(String goodsPrice) {
        this.goodsPrice = goodsPrice;
    }

    @Override
    public String toString() {
        return "GoodsEntity{" +
                "imgPath='" + imgPath + '\'' +
                ", goodsName='" + goodsName + '\'' +
                ", goodsNameTitle='" + goodsNameTitle + '\'' +
                ", goodsPrice='" + goodsPrice + '\'' +
                ", goodsPriceTitle='" + goodsPriceTitle + '\'' +
                '}';
    }

}

沒有什麼好說的，就是定義變量，get變量，set變量，別命名錯了就行了

隨後，便是重點，我們要創建ReclerView的adapter了
（也就是這裏，我們可以控制ReclerView的展現形式，我這裏採用的最簡單的線性排布）

LinearAdapter：

class LinearAdapter extends RecyclerView.Adapter<LinearAdapter.myViewHolder> {

    private OnItemClickListener onItemClickListener;
    private Context context;
    private ArrayList<GoodsEntity> goodsEntities;

    public LinearAdapter(Context context,ArrayList<GoodsEntity> goodsEntities){
        this.context = context;
        this.goodsEntities = goodsEntities;
    }

    @NonNull
    @Override
    public LinearAdapter.myViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = View.inflate(context, R.layout.layout_linear_item,null);
        return new myViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull LinearAdapter.myViewHolder holder, int position) {
        GoodsEntity data = goodsEntities.get(position);
        holder.mItemGoodsName.setText(data.goodsName);
        holder.mItemGoodsPrice.setText(data.goodsPrice);
        holder.mItemGoodsNameTitle.setText(data.goodsNameTitle);
        holder.mItemGoodsPriceTitle.setText(data.goodsPriceTitle);
    }

    @Override
    public int getItemCount() {
        return goodsEntities.size();
    }

    class myViewHolder extends RecyclerView.ViewHolder {

		//定義控件
        private ImageView mItemGoodsImg;
        private TextView mItemGoodsName;
        private TextView mItemGoodsPrice;
        private TextView mItemGoodsNameTitle;
        private TextView mItemGoodsPriceTitle;

        public myViewHolder(@NonNull View itemView) {
            super(itemView);
            //找到控件
            mItemGoodsImg = itemView.findViewById(R.id.item_goods_img);
            mItemGoodsName = itemView.findViewById(R.id.item_goods_name);
            mItemGoodsPrice = itemView.findViewById(R.id.item_goods_price);
            mItemGoodsNameTitle = itemView.findViewById(R.id.item_goods_nametitle);
            mItemGoodsPriceTitle = itemView.findViewById(R.id.item_goods_pricetitle);

			//設置點擊事件
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    if (onItemClickListener!=null){

                        onItemClickListener.OnItemClick(v,goodsEntities.get(getLayoutPosition()));
                    }
                }
            });

        }
    }

	//設置點擊事件監聽器
    public interface OnItemClickListener {
        public void OnItemClick(View view, GoodsEntity data);
    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }
}

最後就是對fragment的類的函數編寫

weixinFragment：

public class weixinFragment extends Fragment {

    private RecyclerView mRvMain; //定義ReclerView控件
    private View view;//定義view來設置fragment中的layout
    private ArrayList<GoodsEntity> goodsEntities = new ArrayList<GoodsEntity>();
    private LinearAdapter mLinearAdapter;


    public weixinFragment() {

        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        view = inflater.inflate(R.layout.tab01, container, false);

        initRecyclerView();

        initData();

        return view;

    }

    //
    private void initRecyclerView() {
        mRvMain = (RecyclerView)view.findViewById(R.id.rv_main);
        mLinearAdapter = new LinearAdapter(getActivity(),goodsEntities);
        mRvMain.setAdapter(mLinearAdapter);
        mRvMain.setLayoutManager(new LinearLayoutManager(getActivity(),LinearLayoutManager.VERTICAL,false));

        mRvMain.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL));

        mLinearAdapter.setOnItemClickListener(new LinearAdapter.OnItemClickListener() {
            @Override
            public void OnItemClick(View view, GoodsEntity data) {
                Toast.makeText(getActivity(),"圖片售罄",Toast.LENGTH_SHORT).show();
            }
        });




    }

    //
    private void initData(){
        for (int i=0;i<10;i++){
            GoodsEntity goodsEntity = new GoodsEntity();
            goodsEntity.setGoodsNameTitle("  圖片名稱：");
            goodsEntity.setGoodsName("圖片序號"+i);
            goodsEntity.setGoodsPriceTitle("  圖片價格：");
            goodsEntity.setGoodsPrice("1"+i*100+"RMB");
            goodsEntities.add(goodsEntity);

        }
    }


}

至此 大功告成，值得一提的是，在這個項目中，我設置的圖片是直接去一張圖片來顯示，也可以在fragment中設置文件路徑，然後我們對圖片的命名採用迭代的命名方式（就是img1、img2這樣子一直下去），然後在initData函數中使用goodsEntity.setImgPath("…/mipmap/"+i);的方式來一次獲取圖片。。。
但是圖片太難找了。。。emmm所以這裏就直接用一張圖片放上去意思一下算了
那麼最後，附上整個項目的源碼，需要的碼雲自取
碼雲倉庫