商城之热门商品列表实现(下拉刷新,上拉加载更多)

1.效果



2.使用下拉刷新和上拉加载更多:    https://github.com/android-cjj/Android-MaterialRefreshLayout


3.因为国内镜像仓库没有,所以不能使用镜像

allprojects {
    repositories {
        jcenter()
//        maven{ url 'http://maven.oschina.net/content/groups/public/'}
    }
}




4.布局fragment_hot.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">




    <com.cjj.MaterialRefreshLayout
        android:id="@+id/refresh_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        app:overlay="true"
        app:wave_show="true"
        app:wave_color="#90ffffff"
        app:progress_colors="@array/material_colors"
        app:wave_height_type="higher"
        >


        <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.cjj.MaterialRefreshLayout>



</LinearLayout>


5.item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/selector_list_item"
    android:padding="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@null"
        android:id="@+id/drawee_view"
        android:layout_alignParentLeft="true"
        app:viewAspectRatio="1"

        >

    </com.facebook.drawee.view.SimpleDraweeView>


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/drawee_view">

        <TextView
            android:id="@+id/text_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="25sp"
            android:maxLines="3"

            />

        <TextView
            android:id="@+id/text_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@color/firebrick"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/bigRedButton"
            android:layout_marginTop="20dp"
            android:text="立即购买"
            android:layout_gravity="right|bottom"
            />


    </LinearLayout>







</RelativeLayout>
*图片是可缓存的


6.HotWaresAdapter.java

package cniao5.com.cniao5shop.adapter;

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.TextView;

import com.facebook.drawee.view.SimpleDraweeView;

import java.util.List;

import cniao5.com.cniao5shop.R;
import cniao5.com.cniao5shop.bean.Wares;

/**
 * Created by <a href="http://www.cniao5.com">菜鸟窝</a>
 * 一个专业的Android开发在线教育平台
 */
public class HotWaresAdapter  extends RecyclerView.Adapter<HotWaresAdapter.ViewHolder>  {



    private List<Wares> mDatas;

    private LayoutInflater mInflater;

    public HotWaresAdapter(List<Wares> wares){

        mDatas = wares;


    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
		//创建一个ViewHolder,把View传入
        mInflater = LayoutInflater.from(parent.getContext());
        View view = mInflater.inflate(R.layout.template_hot_wares,null);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //绑定数据
        Wares wares = getData(position);

        holder.draweeView.setImageURI(Uri.parse(wares.getImgUrl()));
        holder.textTitle.setText(wares.getName());
        holder.textPrice.setText("¥"+wares.getPrice());


    }


    public Wares getData(int position){

        return mDatas.get(position);
    }


    public List<Wares> getDatas(){

        return  mDatas;
    }
    public void clearData(){

        mDatas.clear();
        notifyItemRangeRemoved(0,mDatas.size());
    }

	//下拉刷新更新数据
    public void addData(List<Wares> datas){

        addData(0,datas);
    }

	//把数据更新,加载更多
    public void addData(int position,List<Wares> datas){

        if(datas !=null && datas.size()>0) {

            mDatas.addAll(datas);
            notifyItemRangeChanged(position, mDatas.size());
        }

    }


    @Override
    public int getItemCount() {

        if(mDatas!=null && mDatas.size()>0)
            return mDatas.size();

        return 0;
    }


    //获取控件
    class ViewHolder extends RecyclerView.ViewHolder{


        SimpleDraweeView draweeView;
        TextView textTitle;
        TextView textPrice;


        public ViewHolder(View itemView) {
            super(itemView);


            draweeView = (SimpleDraweeView) itemView.findViewById(R.id.drawee_view);
            textTitle= (TextView) itemView.findViewById(R.id.text_title);
            textPrice= (TextView) itemView.findViewById(R.id.text_price);
        }
    }
}



7.HotFragment

package cniao5.com.cniao5shop.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.cjj.MaterialRefreshLayout;
import com.cjj.MaterialRefreshListener;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.squareup.okhttp.Response;

import java.util.List;

import cniao5.com.cniao5shop.Contants;
import cniao5.com.cniao5shop.R;
import cniao5.com.cniao5shop.adapter.DividerItemDecoration;
import cniao5.com.cniao5shop.adapter.HotWaresAdapter;
import cniao5.com.cniao5shop.bean.Page;
import cniao5.com.cniao5shop.bean.Wares;
import cniao5.com.cniao5shop.http.OkHttpHelper;
import cniao5.com.cniao5shop.http.SpotsCallBack;


public class HotFragment extends Fragment {



    private OkHttpHelper httpHelper = OkHttpHelper.getInstance();
    private int currPage=1;
    private int totalPage=1;
    private int pageSize=10;

    private List<Wares> datas;

    private HotWaresAdapter mAdatper;

    @ViewInject(R.id.recyclerview)
    private RecyclerView mRecyclerView;

    @ViewInject(R.id.refresh_view)
    private MaterialRefreshLayout mRefreshLaout;


    //定义三种状态
    private  static final int STATE_NORMAL=0;
    private  static final int STATE_REFREH=1;
    private  static final int STATE_MORE=2;

    private int state=STATE_NORMAL;



    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view= inflater.inflate(R.layout.fragment_hot,container,false);

        ViewUtils.inject(this,view);


        initRefreshLayout();
        getData();

        return view ;

    }


    //初始化下拉组件相关
    private  void initRefreshLayout(){

        mRefreshLaout.setLoadMore(true);
		//监听
        mRefreshLaout.setMaterialRefreshListener(new MaterialRefreshListener() {
            @Override
            public void onRefresh(MaterialRefreshLayout materialRefreshLayout) {

                refreshData();

            }

            @Override
            public void onRefreshLoadMore(MaterialRefreshLayout materialRefreshLayout) {

                if(currPage <=totalPage)
                    loadMoreData();
                else{
					//已经没数据可以加载了
//                    Toast.makeText()
                    mRefreshLaout.finishRefreshLoadMore();
                }
            }
        });
    }



    //刷新数据,只刷新第一页
    private  void refreshData(){

        currPage =1;

        state=STATE_REFREH;
        getData();

    }
    //加载更多数据
    private void loadMoreData(){

        currPage = ++currPage;
        state = STATE_MORE;

        getData();

    }

    //联网获取数据
    private void getData(){



        String url = Contants.API.WARES_HOT+"?curPage="+currPage+"&pageSize="+pageSize;
        httpHelper.get(url, new SpotsCallBack<Page<Wares>>(getContext()) {


            @Override
            public void onSuccess(Response response, Page<Wares> waresPage) {


                datas = waresPage.getList();
                currPage = waresPage.getCurrentPage();
                totalPage =waresPage.getTotalPage();//总的页数

                showData();
            }

            @Override
            public void onError(Response response, int code, Exception e) {

            }
        });


    }




    private  void showData(){



        switch (state){

            case  STATE_NORMAL:
                mAdatper = new HotWaresAdapter(datas);

                mRecyclerView.setAdapter(mAdatper);
                //设置RecyclerView相关属性
                mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
                mRecyclerView.setItemAnimator(new DefaultItemAnimator()); //动画
                mRecyclerView.addItemDecoration(new DividerItemDecoration(getContext(),DividerItemDecoration.VERTICAL_LIST));

                break;

            case STATE_REFREH:
                mAdatper.clearData();
                mAdatper.addData(datas);
                //定位到第一个
                mRecyclerView.scrollToPosition(0);
				//停止刷新
                mRefreshLaout.finishRefresh();
                break;

            case STATE_MORE:
			    //从最后一个数据后加
                mAdatper.addData(mAdatper.getDatas().size(),datas);
				//定位到最后
                mRecyclerView.scrollToPosition(mAdatper.getDatas().size());
                mRefreshLaout.finishRefreshLoadMore();
                break;





        }



    }




}


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 实现下拉刷新上拉加载更多的话,你可以使用Compose中的`SwipeRefreshLayout`和`LazyColumnFor`。 `SwipeRefreshLayout`可以用来实现下拉刷新,它可以包含其他的Compose控件,并且在用户下拉时会触发刷新事件。 而`LazyColumnFor`是一个可懒加载的Column,它会根据屏幕的空间加载更多的item,这样可以实现上拉加载更多的效果。 以下是一个简单的示例代码: ``` @Composable fun RefreshableList(data: List<String>) { SwipeRefreshLayout(refreshing = state.refreshing) { LazyColumnFor(data) { item -> Text(item) } } } ``` 在这段代码中,`SwipeRefreshLayout`包含了一个`LazyColumnFor`,而`LazyColumnFor`则根据传入的`data`生成了若干个`Text`控件,当用户下拉时会触发刷新事件,并且根据屏幕的空间自动加载更多。 ### 回答2: compose 是一种用于构建用户界面的声明式工具集,可以通过函数式编程方式来创建可组合的UI组件。要实现下拉刷新上拉加载更多功能,可以借助 compose 提供的布局组件和手势监听等功能。 首先,可以使用 compose 的 LazyColumn 组件来展示列表数据,并且添加一个监听手势的方法,以实现下拉刷新上拉加载更多功能下拉刷新实现可以通过监听手势的位置变化,当手指位置向下滑动一定距离之后,可以通过修改列表数据源来触发刷新操作上拉加载更多实现可以通过监听手势的位置变化,当手指位置向上滑动一定距离之后,可以通过加载更多数据并添加到列表数据源的方式来触发加载更多操作。 在代码中,可以使用 onGragGesture 方法监听手势的位置变化,通过判断手势状态来执行相应的刷新和加载逻辑。 具体的实现流程如下: 1. 创建一个列表数据源列表,用于展示列表数据。 2. 使用 LazyColumn 组件来展示列表数据,并添加 onGragGesture 方法监听手势。 3. 在 onGragGesture 方法中,根据手指位置的变化和手势状态的变化来执行对应的刷新和加载逻辑。 4. 当手势状态变为 Dragging,并且手指位置向下滑动一定距离时,触发下拉刷新操作。可以通过修改列表数据源并更新列表进行刷新操作。 5. 当手势状态变为 Dragging,并且手指位置向上滑动一定距离时,触发上拉加载更多操作。可以通过加载更多数据并添加到列表数据源的方式来实现加载更多功能。 通过上述步骤,可以使用 compose 来实现下拉刷新上拉加载更多功能使用 compose 提供的布局组件和手势监听等功能,可以轻松实现用户界面的交互。 ### 回答3: 使用compose实现下拉刷新上拉加载更多的过程如下: 1. 首先,在页面组件中定义一个状态变量,用于表示当前的刷新和加载更多的状态。 2. 使用useCallback或者useState来定义一个函数,用于处理下拉刷新的逻辑。 3. 在页面组件中,使用useEffect来监听下拉刷新的事件,一旦触发下拉刷新事件,就调用上一步定义的处理函数。 4. 在页面组件中,使用useEffect监听滚动事件。一旦滚动到页面底部,就触发加载更多的逻辑。 5. 使用条件渲染来根据不同的状态显示不同的内容,例如加载中、加载失败等。 6. 使用ScrollView组件或者FlatList组件来渲染长列表,并包裹上拉加载更多的内容。 7. 在加载更多的逻辑处理函数中,更新列表数据,将新的数据追加到原有的数据列表中,以实现加载更多的效果。 8. 在下拉刷新的逻辑处理函数中,重置列表数据,重新加载最新的数据,以实现下拉刷新的效果。 以上就是使用compose实现下拉刷新上拉加载更多的基本步骤。具体的实现代码可以根据具体的场景和需求来灵活调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值