CommonTabLayout+ViewPager快速完成APP首页搭建

听闻少年二字，当与平庸相斥。这篇文章主要讲述CommonTabLayout+ViewPager快速完成APP首页搭建相关的知识，希望能为你提供帮助。
款APP开始的时候往往少不了多页面的切换，这就涉及到viewpager的使用，以前往往用Google自带的效果去实现，比较麻烦不说，后面做出来的效果还不如人意。
下面就利用CommonTabLayout+ViewPager来实现类似各电商APP首页的效果；
搭建很简单，第一步，新建一个工程。在build.gradle里面加入下面的引用：

compile ‘com.flyco.roundview:FlycoRoundView_Lib:[email protected]‘ compile ‘com.flyco.tablayout:FlycoTabLayout_Lib:[email protected]‘ compile ‘com.android.support:design:24.2.1‘compile ‘com.nineoldandroids:library:2.4.0‘

这样就能使用CommTabLayout插件了；
下面是activity_main.xml文件，我在里面加入了一个FloatingActionButton。

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> < RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> < android.support.v4.view.ViewPager android:id="@+id/view_main" android:layout_width="match_parent" android:layout_height="match_parent"/> < android.support.design.widget.FloatingActionButton android:id="@+id/float_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" app:backgroundTint="#FFFFFF" android:background="@drawable/ic_arrow_drop_down_black_24dp"/> < /RelativeLayout> < com.flyco.tablayout.CommonTabLayout android:id="@+id/tab_main" android:layout_width="match_parent" android:layout_height="40dp" android:background="#FFFFFF" app:tl_iconGravity="LEFT" app:tl_iconHeight="20dp" app:tl_iconMargin="5dp" app:tl_iconWidth="20dp" app:tl_indicator_bounce_enable="false" app:tl_indicator_color="@color/colorPrimary" app:tl_indicator_gravity="TOP" app:tl_textSelectColor="@color/colorPrimary" app:tl_textUnselectColor="#DDD" app:tl_textsize="15sp" app:tl_underline_color="#DDDDDD" app:tl_underline_gravity="TOP" app:tl_underline_height="1dp"/> < /LinearLayout>

先创建几个fagment用来做viewPager的元素，我在viewPager里面加了三个fragment，都是非常简单的布局；这些fragment继承了我自己创建的一个BaseFragment；
BaseFragment

package com.learn.bob.testfragmentadapter; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; public class BaseFragment extends Fragment {public int dialogTheme; public Context mContext; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); }@Override public void onPause() { super.onPause(); }@Override public void onResume() { super.onResume(); }}

package com.learn.bob.testfragmentadapter;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
* Created by Administrator on 2018/1/7.
*/

public class ThirdFragment extends BaseFragment {

private Context mContext;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mContext = getActivity();
return inflater.inflate(R.layout.fragment_thirdd, container, false);
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initView();
}

private void initView(){

}
}

下面是MainActivity，

package com.learn.bob.testfragmentadapter; import android.support.design.widget.FloatingActionButton; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Toast; import com.flyco.tablayout.CommonTabLayout; import com.flyco.tablayout.listener.CustomTabEntity; import com.flyco.tablayout.listener.OnTabSelectListener; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity{private ViewPager mViewPager; private CommonTabLayout mTab; private FirstFragment firstFragment; private FirstReplaceFragment firstReplaceFragment; private SecondFragment secondFragment; private ThirdFragment thirdFragment; private ViewPagerAadpter viewPagerAadpter; private List< BaseFragment> fragmentList; private ArrayList< CustomTabEntity> mTabEntities = new ArrayList< > (); private FloatingActionButton mBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); }private void initView(){ mViewPager = (ViewPager)findViewById(R.id.view_main); mTab = (CommonTabLayout) findViewById(R.id.tab_main); mBtn = (FloatingActionButton)findViewById(R.id.float_button); mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(null != firstFragment){ // Toast.makeText(MainActivity.this,"点击了",Toast.LENGTH_LONG).show(); } } }); if(null == fragmentList){ fragmentList = new ArrayList< BaseFragment> (); }if(null== firstFragment){ firstFragment = new FirstFragment(); fragmentList.add(firstFragment); mTabEntities.add(new TabEntity("首页",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); }if(null == secondFragment){ secondFragment = new SecondFragment(); fragmentList.add(secondFragment); mTabEntities.add(new TabEntity("扉页",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); }if(null == thirdFragment){ thirdFragment = new ThirdFragment(); fragmentList.add(thirdFragment); mTabEntities.add(new TabEntity("尾页",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); }viewPagerAadpter = new ViewPagerAadpter(getSupportFragmentManager(),fragmentList); mViewPager.setAdapter(viewPagerAadpter); mTab.setTabData(mTabEntities); mViewPager.setOffscreenPageLimit(3);
//为tab页的点击添加监听事件 mTab.setOnTabSelectListener(new OnTabSelectListener() { @Override public void onTabSelect(int position) { mViewPager.setCurrentItem(position); }@Override public void onTabReselect(int position) {} });
//为viewPager的滑动添加监听事件 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override public void onPageSelected(int position) { mTab.setCurrentTab(position); }@Override public void onPageScrollStateChanged(int state) {} }); }
//viewPager的适配器 private class ViewPagerAadpter extends FragmentPagerAdapter{private List< BaseFragment> fragments; private FragmentManager fragmentManager; public ViewPagerAadpter(FragmentManager fm, List< BaseFragment> fragmentList) { super(fm); this.fragments = fragmentList; this.fragmentManager = fm; }@Override public Fragment getItem(int position) { return fragments.get(position); }@Override public int getCount() { return fragments.size(); } }}

在CusstommonTabEntity的基础上我添加了一个TabEntity的实体类来定义我的tab页；

package com.learn.bob.testfragmentadapter; import com.flyco.tablayout.listener.CustomTabEntity; /** * Created by bob on 2017-4-12 14:37 */public class TabEntity implements CustomTabEntity { public String title; public int selectedIcon; public int unSelectedIcon; public TabEntity(String title, int selectedIcon, int unSelectedIcon) { this.title = title; this.selectedIcon = selectedIcon; this.unSelectedIcon = unSelectedIcon; } public TabEntity(String title) { this.title = title; }@Override public String getTabTitle() { return title; }@Override public int getTabSelectedIcon() { return selectedIcon; }@Override public int getTabUnselectedIcon() { return unSelectedIcon; } }

这是最终的效果，在xml里面能够设置下面tab页滑动时线条文字显示的颜色，也可以设置成无线条