TabLayout+ViewPager+Fragment實現多條目載入(多個介面)
阿新 • • 發佈:2018-11-12
要求:
實現如圖所示效果,上方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<Fragment> list; private FragmentAdapter adapter; private List<String> titles; private List<String> 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<urls.size();i++){ BFragment bFragment=new BFragment(); Bundle bundle=new Bundle(); bundle.putString("urls",urls.get(i)); bFragment.setArguments(bundle); list.add(bFragment); } //新增介面卡 adapter=new FragmentAdapter(getFragmentManager(),MainActivity.this,list, (ArrayList<String>) 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<Fragment> list; private ArrayList<String> titles; public FragmentAdapter(FragmentManager fm) { super(fm); } public FragmentAdapter(FragmentManager fm, MainActivity mainActivity, ArrayList<Fragment> list,ArrayList<String> 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<String,Void,ArrayList<News.ResultBean.DataBean>>(){
@Override
protected ArrayList<News.ResultBean.DataBean> doInBackground(String... strings) {
String textString=HttpUtils.HttpUrl(strings[0]);
News news=new Gson().fromJson(textString,News.class);
return news==null?null: (ArrayList<News.ResultBean.DataBean>) news.getResult().getData();
}
@Override
protected void onPostExecute(ArrayList<News.ResultBean.DataBean> 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<News.ResultBean.DataBean> 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<News.ResultBean.DataBean> newslist;
public NewsAdapter(FragmentActivity activity) {
this.activity = activity;
newslist=new ArrayList<>();
}
@Override
public int getItemViewType(int position) {
List<News.ResultBean.DataBean.ImageBean> 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<News.ResultBean.DataBean> dataBeans) {
newslist=dataBeans;
notifyDataSetChanged();
}
public void addNewsData(ArrayList<News.ResultBean.DataBean> 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<ImageBean> images;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public List<ImageBean> getImages() {
return images;
}
public void setImages(List<ImageBean> images) {
this.images = images;
}
public class ImageBean{
String u;
public String getU() {
return u;
}
public void setU(String u) {
this.u = u;
}
}
}
效果圖如下