(电商类)上拉加载下拉刷新产品列表页

在现在很多的电商类购物APP上都会有产品列表模块,

用到的技术点:

ListVIew 和 RecyclerView二选一. (目前android5.0推出的RecyclerView 目前使用更广泛)

SmartRefreshLayout智能刷新

fresco图片加载 不去占用App的堆内存,是用的手机上的虚拟内存。不会造成图片的OOM.fresco还是渐进式加载图片。提高用户体验效果。缺点就是打包的时候占的比较多。

上代码↓

package pers.zhangguoqiang.demo.productlist;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.RecyclerView;

import com.google.gson.Gson;
import com.scwang.smartrefresh.layout.SmartRefreshLayout;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.listener.OnLoadMoreListener;
import com.scwang.smartrefresh.layout.listener.OnRefreshListener;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;

import cn.pedant.SweetAlert.SweetAlertDialog;
import pers.zhangguoqiang.demo.order_recyclerview.MyLinerLayoutManager;
import zhang.guo.qiang.R;

/**
 * Created by zhangguoqiang on 2018/7/24.
 * 用到技术 xutils  Fresco RecyclerView
 * Fresco初始化和xutils类似 先添加依赖关系  再初始化到application中
 */
//先上下文 然后初始化recyclerview 初始化 集合,初始化刷新控件SmartRefreshLayout  加载数据
@ContentView(R.layout.productlist_activity)
public class ProductListActivity extends AppCompatActivity {
    private RefreshLayout smartRefresh;
    @ViewInject(R.id.recyclerview)
    private RecyclerView recyclerview;
    private Context con;
    private List<OroductListBean> mList;
    private AdapterProductList adapter;
    private OroductListBean olb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        con = this;
        x.view().inject(this);
        init();

    }

    private void init() {
        smartRefresh = (RefreshLayout) findViewById(R.id.smartrefresh);
        initData();//数据有关
        initView();//布局有关

    }

    private void initView() {
        mList = new ArrayList<OroductListBean>();
        adapter = new AdapterProductList(con);
        recyclerview.setLayoutManager(new MyLinerLayoutManager(con));//默认水平的布局
        recyclerview.setAdapter(adapter);
        recyclerview.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
        mList.addAll(initData());
        adapter.addData(mList);
        setListener();//设置监听
    }

    /**
     * @return assest 文件转成 对象
     */
    private ArrayList<OroductListBean> initData() {
        InputStream is = null;
        try {
            is = getResources().getAssets().open("test.json");
        } catch (IOException e) {
            e.printStackTrace();
        }
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        byte[] bytes = new byte[1024];
        int length;
        try {
            while ((length = is.read(bytes)) != -1) {
                baos.write(bytes, 0, length);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        try {
            Gson gson = new Gson();
            Root root = gson.fromJson(new String(baos.toByteArray(), "UTF-8"), Root.class);
            mList = root.getDynamic();
            return (ArrayList<OroductListBean>) mList;
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return null;
    }


    private void setListener() {
        adapter.setOnClick(new AdapterProductList.OnClick() {
            @Override
            public void itmeClicl(int pos) {
                new SweetAlertDialog(con)
                        .setTitleText("跳往订单详情页面!")
                        .show();
            }
        });

        smartRefresh.setOnRefreshListener(new OnRefreshListener() {
            @Override
            public void onRefresh(RefreshLayout refreshLayout) {
                //添加条件 设置下拉刷新 具体的自己定
                initData();
                smartRefresh.finishRefresh(2000);
            }
        });
        smartRefresh.setOnLoadMoreListener(new OnLoadMoreListener() {
            @Override
            public void onLoadMore(RefreshLayout refreshLayout) {
                //添加条件 设置上拉加载 具体的自己定
                initData();
                smartRefresh.finishLoadMore();
            }
        });
    }

}

布局文件↓

productlist_activity.xml

<?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="match_parent"
    android:background="@color/bg_color"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/white"
        android:gravity="center_vertical"
        android:padding="@dimen/dp_10">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/left_one" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我的产品列表"
            android:textSize="21sp" />
    </RelativeLayout>
    <!--上拉下拉-->
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/smartrefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--列表-->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v7.widget.RecyclerView>

    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

</LinearLayout>

 

Adapter↓

import android.content.Context;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;
import java.util.List;

import zhang.guo.qiang.R;

/**
 * Created by zgq on 2018/7/24.
 * <p>
 * 产品类表的adapter
 */

public class AdapterProductList extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    //    上下文 data集合 打气筒
    private Context con;
    private LayoutInflater inflater;
    private List<OroductListBean> datas;
    public OnClick onClick;

    public void setOnClick(OnClick onClick) {
        this.onClick = onClick;
    }

    public AdapterProductList(Context con) {
        this.con = con;
        datas = new ArrayList();
        inflater = LayoutInflater.from(con);
    }

    //recyclerView 的类调用 传进来数据
    public void addData(List<OroductListBean> datas) {
        this.datas = datas;
        AdapterProductList.this.notifyDataSetChanged();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        return new ProductViewHolder(inflater.inflate(R.layout.productdetail_activity, null));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int pos) {
        if (holder instanceof ProductViewHolder) {
            ((ProductViewHolder) holder).mProductName.setText(datas.get(pos).getUsername());//名称
            ((ProductViewHolder) holder).mProductPrice.setText(datas.get(pos).getPrice());//价格
            ((ProductViewHolder) holder).mProductSize.setText(datas.get(pos).getFldsize() + "号");//规格
            ((ProductViewHolder) holder).mProductcolor.setText(datas.get(pos).getFldcolor());//颜色
            ((ProductViewHolder) holder).mProductImg.setImageURI(Uri.parse(datas.get(pos).getImages()));//图片
            ((ProductViewHolder) holder).mProductNumber.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    onClick.itmeClicl(pos);
                }
            });

        }
    }

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


    public interface OnClick {
        void itmeClicl(int pos);
    }

    private class ProductViewHolder extends RecyclerView.ViewHolder {
        @ViewInject(R.id.layout_order_item)
        private LinearLayout mOrderItemLayout;
        @ViewInject(R.id.iv_order_product_img)
        private ImageView mProductImg;
        @ViewInject(R.id.tv_order_product_name)
        private TextView mProductName;
        @ViewInject(R.id.tv_order_product_price)
        private TextView mProductPrice;
        @ViewInject(R.id.tv_order_product_size)
        private TextView mProductSize;
        @ViewInject(R.id.tv_order_product_color)
        private TextView mProductcolor;
        @ViewInject(R.id.tv_order_product_number)
        private TextView mProductNumber;

        public ProductViewHolder(View itemView) {
            super(itemView);
            x.view().inject(this, itemView);

        }
    }
}

布局文件↓

productdetail_activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout_order_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="1dp"
    android:background="@drawable/recycler_item_selector"
    android:orientation="horizontal">


    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/iv_order_product_img"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_margin="@dimen/dp_10"
        android:scaleType="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/tv_order_product_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginTop="10dp"
                android:layout_toLeftOf="@+id/tv_order_product_price"
                android:ellipsize="end"
                android:maxLength="15"
                android:singleLine="true"
                android:text="名称"
                android:textColor="@color/black"
                android:textSize="14dp" />

            <TextView
                android:id="@+id/tv_order_product_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/tv_order_product_name"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="@dimen/dp_10"
                android:text="价格"
                android:textColor="@color/black"
                android:textSize="14dp"
                android:visibility="gone" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/tv_order_p"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="颜色:"
                android:textColor="@color/common_text_color"
                android:textSize="11sp" />

            <TextView
                android:id="@+id/tv_order_product_color"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/tv_order_p"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/tv_order_p"
                android:text="m号"
                android:textColor="@color/common_text_color"
                android:textSize="11sp" />

            <TextView
                android:id="@+id/tv_order_product"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_order_p"
                android:layout_marginTop="5dp"
                android:text="规格:"
                android:textColor="@color/common_text_color"
                android:textSize="11sp" />

            <TextView
                android:id="@+id/tv_order_product_size"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/tv_order_product"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/tv_order_product"
                android:text="m号"
                android:textColor="@color/common_text_color"
                android:textSize="11sp" />

            <TextView
                android:id="@+id/tv_order_product_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/tv_order_product"
                android:layout_marginBottom="@dimen/dp_5"
                android:background="@drawable/button_bg"
                android:paddingBottom="@dimen/dp_5"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="@dimen/dp_5"
                android:text="购买"
                android:layout_marginRight="@dimen/dp_10"
                android:textColor="@android:color/white"
                android:textSize="16sp" />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

实体类↓

OroductListBean

package pers.zhangguoqiang.demo.productlist;

/**
 * Created by zhangguoqiang on 2018/7/24.
 * <p>
 * 产品列表实体类
 */

public class OroductListBean {
    private String username;

    private String createTime;

    private String fldsize;

    private String fldcolor;

    private String count;

    private String images;

    private String priseNum;

    private String price;

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getCreateTime() {
        return createTime;
    }

    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }

    public String getFldsize() {
        return fldsize;
    }

    public void setFldsize(String fldsize) {
        this.fldsize = fldsize;
    }

    public String getFldcolor() {
        return fldcolor;
    }

    public void setFldcolor(String fldcolor) {
        this.fldcolor = fldcolor;
    }

    public String getCount() {
        return count;
    }

    public void setCount(String count) {
        this.count = count;
    }

    public String getImages() {
        return images;
    }

    public void setImages(String images) {
        this.images = images;
    }

    public String getPriseNum() {
        return priseNum;
    }

    public void setPriseNum(String priseNum) {
        this.priseNum = priseNum;
    }
}

在main文件夹下建一个assets文件夹。创建资源文件  test.json

{
  "dynamic": [
    {
      "username": "生态棉纯棉婴儿尿布",
      "createTime": "08-07 13:12",
      "fldsize": "45",
      "fldcolor": "白色",
      "count": "10片装",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/29/img2018629155713392.jpg",
      "priseNum": "23",
      "price": "30"
    },
    {
      "username": "草本防蚊贴",
      "createTime": "08-07 13:12",
      "fldsize": "45",
      "fldcolor": "白色",
      "count": "5",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img2018630104911897.jpg",
      "priseNum": "43",
      "price": "20"
    },
    {
      "username": "儿童水壶",
      "createTime": "08-07 13:12",
      "fldsize": "23",
      "fldcolor": "迷彩色",
      "count": "10",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img201863015111215.jpg",
      "priseNum": "12",
      "price": "25"
    },
    {
      "username": "婴儿夏季薄款抱被",
      "createTime": "08-07 13:12",
      "fldsize": "450",
      "fldcolor": "米黄色",
      "count": "2",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/29/img201862915632714.jpg",
      "priseNum": "345",
      "price": "150"
    },
    {
      "username": "企鹅硅胶磨牙棒(2个装",
      "createTime": "08-07 13:12",
      "fldsize": "333",
      "fldcolor": "玉米色",
      "count": "6",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/29/img2018629165750874.jpg",
      "priseNum": "323",
      "price": "15"
    },
    {
      "username": "洗发沐浴露",
      "createTime": "08-07 13:12",
      "fldsize": "322",
      "fldcolor": "白色",
      "count": "9",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img2018630171640839.jpg",
      "level": "重要",
      "priseNum": "222",
      "price": "40"
    },
    {
      "username": "钻石积木 拼插玩具",
      "createTime": "08-07 13:12",
      "fldsize": "12",
      "fldcolor": "彩色",
      "count": "8",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img201863017252896.png",
      "priseNum": "4",
      "price": "130"
    },
    {
      "username": "宝宝护理套装",
      "createTime": "08-07 13:12",
      "fldsize": "23",
      "fldcolor": "粉色",
      "count": "45",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img2018630175253388.jpg",
      "priseNum": "12",
      "price": "100"
    },
    {
      "username": "绿豆蛙儿童亲润面霜",
      "createTime": "08-07 13:12",
      "fldsize": "12",
      "fldcolor": "乳白色",
      "count": "79",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img2018630173946206.jpg",
      "priseNum": "1"
    },
    {
      "username": "小颗粒积木",
      "createTime": "08-07 13:12",
      "fldsize": "22",
      "fldcolor": "彩色",
      "count": "35",
      "images": "http://110.249.209.151:5005/YLImages/2018/6/30/img2018630173111113.png",
      "priseNum": "23",
      "price": "110"
    }
  ]
}

主项目Moudle build.gradle下添加依赖

compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.5.1'<!--刷新控件-->compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'<!--列表 -->
compile 'com.facebook.fresco:fresco:0.12.0'<!--/图片加载库 缺点就是会增大apk的大小-->

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值