Android studio 微信APP之Fragment中使用ReclerView
Android studio 微信APP之Fragment中使用ReclerView
如題,本次實(shí)驗(yàn)的內(nèi)容就是在已經(jīng)創(chuàng)建好的微信程序的首頁處,在fragment控件中增加ReclerView控件,實(shí)現(xiàn)首頁內(nèi)容的多樣化(微信首頁的制作參考:微信程序首頁)
首先還是對(duì)布局進(jìn)行一個(gè)說明:
在fragment對(duì)應(yīng)的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.RecyclerViewandroid:id="@+id/rv_main"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#BBBBBB"/></LinearLayout>這一步僅僅是將控件添加到fragment中,而并沒有對(duì)ReclerView進(jìn)行布局。
因此,我們還要對(duì)ReclerView進(jìn)行布局
ReclerView的布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#ffffff"> <!--左側(cè)的圖片布局盒子--><LinearLayoutandroid:id="@+id/ll_1"android:layout_width="wrap_content"android:layout_height="125dp"android:gravity="center"><ImageViewandroid: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> <!--右側(cè)文字盒子布局--><LinearLayoutandroid:id="@+id/ll_2"android:layout_width="match_parent"android:layout_height="125dp"android:orientation="vertical"><!--名字TextView所在盒子布局--><LinearLayoutandroid:id="@+id/ll_2_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:layout_marginBottom="10dp"><TextViewandroid:id="@+id/item_goods_nametitle"android:layout_width="90dp"android:layout_height="25dp"android:text=""android:textSize="16sp"android:textColor="#000000" /><TextViewandroid:id="@+id/item_goods_name"android:layout_width="190dp"android:layout_height="25dp"android:text=""android:textSize="20sp"android:textColor="#000000" /></LinearLayout><!--價(jià)格TextView所在盒子布局--><LinearLayoutandroid:id="@+id/ll_2_price"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10dp"><TextViewandroid:id="@+id/item_goods_pricetitle"android:layout_width="90dp"android:layout_height="25dp"android:text=""android:textSize="16sp"android:textColor="#000000" /><TextViewandroid:id="@+id/item_goods_price"android:layout_width="190dp"android:layout_height="25dp"android:text=""android:textSize="20sp"android:textColor="#000000" /></LinearLayout></LinearLayout> </LinearLayout>接下來就是對(duì)控件的函數(shù)控制了
首先,我們需要為需要引用的數(shù)據(jù)建立一個(gè)類,來提供數(shù)據(jù)修改的接口
GoodsEntity.java:
class GoodsEntity implements Serializable {public String imgPath;//圖片地址public String goodsName;//貨物名稱public String goodsPrice;//貨物價(jià)格public String goodsNameTitle;//商品名稱標(biāo)簽public String goodsPriceTitle;//商品價(jià)格標(biāo)簽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;}//商品名字標(biāo)簽的獲取方法public String getGoodsNameTitle(){return goodsNameTitle;}public void setGoodsNameTitle(String goodsNameTitle){this.goodsNameTitle = goodsNameTitle;}//商品價(jià)格標(biāo)簽的獲取方法public String getGoodsPriceTitle(){return goodsPriceTitle;}public void setGoodsPriceTitle(String goodsPriceTitle){this.goodsPriceTitle = goodsPriceTitle;}//商品價(jià)格的獲取方法public String getGoodsPrice() {return goodsPrice;}public void setGoodsPrice(String goodsPrice) {this.goodsPrice = goodsPrice;}@Overridepublic String toString() {return "GoodsEntity{" +"imgPath='" + imgPath + '\'' +", goodsName='" + goodsName + '\'' +", goodsNameTitle='" + goodsNameTitle + '\'' +", goodsPrice='" + goodsPrice + '\'' +", goodsPriceTitle='" + goodsPriceTitle + '\'' +'}';}}沒有什么好說的,就是定義變量,get變量,set變量,別命名錯(cuò)了就行了
隨后,便是重點(diǎn),我們要?jiǎng)?chuàng)建ReclerView的adapter了
(也就是這里,我們可以控制ReclerView的展現(xiàn)形式,我這里采用的最簡單的線性排布)
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@Overridepublic LinearAdapter.myViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View itemView = View.inflate(context, R.layout.layout_linear_item,null);return new myViewHolder(itemView);}@Overridepublic 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);}@Overridepublic 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);//設(shè)置點(diǎn)擊事件itemView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (onItemClickListener!=null){onItemClickListener.OnItemClick(v,goodsEntities.get(getLayoutPosition()));}}});}}//設(shè)置點(diǎn)擊事件監(jiān)聽器public interface OnItemClickListener {public void OnItemClick(View view, GoodsEntity data);}public void setOnItemClickListener(OnItemClickListener onItemClickListener) {this.onItemClickListener = onItemClickListener;} }最后就是對(duì)fragment的類的函數(shù)編寫
weixinFragment:
public class weixinFragment extends Fragment {private RecyclerView mRvMain; //定義ReclerView控件private View view;//定義view來設(shè)置fragment中的layoutprivate ArrayList<GoodsEntity> goodsEntities = new ArrayList<GoodsEntity>();private LinearAdapter mLinearAdapter;public weixinFragment() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentview = 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() {@Overridepublic 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("圖片序號(hào)"+i);goodsEntity.setGoodsPriceTitle(" 圖片價(jià)格:");goodsEntity.setGoodsPrice("1"+i*100+"RMB");goodsEntities.add(goodsEntity);}}}至此 大功告成,值得一提的是,在這個(gè)項(xiàng)目中,我設(shè)置的圖片是直接去一張圖片來顯示,也可以在fragment中設(shè)置文件路徑,然后我們對(duì)圖片的命名采用迭代的命名方式(就是img1、img2這樣子一直下去),然后在initData函數(shù)中使用goodsEntity.setImgPath("…/mipmap/"+i);的方式來一次獲取圖片。。。
但是圖片太難找了。。。emmm所以這里就直接用一張圖片放上去意思一下算了
那么最后,附上整個(gè)項(xiàng)目的源碼,需要的碼云自取
碼云倉庫
總結(jié)
以上是生活随笔為你收集整理的Android studio 微信APP之Fragment中使用ReclerView的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Canal 组件简介与 vivo 帐号实
- 下一篇: html音视频app制作,怎么实现HTM