请选择 进入手机版 | 继续访问电脑版
阳光沙滩博客现金打赏设置邀请好友最新视频下载
+发表新主题
黄永康 发布于2018-5-23 23:48 384 次浏览 3 位用户参与讨论
跳转到指定楼层
本帖的地址:https://bbs.sunofbeaches.com/thread-6299-1-1.html
版权声明:本文为作者所有,未经作者允许不得转载--->温馨提示:请加上原文地址!
最近我们在写喜马拉雅相关的程序,我们先拆分,然后再整合到一起即可!
前面我们学习了喜马拉雅的轮播图的实现
https://www.jianshu.com/p/c8f6d89d16a6
同学们可以先去点击一下看看效果!
接下来我们会实现这样的效果:

美团是怎么样的效果呢?



2086248-53bb07a7205020dc.png
算了不看了,哈哈!!直接看我们的效果图吧!

2086248-237dee4127441d6f.gif



实现分析
它可以左右滑动,并且最后一页是缺少的!而又是格子的布局,所以我们想到了,ViewPager+GridView!如果你能想到这个,那太棒了!但是今天 我们不用这种方式实现,我们使用RecyclerView+ViewPager这两个控件来实现!因为RecyclerView可以实现ListView的效果,也可以实现GridView的效果,也可以实现瀑布流的效果,还可以自定义布局!
实现过程
要不不写了吧,想练字,哈哈!!
还是写完吧!
首先是我们的主界面 ,只有一个Activity,布局代码就一个ViewPager

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content">

  6.     <android.support.v4.view.ViewPager
  7.         android:id="@+id/category_test_pager"
  8.         android:overScrollMode="never"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"/>


  11. </RelativeLayout>
复制代码
接着是我们的主类:
  1. package com.sunofbeaches.ximalayademo.test;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.view.ViewPager;
  6. import android.util.Log;
  7. import android.widget.Toast;

  8. import com.sunofbeaches.ximalayademo.R;
  9. import com.sunofbeaches.ximalayademo.adapter.CategoryGridViewAdapter;
  10. import com.sunofbeaches.ximalayademo.adapter.CategoryPagerAdapter;
  11. import com.ximalaya.ting.android.opensdk.datatrasfer.CommonRequest;
  12. import com.ximalaya.ting.android.opensdk.datatrasfer.IDataCallBack;
  13. import com.ximalaya.ting.android.opensdk.model.category.Category;
  14. import com.ximalaya.ting.android.opensdk.model.category.CategoryList;

  15. import java.util.HashMap;
  16. import java.util.Map;

  17. /**
  18. * Created by TrillGates on 18/5/23.
  19. * God bless my code!
  20. */
  21. public class CategoryTestActivity extends Activity {


  22.     private static final String TAG = "CategoryTestActivity";
  23.     private ViewPager mCategoryPager;
  24.     private CategoryPagerAdapter mAdapter;

  25.     @Override
  26.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  27.         super.onCreate(savedInstanceState);
  28.         setContentView(R.layout.activity_category_test);
  29.         //初始化界面
  30.         initView();
  31.         //请求数据回来
  32.         initData();
  33.     }

  34.     private void initData() {
  35.         Map<String, String> map = new HashMap<>();
  36.         CommonRequest.getCategories(map, new IDataCallBack<CategoryList>() {
  37.             @Override
  38.             public void onSuccess(@Nullable CategoryList categoryList) {
  39.                 if (mAdapter == null) {
  40.                     mAdapter = new CategoryPagerAdapter();
  41.                     mCategoryPager.setAdapter(mAdapter);
  42.                 }
  43.                 mAdapter.setData(categoryList.getCategories());
  44.                 //要设置完数据以后再设置哦,要不会没法设置呢,因为没有创建嘛!
  45.                 mAdapter.setOnItemClickListener(new CategoryGridViewAdapter.onItemClickListener() {
  46.                     @Override
  47.                     public void onItemClick(Category category) {
  48.                         Toast.makeText(CategoryTestActivity.this,
  49.                                 "你点击的是 :" + category.getCategoryName(),Toast.LENGTH_SHORT).show();
  50.                     }
  51.                 });
  52.             }

  53.             @Override
  54.             public void onError(int i, String s) {
  55.                 Log.d(TAG, "err code is " + i + " errorMsg == " + s);
  56.             }
  57.         });

  58.     }


  59.     private void initView() {
  60.         mCategoryPager = (ViewPager) this.findViewById(R.id.category_test_pager);
  61.     }
  62. }
复制代码
重点是适配器里的代码了!两个适配器,一个是ViewPager的,一个是RecyclerView的!ViewPager的适配器要处理分页:
  1. package com.sunofbeaches.ximalayademo.adapter;

  2. import android.support.v4.view.PagerAdapter;
  3. import android.support.v7.widget.GridLayoutManager;
  4. import android.support.v7.widget.RecyclerView;
  5. import android.view.View;
  6. import android.view.ViewGroup;

  7. import com.sunofbeaches.ximalayademo.utils.UIUtils;
  8. import com.ximalaya.ting.android.opensdk.model.category.Category;

  9. import java.util.ArrayList;
  10. import java.util.List;

  11. /**
  12. * Created by TrillGates on 18/5/23.
  13. * God bless my code!
  14. */
  15. public class CategoryPagerAdapter extends PagerAdapter {

  16.     private List<View> pagers = new ArrayList<>();
  17.     private List<CategoryGridViewAdapter> mAdapterList = new ArrayList<>();
  18.     //定义每页的个数,每页10个
  19.     private int pageItemCount = 10;
  20.     //多少列
  21.     private int rowCount = 5;

  22.     public void setData(List<Category> data) {
  23.         //把数据转成页面
  24.         pagers.clear();
  25.         mAdapterList.clear();
  26.         int pageSize = data.size() % pageItemCount == 0 ?
  27.                 data.size() / pageItemCount : data.size() / pageItemCount + 1;
  28.         for (int i = 0; i < pageSize; i++) {
  29.             int fromIndex = pageItemCount * i;
  30.             int toIndex = pageItemCount * (i + 1) > data.size() ? data.size() : pageItemCount * (i + 1);
  31.             List<Category> everyData = data.subList(fromIndex, toIndex);
  32.             RecyclerView gridView = new RecyclerView(UIUtils.getBaseContext());
  33.             gridView.setLayoutManager(new GridLayoutManager(UIUtils.getBaseContext(), rowCount));
  34.             //设置适配器
  35.             CategoryGridViewAdapter gridViewAdapter = new CategoryGridViewAdapter();
  36.             mAdapterList.add(gridViewAdapter);
  37.             gridViewAdapter.setData(everyData);
  38.             gridView.setAdapter(gridViewAdapter);
  39.             //把创建的view添加到集合里头
  40.             pagers.add(gridView);
  41.         }
  42.         notifyDataSetChanged();
  43.     }

  44.     public void setOnItemClickListener(CategoryGridViewAdapter.onItemClickListener listener){
  45.         for (CategoryGridViewAdapter categoryGridViewAdapter : mAdapterList) {
  46.             categoryGridViewAdapter.setOnItemClickListener(listener);
  47.         }
  48.     }

  49.     @Override
  50.     public int getCount() {
  51.         if (pagers != null) {
  52.             return pagers.size();
  53.         }
  54.         return 0;
  55.     }

  56.     @Override
  57.     public Object instantiateItem(ViewGroup container, int position) {
  58.         View itemView = pagers.get(position);
  59.         container.addView(itemView);
  60.         return itemView;
  61.     }

  62.     @Override
  63.     public void destroyItem(ViewGroup container, int position, Object object) {
  64.         container.removeView((View) object);
  65.     }

  66.     @Override
  67.     public boolean isViewFromObject(View view, Object object) {
  68.         return view==object;
  69.     }
  70. }
复制代码
接着是RecyclerView的适配器:
  1. package com.sunofbeaches.ximalayademo.adapter;

  2. import android.support.v7.widget.RecyclerView;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.ImageView;
  7. import android.widget.TextView;

  8. import com.squareup.picasso.Picasso;
  9. import com.sunofbeaches.ximalayademo.R;
  10. import com.sunofbeaches.ximalayademo.utils.UIUtils;
  11. import com.ximalaya.ting.android.opensdk.model.category.Category;

  12. import java.util.ArrayList;
  13. import java.util.List;

  14. /**
  15. * Created by TrillGates on 18/5/23.
  16. * God bless my code!
  17. */
  18. public class CategoryGridViewAdapter extends RecyclerView.Adapter<CategoryGridViewAdapter.InnerHolder> {

  19.     private List<Category> mData = new ArrayList<>();
  20.     private onItemClickListener mOnItemClickListener = null;

  21.     public void setData(List<Category> data) {
  22.         mData.clear();
  23.         mData.addAll(data);
  24.         notifyDataSetChanged();
  25.     }

  26.     @Override
  27.     public InnerHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  28.         View itemView = LayoutInflater.from(UIUtils.getBaseContext()).inflate(R.layout.item_main_view_category,
  29.                 parent, false);
  30.         return new InnerHolder(itemView);
  31.     }

  32.     @Override
  33.     public void onBindViewHolder(InnerHolder holder, int position) {
  34.         holder.setData(mData.get(position));

  35.     }

  36.     @Override
  37.     public int getItemCount() {
  38.         if (mData != null) {
  39.             return mData.size();
  40.         }
  41.         return 0;
  42.     }


  43.     public class InnerHolder extends RecyclerView.ViewHolder {
  44.         public InnerHolder(View itemView) {
  45.             super(itemView);
  46.         }

  47.         public void setData(final Category data) {
  48.             itemView.setOnClickListener(new View.OnClickListener() {
  49.                 @Override
  50.                 public void onClick(View v) {
  51.                     if (mOnItemClickListener != null) {
  52.                         mOnItemClickListener.onItemClick(data);
  53.                     }
  54.                 }
  55.             });
  56.             ImageView icon = (ImageView) itemView.findViewById(R.id.category_icon);
  57.             TextView title = (TextView) itemView.findViewById(R.id.category_title);
  58.             title.setText(data.getCategoryName());
  59.             Picasso.with(UIUtils.getBaseContext()).load(data.getCoverUrlSmall()).into(icon);
  60.         }
  61.     }

  62.     public void setOnItemClickListener(onItemClickListener listener) {
  63.         this.mOnItemClickListener = listener;
  64.     }

  65.     public interface onItemClickListener{
  66.         void onItemClick(Category category);
  67.     }
  68. }
复制代码
ok啦,就这么点代码就可以实现了!

要注意的地方

我这里的数据是从喜马拉雅的SDK里拿的,如果需要学习这个的同学,可以到B站去看啦,已经上传视频了,下周会继续更新!
另外,要注意的是要给RecyclerView设置布局管理器,否则无法显示内容出来哦!
再看一下我们的效果吧!

广告
欢迎大家分享我们的文章,感谢大家!
这个是我们的微信公众号,欢迎大家关注!更多内容请搜索阳光沙滩,感谢感谢!
2086248-db7324fe84ba480c.jpeg



转载请说明出处,本文地址:https://bbs.sunofbeaches.com/thread-6299-1-1.html

帖子的最近访客

今天签到的人不是很多呢。

已有3人评论

勿忘名@ 发表于 2018-5-25 16:51:06
B站在哪里,可以发一下链接吗??
黄永康 发表于 2018-5-25 22:02:51
勿忘名@ 发表于 2018-5-25 16:51
B站在哪里,可以发一下链接吗??

https://space.bilibili.com/44272436/#/video视频更新会发在这里滴!谢谢支持!

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ| 《网站免责声明》|小黑屋| 阳光沙滩(sunofbeaches.com)  

Copyright © 2001-2013 Comsenz Inc.   All Rights Reserved.

Powered by Discuz! X3.2( 粤ICP备14093694号 )

快速
回复
返回
列表
返回
顶部