Android Xrecyclervie，TabLayout+Fragment，综合

客官°小女子只卖身不卖艺 2022-06-06 00:48 236阅读 0赞

先看一下效果:

![20171025185943375][]

### 项目结构: ###

![20171025191303797][]![20171025191311902][]

### 1.导入依赖: ###

//tablayout
        compile 'com.android.support:design:24.2.1'
    
    //    Okhttp请求以及Gson解析
        compile 'com.squareup.okio:okio:1.5.0'
        compile 'com.squareup.okhttp3:okhttp:3.2.0'
        compile 'com.squareup.okhttp3:logging-interceptor:3.4.1'
        compile 'com.google.code.gson:gson:2.8.2'
    //    banner使用
        compile 'com.youth.banner:banner:1.4.9'
        //glide
        compile 'com.github.bumptech.glide:glide:3.7.0'
    //    imageolader
        compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
    //    logger日志的使用
        compile 'com.orhanobut:logger:2.1.1'
        /*xRecyclerview*/
        compile 'com.jcodecraeer:xrecyclerview:1.3.2'
        /*recyclerview*/
        compile 'com.github.liuguangqiang.SuperRecyclerView:super-recyclerview:0.1.2'

### 配置权限: ###

<uses-permission android:name="android.permission.INTERNET"/>
    
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

### 2.写布局文件activity\_main.xml ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        tools:context="xuejian.baway.com.yuedemo1.MainActivity">
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:tabMode="scrollable"
            app:tabSelectedTextColor="#f00"
            />
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ffffff"
            />
    </LinearLayout>

### Fragmnet页面的布局zuixin.xml: ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
    //xrecyclerview
        <com.jcodecraeer.xrecyclerview.XRecyclerView
            android:id="@+id/xRecyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        </com.jcodecraeer.xrecyclerview.XRecyclerView>
    </LinearLayout>

### zuixin.xml里边嵌套的banner的布局文件: ###

### zuixin里边：recyclerview.xml的布局文件： ###

### zuixin里边：item.xml的布局文件： ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/zuixin_item_img"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@mipmap/ic_launcher"
                />
            <TextView
                android:layout_marginLeft="10dp"
                android:id="@+id/zuixin_item_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="标题"
                />
        </LinearLayout>
    </LinearLayout>

### zhuti.xml: ###

### zhuti.xml的item文件: ###

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">
    
            <ImageView
                android:id="@+id/zhuti_item_img"
                android:layout_width="180dp"
                android:layout_height="180dp"
                android:src="@mipmap/ic_launcher"
                />
    
        <TextView
            android:id="@+id/zhuti_item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题"
            android:layout_alignBottom="@+id/zhuti_item_img"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="13dp" />
    </RelativeLayout>

### 3.在MainActivity中实现tablayout和fragment结合: ###

public class MainActivity extends FragmentActivity {
    
        private TabLayout tabLayout;
        private FragmentManager fm;
        private FragmentTransaction beginTransaction;
        private ZuiXin zuiXin;
        private ZhuanGui zhuanGui;
        private ReMen reMen;
        private ZhuTi zhuTi;
        private ArrayList<Fragment> fragments;
        private MyfragAdapter myfragAdapter;
        private ViewPager viewPager;
        private String[] titles = {"最新日报", "专柜", "热门","主题日报"};
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initView();
            initfrags();
        }
        private void initView() {
            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
            viewPager = (ViewPager) findViewById(R.id.viewPager);
        }
        private void initfrags() {
            fm = getSupportFragmentManager();
            beginTransaction = fm.beginTransaction();
            fragments = new ArrayList<>();
            zuiXin = new ZuiXin();
            zhuanGui = new ZhuanGui();
            reMen = new ReMen();
            zhuTi = new ZhuTi();
            fragments.add(zuiXin);
            fragments.add(zhuanGui);
            fragments.add(reMen);
            fragments.add(zhuTi);
            myfragAdapter = new MyfragAdapter(fm);
            viewPager.setAdapter(myfragAdapter);
    
            //绑定viewpager
            tabLayout.setupWithViewPager(viewPager);
            //设置为滑动
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        }
        //适配器
        class MyfragAdapter extends FragmentPagerAdapter{
    
            //重写这个方法，将设置每个Tab的标题
            @Override
            public CharSequence getPageTitle(int position) {
                return titles[position];
            }
    
            public MyfragAdapter(FragmentManager fm) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }
    
            @Override
            public int getCount() {
                return fragments.size();
            }
        }
    }

### 4.第一个fragment页:zuixin页面用Xrecyclerview的请求数据:   导入的包为: ###

import android.support.v4.app.Fragment;

public class ZuiXin extends Fragment{
    
        private TextView textView;
        private View view;
        private XRecyclerView xRecyclerview;
        String shouYePath = "http://result.eolinker.com/umIPmfS6c83237d9c70c7c9510c9b0f97171a308d13b611?uri=homepage";
        private int curr;
        private List<String> list=new ArrayList<>();
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            view = inflater.inflate(R.layout.frag_zuixin, container, false);
            textView = (TextView) view.findViewById(R.id.textView);
    
            initView();
    
            //分割线
            xRecyclerview.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL_LIST));
            //listview布局
            xRecyclerview.setLayoutManager(new LinearLayoutManager(getActivity()));
            //监听事件
            xRecyclerview.setLoadingListener(new XRecyclerView.LoadingListener() {
                @Override
                public void onRefresh() {//刷新
                    curr=0;
                    list.clear();
                    getData(shouYePath,curr);
                    xRecyclerview.refreshComplete();
                }
                @Override
                public void onLoadMore() {//加载
                     /*   //curr为页数
                    curr++;
                    getData(API.TYPE_HOME,curr);
                    xr.refreshComplete();*/
                }
            });
            //请求数据
            getData(shouYePath,1);
            return view;
        }
    
        private void initView() {
            xRecyclerview = (XRecyclerView) view.findViewById(R.id.xRecyclerview);
        }
    
    
        private void getData(String shouYePath, int curr) {
            OkHttp3Utils.getInstance().doGet(shouYePath, new GsonObjectCallback<ZuiXinBean>() {
                @Override
                public void onUi(ZuiXinBean zuiXinBean) {
                    ZuiXinBean.DataBean dataBean = zuiXinBean.getData();
                    XrAdapter xrAdapter = new XrAdapter(getActivity(),dataBean);
                    xRecyclerview.setAdapter(xrAdapter);//设置适配器
                }
    
                @Override
                public void onFailed(Call call, IOException e) {
    
                }
            });
        }
    }

### 对应的XrAdapter适配器: ###

public class XrAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    
        Context context;
        ZuiXinBean.DataBean list;
        private ArrayList mlist;
    
        private  enum  Item_Type{
            type1,
            type2
        }
        public XrAdapter(Context context, ZuiXinBean.DataBean list) {
            this.context = context;
            this.list = list;
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType == Item_Type.type1.ordinal()){
                View view = LayoutInflater.from(context).inflate(R.layout.frag_zuixin_banner,null);
                ViewHolderA viewHolder = new ViewHolderA(view);
                return viewHolder;
            }
            else if(viewType == Item_Type.type2.ordinal()){
                View view = LayoutInflater.from(context).inflate(R.layout.frag_zuixin_rcv,null);
                ViewHolderB viewHolder = new ViewHolderB(view);
                return viewHolder;
            }
            return null;
        }
    
        @Override
        public int getItemViewType(int position) {
            if (position==0){
                return Item_Type.type1.ordinal();
            }
            else if(position==1){
                return Item_Type.type2.ordinal();
            }
            return -1;
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
     //banner轮播图
            if (holder instanceof ViewHolderA){
                mlist = new ArrayList();
                for (int i = 0;i<list.getAd1().size();i++){
                    mlist.add(list.getAd1().get(i).getImage());
                    Toast.makeText(context,list.getAd1().get(i).getTitle(),Toast.LENGTH_SHORT);
                }
                //设置图片加载器
                ((ViewHolderA)holder).mybanner.setImageLoader(new BannerGlideImageLoader());
                ((ViewHolderA)holder).mybanner.setImages(mlist);
                ((ViewHolderA)holder).mybanner.start();
            }
            else if(holder instanceof ViewHolderB){//底部的recyclerview
                ((ViewHolderB)holder).item_recyclerview.setLayoutManager(new LinearLayoutManager(context,LinearLayoutManager.VERTICAL,true));
                ((ViewHolderB)holder).item_recyclerview.setAdapter(new ItemAdapter(1,context,list));
            }
        }
    
        @Override
        public int getItemCount() {
            return 2;
        }
    
        class ViewHolderA extends RecyclerView.ViewHolder{
    
            public Banner mybanner;
    
            public ViewHolderA(View view) {
                super(view);
                mybanner = (Banner) view.findViewById(R.id.mybanner);
            }
        }
    
        class ViewHolderB extends RecyclerView.ViewHolder {
    
            public RecyclerView item_recyclerview;
    
            public ViewHolderB(View view) {
                super(view);
                item_recyclerview = (RecyclerView) view.findViewById(R.id.item_recyclerview);
            }
        }
    }

### 5.轮播图加载要用到:BannerGlideImageLoader类: ###

import android.content.Context;
    import android.widget.ImageView;
    
    import com.bumptech.glide.Glide;
    import com.youth.banner.loader.ImageLoader;
    
    /**
     * 重写图片加载器
     */
    
    public class BannerGlideImageLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context).load((String)path).into(imageView);
        }
    }

### 6.加载条目图片用到的MyApp类初始化imageoader和okhttp3的单例:   **记得到清单文件里的里边去配置一下** ###

<application
            android:name=".utils.MyApp"

import android.app.Application;
    import com.nostra13.universalimageloader.core.ImageLoader;
    import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
    public class MyApp extends Application{
    
            public static MyApp mInstance;
    
            @Override
            public void onCreate() {
                super.onCreate();
    
                mInstance=this;
                //初始化imageloader
                ImageLoaderConfiguration configuration = ImageLoaderConfiguration.createDefault(getApplicationContext());
                ImageLoader.getInstance().init(configuration);
            }
            public static MyApp getInstance() {
                return mInstance;
            }
    }

### 7.主题页底部列表的ItemAdapter: ###

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.staggerView>{
    
        int itemTypeid;
        Context context;
        ZuiXinBean.DataBean dataBean;
    
        public ItemAdapter(int itemTypeid, Context context, ZuiXinBean.DataBean dataBean) {
            this.itemTypeid = itemTypeid;
            this.context = context;
            this.dataBean = dataBean;
        }
    
        @Override
        public staggerView onCreateViewHolder(ViewGroup parent, int viewType) {
    
            if (viewType==1){
                View view1 = LayoutInflater.from(parent.getContext()).inflate(R.layout.frag_zuixin_item, null, false);
                staggerView staggerView = new staggerView(view1);
                return staggerView;
            }
            return null;
        }
    
        @Override
        public void onBindViewHolder(staggerView holder, int position) {
            if (itemTypeid==1){
                holder.zuixin_item_title.setText(dataBean.getDefaultGoodsList().get(position).getGoods_name());
                ImageLoader.getInstance().displayImage(dataBean.getDefaultGoodsList().get(position).getGoods_img(),holder.zuixin_item_img);
            }
        }
    
        @Override
        public int getItemCount() {
            if (itemTypeid==1){
                return dataBean.getDefaultGoodsList().size();
            }
            return 0;
        }
        @Override
        public int getItemViewType(int position) {
            return 1;
        }
        class staggerView extends RecyclerView.ViewHolder{
    
            public  ImageView zuixin_item_img;
            public TextView zuixin_item_title;
    
            public staggerView(View itemView) {
                super(itemView);
                    zuixin_item_img = (ImageView) itemView.findViewById(R.id.zuixin_item_img);
                    zuixin_item_title = (TextView) itemView.findViewById(R.id.zuixin_item_title);
    
            }
        }
    }

### 8.主题页Fragment页面zhuti: ###

public class ZhuTi extends Fragment{
    
        private TextView textView;
        private View view;
        String shouYePath = "http://result.eolinker.com/umIPmfS6c83237d9c70c7c9510c9b0f97171a308d13b611?uri=homepage";
        private List<String> list=new ArrayList<>();
        private RecyclerView zhuti_recyclerview;
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.frag_zhuti, container, false);
            textView = (TextView) view.findViewById(R.id.textView);
    
            getData();
    
            zhuti_recyclerview = (RecyclerView) view.findViewById(R.id.zhuti_recyclerview);
            //分割线
            zhuti_recyclerview.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.HORIZONTAL_LIST));
    
            //gridview布局
            zhuti_recyclerview.setLayoutManager(new GridLayoutManager(getActivity(),2));
            //请求数据
    
            return view;
        }
        //网络请求
        private void getData() {
            OkHttp3Utils.getInstance().doGet(shouYePath, new GsonObjectCallback<ZuiXinBean>() {
                @Override
                public void onUi(ZuiXinBean zuiXinBean) {
                    ZuiXinBean.DataBean dataBean = zuiXinBean.getData();
                    ZhuTiItemAdapter zhuTiItemAdapter = new ZhuTiItemAdapter(getActivity(), dataBean);
                    zhuti_recyclerview.setAdapter(zhuTiItemAdapter);
                }
                @Override
                public void onFailed(Call call, IOException e) {
    
                }
            });
        }
    }

### 对应的适配器:ZhuTiItemAdapter: ###

public class ZhuTiItemAdapter extends RecyclerView.Adapter<ZhuTiItemAdapter.staggerView>{
    
    
        Context context;
        ZuiXinBean.DataBean dataBean;
    
        public ZhuTiItemAdapter(Context context, ZuiXinBean.DataBean dataBean) {
            this.context = context;
            this.dataBean = dataBean;
        }
    
        @Override
        public staggerView onCreateViewHolder(ViewGroup parent, int viewType) {
    
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.frag_zhuti_item, null, false);
            staggerView staggerView = new staggerView(view);
            return staggerView;
    
        }
    
        @Override
        public void onBindViewHolder(staggerView holder, int position) {
    
                holder.zhuti_item_title.setText(dataBean.getDefaultGoodsList().get(position).getGoods_name());
                ImageLoader.getInstance().displayImage(dataBean.getDefaultGoodsList().get(position).getGoods_img(),holder.zhuti_item_img);
        }
    
        @Override
        public int getItemCount() {
    
            return dataBean.getDefaultGoodsList().size();
        }
        class staggerView extends RecyclerView.ViewHolder{
    
            public  ImageView zhuti_item_img;
            public TextView zhuti_item_title;
    
            public staggerView(View itemView) {
                super(itemView);
                zhuti_item_img = (ImageView) itemView.findViewById(R.id.zhuti_item_img);
                zhuti_item_title = (TextView) itemView.findViewById(R.id.zhuti_item_title);
    
            }
        }
    }

**具体的TabLayout的更多实现方法看这里:    http://blog.csdn.net/qq\_33425116/article/details/52599818**

[20171025185943375]: /images/20220606/9d0db44a7c894f0ab5100afc68ea9a45.png
[20171025191303797]: https://img-blog.csdn.net/20171025191303797
[20171025191311902]: /images/20220606/fdcad60bba3c453a94595219e839f3b4.png