RecyclerView多条目和mzbanner

本文介绍了如何在Android应用中利用RecyclerView创建包含多种不同布局的列表,并结合mzbanner库实现轮播效果。内容涵盖多条目布局的设置、Activity的配置以及如何将数据适配到三个不同的Adapter中。
摘要由CSDN通过智能技术生成

1.多条目布局

<?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="#fff"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:layout_marginLeft="24dp"
        android:gravity="center_vertical"
        android:layout_marginRight="24dp">
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/common_btn_menu"/>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="30dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/shape_yuan"
            android:gravity="center">
            <EditText
                android:id="@+id/xiang"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:background="@drawable/shape_acc"
                android:hint="请输入您要搜索的商品"
                android:textSize="14sp"/>
        </LinearLayout>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="搜索"
            android:textColor="#666666"
            android:layout_marginLeft="10dp"/>
    </LinearLayout>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_marginTop="18dp"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <com.zhouwei.mzbanner.MZBannerView
                android:id="@+id/MZbanner"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_marginTop="20dp"
                app:open_mz_mode="true"
                app:canLoop="true"
                app:indicatorAlign="center"
                app:indicatorPaddingLeft="5dp"
                app:middle_page_cover="true" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="4"
                android:background="#fff"
                android:orientation="vertical">
                <!--热销新品-->
                <RelativeLayout
                    android:id="@+id/rela_rxxp"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_marginTop="30dp"
                    android:background="@drawable/bg_rxxp_syf">

                    <TextView
                        android:id="@+id/text_rxxp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="热销新品"
                        android:textColor="#ff7f57"
                        android:textSize="16dp" />

                    <ImageView
                        android:id="@+id/rxxp_more"
                        android:layout_width="24dp"
                        android:layout_height="12dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="24dp"
                        android:src="@drawable/common_btn_more_yellow_n_hdpi" />

                </RelativeLayout>
                <com.jcodecraeer.xrecyclerview.XRecyclerView
                    android:id="@+id/rxxp"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_alignTop="@+id/rxxp"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_weight="3">
                </com.jcodecraeer.xrecyclerview.XRecyclerView>

                <!--分割线-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="8dp"
                    android:background="#FAFAFA" />

                <!--魔力时尚-->
                <RelativeLayout
                    android:id="@+id/rela_mlss"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_alignTop="@+id/recycler_rxxps"
                    android:background="@drawable/bg_mlss_syf">

                    <TextView
                        android:id="@+id/text_mlss"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="魔力时尚"
                        android:textColor="#4169e1"
                        android:textSize="16dp" />

                    <ImageView
                        android:id="@+id/mlss_more"
                        android:layout_width="24dp"
                        android:layout_height="12dp"
                        android:layout_alignParentTop="true"
                        android:layout_alignParentRight="true"
                        android:layout_marginTop="9dp"
                        android:layout_marginRight="24dp"
                        android:src="@drawable/home_btn_more_purple_n_hdpi" />

                </RelativeLayout>

                <com.jcodecraeer.xrecyclerview.XRecyclerView
                    android:id="@+id/mlss"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_weight="3"></com.jcodecraeer.xrecyclerview.XRecyclerView>
                <!--分割线-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="8dp"
                    android:background="#FAFAFA" />
                <!--品质生活-->
                <RelativeLayout
                    android:id="@+id/rela_pzsh"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_alignTop="@+id/mlss"
                    android:background="@drawable/bg_pzsh_syf">

                    <TextView
                        android:id="@+id/text_pzsh"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="品质生活"
                        android:textColor="#f00"
                        android:textSize="16dp" />

                    <ImageView
                        android:id="@+id/image_pzsh"
                        android:layout_width="24dp"
                        android:layout_height="12dp"
                        android:layout_alignParentTop="true"
                        android:layout_alignParentRight="true"
                        android:layout_marginTop="9dp"
                        android:layout_marginRight="24dp"
                        android:src="@drawable/home_btn_moer_pink_n_hdpi" />

                </RelativeLayout>
                <com.jcodecraeer.xrecyclerview.XRecyclerView
                    android:id="@+id/pzsh"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginBottom="35dp"
                    android:layout_weight="4"
                    android:numColumns="2">
                </com.jcodecraeer.xrecyclerview.XRecyclerView>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

2.activity

package com.bei.weishang.view.fragment;

import android.content.Context;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;

import com.bei.weishang.R;
import com.bei.weishang.model.bean.ImageBean;
import com.bei.weishang.model.bean.ShouBean;
import com.bei.weishang.presenter.ImagePresenter;
import com.bei.weishang.presenter.ShouPresenter;
import com.bei.weishang.view.adapter.MlssAdapter;
import com.bei.weishang.view.adapter.PzshAdapter;
import com.bei.weishang.view.adapter.RxxpAdapter;
import com.bei.weishang.view.interfaces.IImageView;
import com.bei.weishang.view.interfaces.IShouView;
import com.bumptech.glide.Glide;
import com.jcodecraeer.xrecyclerview.XRecyclerView;
import com.zhouwei.mzbanner.MZBannerView;
import com.zhouwei.mzbanner.holder.MZHolderCreator;
import com.zhouwei.mzbanner.holder.MZViewHolder;

import java.util.List;

public class ShouFragment extends BaseFragment implements IImageView<ImageBean>,IShouView<ShouBean> {

    private MZBannerView mzBannerView;
    private ImagePresenter imagePresenter;
    private XRecyclerView pzsh;
    private XRecyclerView mlss;
    private XRecyclerView rxxp;
    private ShouPresenter shouPresenter;
    private RxxpAdapter rxxpAdapter;
    private MlssAdapter mlssAdapter;
    private PzshAdapter pzshAdapter;

    @Override
    protected int bindLayout() {
        return R.layout.frag_shou;
    }

    @Override
    protected void initView() {
        mzBannerView = getActivity().findViewById(R.id.MZbanner);
        pzsh = getActivity().findViewById(R.id.pzsh);
        mlss = getActivity().findViewById(R.id.mlss);
        rxxp = getActivity().findViewById(R.id.rxxp);
    }

    @Override
    protected void initData() {
        imagePresenter = new ImagePresenter();
        imagePresenter.getDataFromNet();
        imagePresenter.setView(this);
        //热门
        GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), 3);
        gridLayoutManager.setOrientation(gridLayoutManager.VERTICAL);
        rxxp.setLayoutManager(gridLayoutManager);
        rxxpAdapter = new RxxpAdapter(getActivity());
        rxxp.setAdapter(rxxpAdapter);
        //魔力时尚
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        linearLayoutManager.setOrientation(linearLayoutManager.VERTICAL);
        mlss.setLayoutManager(linearLayoutManager);
        mlssAdapter = new MlssAdapter(getActivity());
        mlss.setAdapter(mlssAdapter);
        //品质生活
        GridLayoutManager gridLayoutManager1 = new GridLayoutManager(getActivity(), 2);
        gridLayoutManager1.setOrientation(gridLayoutManager.VERTICAL);
        pzsh.setLayoutManager(gridLayoutManager1);
        pzshAdapter= new PzshAdapter(getActivity());
        pzsh.setAdapter(pzshAdapter);
    }

    @Override
    protected void bindEvent() {

    }

    @Override
    public void onSucces(ImageBean imageBean) {
        List<ImageBean.ResultBean> list = imageBean.getResult();
        mzBannerView.setPages(list, new MZHolderCreator() {
            @Override
            public MZViewHolder createViewHolder() {
                return new BannerViewHolder();
            }
        });
        shouPresenter = new ShouPresenter();
        shouPresenter.loadDataShou();
        shouPresenter.setView(this);
    }

    @Override
    public void onErry(String erry) {


    }

    @Override
    public void onCheng(ShouBean shouBean) {
        if (shouBean!=null){
            List<ShouBean.ResultBean.RxxpBean.CommodityListBean> commodityListRxxp = shouBean.getResult().getRxxp().getCommodityList();
            rxxpAdapter.setData(commodityListRxxp);
            rxxp.setLoadingMoreEnabled(true);
            rxxp.setLoadingListener(new XRecyclerView.LoadingListener() {
                @Override
                public void onRefresh() {
                    shouPresenter.loadDataShou();
                }

                @Override
                public void onLoadMore() {
                    shouPresenter.loadDataShou();
                }
            });
            rxxp.refreshComplete();
            rxxp.loadMoreComplete();
            List<ShouBean.ResultBean.MlssBean.CommodityListBeanXX> commodityListMlss = shouBean.getResult().getMlss().getCommodityList();
            mlssAdapter.setData(commodityListMlss);
            mlss.setLoadingMoreEnabled(true);
            mlss.setLoadingListener(new XRecyclerView.LoadingListener() {
                @Override
                public void onRefresh() {
                    shouPresenter.loadDataShou();
                }

                @Override
                public void onLoadMore() {
                    shouPresenter.loadDataShou();
                }
            });
            mlss.refreshComplete();
            mlss.loadMoreComplete();
            List<ShouBean.ResultBean.PzshBean.CommodityListBeanX> commodityListPzsh = shouBean.getResult().getPzsh().getCommodityList();
            pzshAdapter.setData(commodityListPzsh);
            pzsh.setLoadingMoreEnabled(true);
            pzsh.setLoadingListener(new XRecyclerView.LoadingListener() {
                @Override
                public void onRefresh() {
                    shouPresenter.loadDataShou();
                }

                @Override
                public void onLoadMore() {
                    shouPresenter.loadDataShou();
                }
            });
            pzsh.refreshComplete();
            pzsh.loadMoreComplete();

        }
    }

    @Override
    public void onShi(String shi) {

    }

    public static class BannerViewHolder implements MZViewHolder<ImageBean.ResultBean> {
        private ImageView mImageView;
        @Override
        public View createView(Context context) {
            // 返回页面布局
            View view = LayoutInflater.from(context).inflate(R.layout.shoupage_banner_imageview,null);
            mImageView = view.findViewById(R.id.banner_image);
            return view;
        }

        @Override
        public void onBind(Context context, int i, ImageBean.ResultBean resultBean) {
            // 数据绑定
            Glide.with(context).load(resultBean.getImageUrl()).into(mImageView);
        }


    }
}

3.分为三个adapter

package com.bei.weishang.view.adapter;

import android.content.Context;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bei.weishang.R;
import com.bei.weishang.model.bean.ShouBean;
import com.bei.weishang.view.activity.XianActivity;
import com.bumptech.glide.Glide;

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


public class MlssAdapter extends RecyclerView.Adapter<MlssAdapter.MyAdapterViewHolder> {

    private Context context;
    private List<ShouBean.ResultBean.MlssBean.CommodityListBeanXX> mlssList=new ArrayList<>();

    public MlssAdapter(Context context) {
        this.context=context;
    }

    @NonNull
    @Override
    public MlssAdapter.MyAdapterViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view=View.inflate(context,R.layout.shoupage_mlss,null);
        MyAdapterViewHolder myAdapterViewHolder = new MyAdapterViewHolder(view);
        return myAdapterViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MlssAdapter.MyAdapterViewHolder myAdapterViewHolder, final int i) {
        myAdapterViewHolder.name.setText(mlssList.get(i).getCommodityName());
        myAdapterViewHolder.price.setText("¥"+mlssList.get(i).getPrice()+"");
        Glide.with(context).load(mlssList.get(i).getMasterPic()).into(myAdapterViewHolder.image);
        myAdapterViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(context,XianActivity.class);
                intent.putExtra("id",mlssList.get(i).getCommodityId());
                context.startActivity(intent);
            }
        });
    }

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

    public void setData(List<ShouBean.ResultBean.MlssBean.CommodityListBeanXX> commodityListMlss) {
        if (commodityListMlss!=null){
            mlssList.clear();
            mlssList.addAll(commodityListMlss);
            notifyDataSetChanged();
        }
    }

    public class MyAdapterViewHolder extends RecyclerView.ViewHolder {
        ImageView image;
        TextView name,price;
        public MyAdapterViewHolder(@NonNull View itemView) {
            super(itemView);
            image =(ImageView) itemView.findViewById(R.id.m_image);
            name =(TextView) itemView.findViewById(R.id.m_name);
            price =(TextView) itemView.findViewById(R.id.m_price);
        }
    }
}

 

现在的APP Banner大多数千篇一律,前几天看到魅族手机上所有魅族自家APP上的Banner效果不错,于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便,这个库不仅仅只有仿魅族效果的BannerView 来使用,还可以当作普通的BannerView 来使用,还可以当作一个ViewPager 来使用。使用很方便,具体使用方法和API 请看后面的示例。 ---  左图为魅族APP上的Banner效果,右图是高仿效果。MZBannerView 有以下功能:1 . 仿魅族BannerView 效果。2 . 当普通Banner 使用3 . 当普通ViewPager 使用。4 . 当普通ViewPager使用(有魅族Banner效果)5 . 仿某视频网站Banner效果。Demo APKgif图片有点模糊,可以扫描下方二维码下载APK体验相关博客ViewPager系列之 仿魅族应用的广告BannerView更新日志v1.1.1 : 增加按住Banner 停止轮播,松开开始自动轮播的功能v1.1.0 : fix 在从网上获取数据后,banner 显示 造成 ANR 的bug(如果在onCreate()中设置资源显示则没问题)v1.1.2 : fix 更改数据之后,调用setPages重新刷新数据会crush的bugv2.0.0 :1,add: 添加仿魅族Banner效果,中间Page覆盖两边。 -- 2,fix 部分bug: 添加OnPageChangeListener 回调 pisition 不对的bug.DependencyAdd it in your root build.gradle at the end of repositories:allprojects {      repositories {           ...           maven { url 'https://jitpack.io' }      } }Step 2. Add the dependencydependencies {          compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0' }自定义属性属性名属性意义取值open_mz_mode是否开启魅族模式true 为魅族Banner效果,false 则普通Banner效果canLoop是否轮播true 轮播,false 则为普通ViewPagerindicatorPaddingLeft设置指示器距离左侧的距离单位为 dp 的值indicatorPaddingRight设置指示器距离右侧的距离单位为 dp 的值indicatorAlign设置指示器的位置有三个取值:left 左边,center 剧中显示,right 右侧显示middle_page_cover设置中间Page是否覆盖(真正的魅族Banner效果)true 覆盖,false 无覆盖效果使用方法1 . xml 布局文件2 . activity中代码:mMZBanner = (MZBannerViewview.findViewById(R.id.banner);              // 设置数据         mMZBanner.setPages(list, new MZHolderCreator() {             @Override             public BannerViewHolder createViewHolder() {                 return new BannerViewHolder();             }         });  public static class BannerViewHolder implements MZViewHolder {         private ImageView mImageView;         @Override         public View createView(Context cont
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值