如题，本次实验的内容就是在已经创建好的微信程序的首页处，在fragment控件中增加ReclerView控件，实现首页内容的多样化（微信首页的制作参考：微信程序首页）
首先还是对布局进行一个说明：
这一步仅仅是将控件添加到fragment中，而并没有对ReclerView进行布局。
因此，我们还要对ReclerView进行布局
接下来就是对控件的函数控制了
首先，我们需要为需要引用的数据建立一个类，来提供数据修改的接口
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的展现形式，我这里采用的最简单的线性排布）
class LinearAdapter extends RecyclerView.Adapter {
private OnItemClickListener onItemClickListener;
private Context context;
private ArrayList goodsEntities;
public LinearAdapter(Context context,ArrayList 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 goodsEntities = new ArrayList();
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所以这里就直接用一张图片放上去意思一下算了
那么最后，附上整个项目的源码，需要的码云自取
码云仓库
作者：DEATH NOTE
