TabLayout+ViewPager+Fragment实现多条目加载（多个接口）

要求：

实现如图所示效果，上方TabLayout，下面ViewPager+Fragment，下拉刷新，上拉加载更多，多条目加载，显示title标题，根据images图片数量进行多条目加载。

接口如下，其中page为页数，lid为上方标题的id

https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2509&k=&num=20&page=1

lid的文字和id对应关系如下

2509全部

2510国内

2511国际

2515科技

2517股市

2518美股

2516财经

2669社会

2512体育

2513娱乐

2514军事

2515科技

 

以下是代码布局

package com.example.xxx.zkc;

import android.app.Fragment;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.example.xxx.zkc.adapter.FragmentAdapter;
import com.example.xxx.zkc.fragment.BFragment;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private TabLayout tabs;
    private ArrayList list;
    private FragmentAdapter adapter;
    private List titles;
    private List urls;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        initView();
        //初始化标题和地址
        initTitleandUrl();

        //初始化viewpager
        initViewpager();
       //初始化tab
        initTab();






    }

    private void initTitleandUrl() {
        titles=new ArrayList<>();
        titles.add("全部");
        titles.add("国内");
        titles.add("国际");
        titles.add("科技");
        titles.add("股市");
        titles.add("美股");
        titles.add("财经");
        titles.add("社会");
        titles.add("体育");
        titles.add("娱乐");
        titles.add("军事");
        urls=new ArrayList<>();
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2509&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2510&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2511&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2515&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2517&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2518&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2516&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2669&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2512&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2513&k=&num=20&page=");
        urls.add("https://feed.mix.sina.com.cn/api/roll/get?pageid=153&lid=2514&k=&num=20&page=");


    }


    private void initTab() {
        //创建tabs
        //tab可滚动
       /* tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
        tabs.setTabMode(TabLayout.MODE_FIXED);
        tabs.setTabTextColors(ColorStateList.valueOf(Color.BLACK));*/
        tabs.setupWithViewPager(viewPager);


    }

    private void initViewpager() {
        //添加数据
        list=new ArrayList<>();
        //往BFragment里添加数据
        for (int i=0;i) titles);
        viewPager.setAdapter(adapter);

    }

    private void initView() {
        tabs= (TabLayout) findViewById(R.id.tabs);
        viewPager= (ViewPager) findViewById(R.id.viewpager);

    }
}

接下来设置适配器FragmentPagerAdapter来实现Tab轮播效果

package com.example.xxx.zkc.adapter;

import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v13.app.FragmentPagerAdapter;

import com.example.xxx.zkc.MainActivity;

import java.util.ArrayList;

public class FragmentAdapter extends FragmentPagerAdapter{

    private MainActivity mainActivity;
    private ArrayList list;
    private ArrayList titles;

    public FragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    public FragmentAdapter(FragmentManager fm, MainActivity mainActivity, ArrayList list,ArrayList titles) {
        super(fm);
        this.mainActivity = mainActivity;
        this.list = list;
        this.titles=titles;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }


    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

之后我们开始BFragment，在里面进行下拉刷新，上拉加载，以及获取网络数据。

package com.example.xxx.zkc.fragment;


import android.app.Fragment;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.example.mylibrary.me.maxwin.view.XListView;
import com.example.xxx.zkc.R;
import com.example.xxx.zkc.adapter.NewsAdapter;
import com.example.xxx.zkc.bean.News;
import com.example.xxx.zkc.util.HttpUtils;
import com.google.gson.Gson;

import java.util.ArrayList;


/**
 * A simple {@link Fragment} subclass.
 */
public class BFragment extends Fragment {
   private XListView xlv;
   private String urls;
   private NewsAdapter newsAdapter;
   private int page=1;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle=getArguments();
        urls=bundle.getString("urls");
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view=View.inflate(getActivity(),R.layout.fragment_b,null);
        //初始化控件
        initView(view);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //添加适配器
         newsAdapter=new NewsAdapter((FragmentActivity) getActivity());
         xlv.setAdapter(newsAdapter);
         //设置监听
        xlv.setXListViewListener(new XListView.IXListViewListener() {
            @Override
            public void onRefresh() {
                page=1;
                loadData();
            }

            @Override
            public void onLoadMore() {
                  loadData();
            }
        });
        //刚进来设置默认能加载数据
        xlv.setPullLoadEnable(true);
        //刚进来就加载数据
        loadData();



    }
   //判断是否还能上拉加载数据
    private void canLoadMore(boolean b) {
        xlv.setPullLoadEnable(b);
    }

  //获取网络数据
    private void loadData() {
        String path=urls+this.page;
        new AsyncTask>(){

            @Override
            protected ArrayList doInBackground(String... strings) {
                String textString=HttpUtils.HttpUrl(strings[0]);
                News news=new Gson().fromJson(textString,News.class);
                return news==null?null: (ArrayList) news.getResult().getData();
            }

            @Override
            protected void onPostExecute(ArrayList dataBeans) {
                super.onPostExecute(dataBeans);
                if(dataBeans==null){
                    Toast.makeText(getActivity(),"请求数据失败",Toast.LENGTH_SHORT).show();
                    return;
                }
                updateData(dataBeans);
                //完成追加
                completedLoad();

            }
        }.execute(path);
    }

    private void completedLoad() {
        page++;
        xlv.stopRefresh();
        xlv.stopLoadMore();
    }

    private void updateData(ArrayList dataBeans) {
        if(page==1){
            newsAdapter.setNewsData(dataBeans);
        } else {
            newsAdapter.addNewsData(dataBeans);
        }
    }

    private void initView(View view) {
        xlv=view.findViewById(R.id.xlv);
    }
}

开始设置XListview适配器

在里面进行多条目判断加载哪个布局

package com.example.xxx.zkc.adapter;

import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.xxx.zkc.R;
import com.example.xxx.zkc.bean.News;
import com.nostra13.universalimageloader.core.ImageLoader;

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

public class NewsAdapter extends BaseAdapter{
    private FragmentActivity activity;
    private ArrayList newslist;

    public NewsAdapter(FragmentActivity activity) {
        this.activity = activity;
        newslist=new ArrayList<>();
    }

    @Override
    public int getItemViewType(int position) {
        List images=newslist.get(position).getImages();
        //没有图片返回3
        if(images==null){
            return 3;
            //一张图片返回2
        } else if(images.size()==1){
            return 2;
            //一张图片返回1
        } else if (images.size() == 2){
            return 1;
        }
        //大于三张图片返回0
        else if (images.size()>=3){
            return 0;
        }
        return 3;

    }

    @Override
    public int getViewTypeCount() {
        return super.getViewTypeCount()+3;
    }

    @Override
    public int getCount() {
        return newslist.size();
    }

    @Override
    public Object getItem(int i) {
        return newslist.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder1 vh1 = null;
        ViewHolder2 vh2 = null;
        ViewHolder3 vh3 = null;
        ViewHolder4 vh4 = null;
        int type=getItemViewType(i);
        switch (type){
            case 3:
                if(view==null){
                    vh1=new ViewHolder1();
                    view =  View.inflate(activity,R.layout.item1,null);
                    vh1.title1=view.findViewById(R.id.title1);
                    view.setTag(vh1);
                } else {
                    vh1= (ViewHolder1) view.getTag();
                }
                vh1.title1.setText(newslist.get(i).getTitle());
                break;
            case 2:
                if (view == null){
                    vh2 = new ViewHolder2();
                    view = View.inflate(activity, R.layout.item2,null);
                    vh2.title2 = view.findViewById(R.id.title2);
                    vh2.iv21 = view.findViewById(R.id.iv21);
                    view.setTag(vh2);
                }else{

                    vh2 = (ViewHolder2) view.getTag();
                }
                vh2.title2.setText(newslist.get(i).getTitle());

                ImageLoader.getInstance().displayImage(newslist.get(i).getImages().get(0).getU(),vh2.iv21);
                break;
            case 1:
                if (view == null){
                    vh3 = new ViewHolder3();
                    view = View.inflate(activity, R.layout.item3,null);
                    vh3.title3 =view.findViewById(R.id.title3);
                    vh3.iv31 = view.findViewById(R.id.iv31);
                    vh3.iv32 = view.findViewById(R.id.iv32);
                    view.setTag(vh3);
                }else{
                    vh3 = (ViewHolder3) view.getTag();
                }
                vh3.title3.setText(newslist.get(i).getTitle());
                ImageLoader.getInstance().displayImage(String.valueOf(newslist.get(i).getImages().get(0).getU()),vh3.iv31);
                ImageLoader.getInstance().displayImage(String.valueOf(newslist.get(i).getImages().get(1).getU()),vh3.iv32);
                break;
            case 0:
                if (view == null){
                    vh4 = new ViewHolder4();
                    view = View.inflate(activity, R.layout.item4,null);
                    vh4.title4 =view.findViewById(R.id.title4);
                    vh4.iv41 = view.findViewById(R.id.iv41);
                    vh4.iv42 = view.findViewById(R.id.iv42);
                    vh4.iv43 = view.findViewById(R.id.iv43);
                    view.setTag(vh4);
                }else{
                    vh4 = (ViewHolder4) view.getTag();
                }
                vh4.title4.setText(newslist.get(i).getTitle());
                ImageLoader.getInstance().displayImage(String.valueOf(newslist.get(i).getImages().get(0).getU()),vh4.iv41);
                ImageLoader.getInstance().displayImage(String.valueOf(newslist.get(i).getImages().get(1).getU()),vh4.iv42);
                ImageLoader.getInstance().displayImage(String.valueOf(newslist.get(i).getImages().get(2).getU()),vh4.iv43);
             break;


        }
        return view;
    }

    public void setNewsData(ArrayList dataBeans) {


        newslist=dataBeans;
        notifyDataSetChanged();
    }

    public void addNewsData(ArrayList dataBeans) {
        newslist.addAll(dataBeans);
        notifyDataSetChanged();
    }

    class ViewHolder1{
        TextView title1;
    }
    class ViewHolder2{
        ImageView iv21;
        TextView title2;
    }
    class ViewHolder3{
        ImageView iv31;
        ImageView iv32;
        TextView title3;
    }
    class ViewHolder4{
        TextView title4;
        ImageView iv41;
        ImageView iv42;
        ImageView iv43;

    }

}

Bean类里面的image集合类型设置一个bean类，添加图片属性

public static class DataBean {

    private String title;
    private List images;



    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List getImages() {
        return images;
    }

    public void setImages(List images) {
        this.images = images;
    }
    public class ImageBean{
        String u;

        public String getU() {
            return u;
        }

        public void setU(String u) {
            this.u = u;
        }
    }
}

效果图如下

 

标题