先看一下效果:
项目结构:
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的布局文件:
<?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="150dp">
<com.youth.banner.Banner
android:id="@+id/mybanner"
android:layout_width="match_parent"
android:layout_height="150dp">
</com.youth.banner.Banner>
</LinearLayout>
zuixin里边:recyclerview.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">
<android.support.v7.widget.RecyclerView
android:id="@+id/item_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
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:
<?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">
<android.support.v7.widget.RecyclerView
android:id="@+id/zhuti_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
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