RecyclerView实现多布局-head轮播图


title: RecyclerView实现多布局+head轮播图
date: 2018-09-28 21:42:10
tags:

  • RecyclerView
  • 多布局
  • head轮播图
    categories: Android控件

本文看点:

  • RecyclerView 实现多布局
  • RecyclerView head轮播图
  • RecyclerView 自定义item点击事件接口
  • RecyclerView 实现上拉下拉刷新数据

Activity代码

/**
 * Created by Dell on 2017/5/10.
 * @author 小红妹
 * 科技模块类
 */
public class ScienceTechnology extends BaseFragment implements NewsJsonUtils.CallBackListener, SwipeRefreshLayout.OnRefreshListener{

    private View view;
    private RecyclerView mRecyclerView;
    private ScienceTechnologyAdapter adapterB;
    //下拉刷新控件
    private SwipeRefreshLayout sWipe;
    //记录最后一个下标
    private int mFootItem;
    //或取数据的工具类
    private NewsJsonUtils newsUtils;
    //保存了所有数据集合数组
    private List<NewsBeanData>[] msgSt;
    //从msgSt中获取科技信息
    private List<NewsBeanData> mData;
    //保存了所有图片播放数据集合
    private List<String> imgItem;
    //保存了所有标题数据集合
    private List<String> titleItem;
    //记录当前真正要显示item数据
    private List<NewsBeanData> nowItem;
    //记录当前存放的数据条数
    private int nowNum = 9;
    //记录每次刷新的数
    private final int NUM = 5;

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

        view = inflater.inflate(R.layout.hp_fm_news_fragment_b, container, false);
        initView();//调用初始化方法
        loadData();//调用加载数据方法
        drawRecyclerView();//调用RecyclerView点击事件方法
        initFootListener();//调用上拉加载事件监听方法
        return view;
    }

    /**
     * 初始化方法
     */
    private void initView() {
        imgItem = new ArrayList<>();
        titleItem = new ArrayList<>();
        nowItem = new ArrayList<>();
        //下拉刷新
        sWipe = (SwipeRefreshLayout) view.findViewById(R.id.swipe_layout);
        sWipe.setColorSchemeResources(android.R.color.holo_blue_bright);
        sWipe.setOnRefreshListener(this);

        mRecyclerView = (RecyclerView) view.findViewById(R.id.one_b_recycler_view);
        adapterB = new ScienceTechnologyAdapter(getActivity(), imgItem, titleItem, nowItem);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        //如果可以确定每个item的高度是固定的,设置这个选项可以提高性能
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setAdapter(adapterB);
    }

    /**
     * RecyclerView点击事件方法
     */
    private void drawRecyclerView() {
        //RecyclerView点击事件
        adapterB.setOnItemClickListener(new ScienceTechnologyAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                String url = mData.get(position).getUrl();
                Intent intent = new Intent();
                intent.setClass(getActivity(), NewsDetailActivity.class);
                intent.putExtra("url",url);
                Log.e("URL", "onItemClick: "+ url);
                startActivity(intent);
            }
        });
    }

    /**
     * 上拉加载事件监听方法
     */
    private void initFootListener() {
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            //状态发生时触发
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == RecyclerView.SCROLL_STATE_IDLE && mFootItem + 1 == adapterB.getItemCount()) {
                    mHandler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            nowNum += NUM;
                            initData();
                            sWipe.setRefreshing(false);
                        }
                    }, 1500);
                }
            }

            //滚动时监听
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                LinearLayoutManager lm = (LinearLayoutManager) recyclerView.getLayoutManager();
                mFootItem = lm.findLastVisibleItemPosition();
            }
        });
    }

    /**
     * 加载数据方法(获取网络数据)
     */
    @Override
    public void loadData() {
//        super.loadData();
        //注册本类去监听数据加载状态
        newsUtils = new NewsJsonUtils(this);
        //加载数据
        newsUtils.getUtils();
    }

    /**
     * 回调更新界面的方法
     * @param msgSt
     */
    @Override
    public void upData(List<OneBeanData> msgList, List<NewsBeanData>[] msgSt) {
        this.msgSt = msgSt;
        initData();//调用分配数据,填充布局的方法
    }

    //分配数据,填充布局的方法
    public void initData(){
        if (msgSt != null){
            imgItem.clear();//清空缓存
            titleItem.clear();
            nowItem.clear();
            mData = msgSt[4];
            for (int i = 0; i < 3; i++) {
                imgItem.add(mData.get(i).getThumbnail());
                titleItem.add(mData.get(i).getTitle());
            }
            for (int i = 3; i < nowNum; i++) {
                nowItem.add(mData.get(i));
            }
        }
        adapterB.notifyDataSetChanged();
    }

    /**
     * 下拉刷新方法
     */
    @Override
    public void onRefresh() {
        nowNum += NUM;//刷新操作执行后,显示增加的内容
        initData();//调用分配数据,填充布局的方法
        sWipe.setRefreshing(false);
    }

    public Handler mHandler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
        }
    };
}


主要看RecyclerView适配器

/**
 * Created by Dell on 2017/5/14.
 * @author 小红妹
 */
public class ScienceTechnologyAdapter extends RecyclerView.Adapter implements View.OnClickListener{

    private final int TYPE_HEAD = 0;//表示首个位置,直接显示图片播放
    private final int TYPE_NORMAL = 1;//表示正常的item布局
    private final int TYPE_FOOT = 2;//表示刷新布局
    private Context mContext;
    //保存了所有图片播放数据集合
    private List<String> imgItem;
    private List<String> titleItem;
    //记录当前真正要显示item数据
    private List<NewsBeanData> nowItem;

    //新建一个私有变量用于保存用户设置的监听器
    private OnItemClickListener mOnItemClickListener = null;

    //set方法:
    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    @Override
    public void onClick(View v) {
        if (mOnItemClickListener != null) {
            //注意这里使用getTag方法获取position
            mOnItemClickListener.onItemClick(v,(int)v.getTag());
        }
    }

    //define interface 自定义一个接口
    public static interface OnItemClickListener {
        void onItemClick(View view, int position);
    }

    /**
     * 构造方法
     * @param mContext
     * @param imgItem
     * @param titleItem
     * @param nowItem
     */
    public ScienceTechnologyAdapter(Context mContext, List<String> imgItem, List<String> titleItem, List<NewsBeanData> nowItem){
        this.mContext=mContext;
        this.imgItem = imgItem;
        this.titleItem = titleItem;
        this.nowItem = nowItem;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder holder=null;
        if (viewType==TYPE_HEAD){
            //此处创建顶部banner的ViewHolder
            holder = new BannerViewHolder(LayoutInflater.from(mContext).inflate(R.layout.news_banner_imager_b, parent, false));
        }else if (viewType==TYPE_NORMAL){
            View view = LayoutInflater.from(mContext).inflate(R.layout.news_banner_top, parent, false);
            holder = new ItemViewHolder(view);
            //将创建的View注册点击事件
            view.setOnClickListener(this);
        }else if (viewType==TYPE_FOOT){
            holder = new FootViewHolder(LayoutInflater.from(mContext).inflate(R.layout.news_item_footer, parent, false));
        }

        return holder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        if (holder instanceof BannerViewHolder){
            BannerViewHolder bannerViewHolder = (BannerViewHolder) holder;
            bannerViewHolder.banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
            bannerViewHolder.banner.setBannerTitles(titleItem);
            bannerViewHolder.banner.setImages(imgItem);
            bannerViewHolder.banner.setImageLoader(new GlideImageLoader());
            bannerViewHolder.banner.start();
        } else if (holder instanceof ItemViewHolder) {
            //处理每个item里的布局
            ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
            itemViewHolder.simpleDraweeView.setImageURI(nowItem.get(position-1).getThumbnail());
            itemViewHolder.textView.setText(nowItem.get(position-1).getTitle());//从零开始
            //item的高度
            ViewGroup.LayoutParams layoutParams = itemViewHolder.itemView.getLayoutParams();
            layoutParams.height = LinearLayout.LayoutParams.WRAP_CONTENT;
        }
        //将position保存在itemView的Tag中,以便点击时进行获取
        holder.itemView.setTag(position);
    }

    @Override
    public int getItemCount() {
        return nowItem.size()+1+1;
    }

    /**
     * 告诉创建什么类型的ViewHolder
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        if (position==0){
            return TYPE_HEAD;
        }else if (position+1==getItemCount()){
            return TYPE_FOOT;
        }else {
            return TYPE_NORMAL;
        }
    }

    /**
     * 正常的ViewHolder
     */
    class ItemViewHolder extends RecyclerView.ViewHolder{
        SimpleDraweeView simpleDraweeView;
        TextView textView;

        public ItemViewHolder(View itemView) {
            super(itemView);
            simpleDraweeView = (SimpleDraweeView) itemView.findViewById(R.id.simple_view);
            textView=(TextView) itemView.findViewById(R.id.item_banner);
        }
    }
    /**
     * 首位的ViewHolder
     */
    class BannerViewHolder extends RecyclerView.ViewHolder {
        Banner banner;
        public BannerViewHolder(View itemView) {
            super(itemView);
            banner = (Banner) itemView.findViewById(R.id.banner);
        }
    }
    /**
     * 底部的ViewHolder(上拉加载)
     */
    class FootViewHolder extends RecyclerView.ViewHolder{

        public FootViewHolder(View itemView) {
            super(itemView);
        }
    }
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 JavaScript 实现的简单的轮播图案例: ```html <!DOCTYPE html> <html> <head> <title>JavaScript 案例:轮播图</title> <style> #slideshow { position: relative; width: 600px; height: 400px; margin: 0 auto; overflow: hidden; } #slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } #slideshow img.active { opacity: 1; } #slideshow button { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; border: none; padding: 10px; cursor: pointer; font-size: 24px; } #slideshow button.prev { left: 0; } #slideshow button.next { right: 0; } </style> <script> var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; var index = 0; var slideshow = document.getElementById("slideshow"); var prevButton = document.createElement("button"); var nextButton = document.createElement("button"); function init() { prevButton.innerHTML = "❮"; prevButton.classList.add("prev"); prevButton.addEventListener("click", prevSlide); nextButton.innerHTML = "❯"; nextButton.classList.add("next"); nextButton.addEventListener("click", nextSlide); slideshow.appendChild(prevButton); slideshow.appendChild(nextButton); showSlide(); setInterval(nextSlide, 5000); } function showSlide() { var img = document.createElement("img"); img.src = images[index]; img.classList.add("active"); slideshow.appendChild(img); } function hideSlide() { var activeImg = slideshow.querySelector(".active"); activeImg.classList.remove("active"); slideshow.removeChild(activeImg); } function prevSlide() { hideSlide(); index--; if (index < 0) { index = images.length - 1; } showSlide(); } function nextSlide() { hideSlide(); index++; if (index >= images.length) { index = 0; } showSlide(); } window.addEventListener("load", init); </script> </head> <body> <h1>轮播图</h1> <div id="slideshow"></div> </body> </html> ``` 在这个案例中,我们使用了 JavaScript 来实现一个基本的轮播图。在 HTML 中,我们定义了一个包含图片的 div 元素,并使用 CSS 来设置其样式。在 JavaScript 中,我们定义了一个 images 数组来存储图片的文件名,一个 index 变量来记录当前显示的图片的索引,以及 prevButton 和 nextButton 两个按钮元素来控制切换图片。在 init 函数中,我们初始化轮播图,并设置了自动切换的定时器。在 showSlide 函数中,我们创建一个 img 元素,并将其添加到轮播图中。在 hideSlide 函数中,我们移除当前显示的图片。在 prevSlide 函数和 nextSlide 函数中,我们分别实现了向前和向后切换图片的逻辑。最后,我们在 window 的 load 事件中调用 init 函数来初始化轮播图
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值