在这里首先要感谢http://blog.csdn.net/qdjdeveloper/article/details/71254819
话不多说,先上效果图:
顶部的导航条是可以滑动的,底部的导航条是不能滑动!
那让我们看下具体的实现代码:
1,主界面MainActivity
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
private FragmentPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//隐藏系统自带的状态栏
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
//隐藏掉整个ActionBar
getSupportActionBar().hide();
/*通过DataBing来绑定布局视图*/
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
//初始化适配器-添加所需要的fragment
mAdapter = new MainTabAdapter(this);
binding.viewPager.setAdapter(mAdapter);
//将TabLayout和ViewPager关联起来
binding.tabLayout.setupWithViewPager(binding.viewPager);
binding.viewPager.setOffscreenPageLimit(5);
initTab();
}
/**
* 设置添加Tab
*/
private void initTab() {
/*tab_home为底部导航条布局*/
binding.tabLayout.getTabAt(0).setCustomView(R.layout.tab_home);
binding.tabLayout.getTabAt(1).setCustomView(R.layout.tab_hot);
binding.tabLayout.getTabAt(2).setCustomView(R.layout.tab_category);
binding.tabLayout.getTabAt(3).setCustomView(R.layout.tab_cart);
binding.tabLayout.getTabAt(4).setCustomView(R.layout.tab_mine);
//默认选中的Tab
binding.tabLayout.getTabAt(0).getCustomView().setSelected(true);
}
}
2,主界面布局 main_activity
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<!--此layout为DataBing的固定写法-->
<!--使用DataBing时,其布局中的根布局只能有一个子布局-->
<LinearLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.qiudengjiao.tablayout.MainActivity">
<!--不可滑动的ViewPager-->
<com.example.qiudengjiao.tablayout.view.NoScrollViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</com.example.qiudengjiao.tablayout.view.NoScrollViewPager>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#d6d2d2"/>
<!--底部导航栏
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabIndicatorColor="#33e0ff"
app:tabIndicatorHeight="0dp">
</android.support.design.widget.TabLayout>
</LinearLayout>
</layout>
3,底部导航条单个item的布局–例如:tab_home
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
//图片选择资源文件
android:src="@drawable/selector_tab_home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
//字体选择资源文件
android:textColor="@color/selector_tab_text"
android:textSize="14sp" />
</LinearLayout>
//图片选择资源文件 @drawable/selector_tab_home
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_home" android:state_selected="false"/>
<item android:drawable="@mipmap/icon_home_press" android:state_selected="true"/>
</selector>
//文字选择资源文件 @color/selector_tab_text
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#999999" android:state_selected="false"/>
<item android:color="#e22b2b" android:state_selected="true"/>
</selector>
4,主界面使用的MainTabAdapter
public class MainTabAdapter extends FragmentPagerAdapter {
private MainActivity mContext;
private HomeFragment homeFragment;
private HotFragment hotFragment;
private CategoryFragment categoryFragment;
private CartFragment cartFragment;
private MineFragment mineFragment;
public MainTabAdapter(MainActivity mainActivity) {
super(mainActivity.getSupportFragmentManager());
this.mContext = mainActivity;
//初始化Fragment
homeFragment = new HomeFragment();
hotFragment = new HotFragment();
categoryFragment = new CategoryFragment();
cartFragment = new CartFragment();
mineFragment = new MineFragment();
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
return homeFragment;
} else if (position == 1) {
return hotFragment;
} else if (position == 2) {
return categoryFragment;
} else if (position == 3) {
return cartFragment;
} else if (position == 4) {
return mineFragment;
}
return null;
}
@Override
public int getCount() {
return 5;
}
}
5,第一个Fragment–>HomeFragment
public class HomeFragment extends BaseFragment {
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragment;
private List<String> mTitle;
private FragmentHomeBinding mBinding;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false);
initTabFragment();
return mBinding.getRoot();
}
private void initTabFragment() {
//初始化Fragment
Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
Fragment3 fragment3 = new Fragment3();
//将Fragment装进列表中
mFragment = new ArrayList<>();
mFragment.add(fragment1);
mFragment.add(fragment2);
mFragment.add(fragment3);
//将名称添加daoTab列表
mTitle = new ArrayList<>();
mTitle.add("Tab1");
mTitle.add("Tab2");
mTitle.add("Tab3");
//为TabLayout添加Tab名称
mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(0)));
mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(1)));
mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(2)));
mAdapter = new TopAdapter(getActivity().getSupportFragmentManager(), mFragment, mTitle);
//ViewPager加载Adapter
mBinding.topViewPager.setAdapter(mAdapter);
//TabLayout加载ViewPager
mBinding.topTabLayout.setupWithViewPager(mBinding.topViewPager);
}
}
6,顶部导航栏适配器
public class TopAdapter extends FragmentPagerAdapter {
//Fragment列表
private List<Fragment> mFragment;
//Tab名列表
private List<String> mTitle;
public TopAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm);
this.mFragment = fragments;
this.mTitle = titles;
}
@Override
public Fragment getItem(int position) {
return mFragment.get(position);
}
@Override
public int getCount() {
return mTitle.size();
}
//此方法用来显示Tab上的名字
@Override
public CharSequence getPageTitle(int position) {
return mTitle.get(position);
}
}
8,其他的一些资源文件就不贴出来了
详见giuhub地址:
https://github.com/willBars/tabLayoutDemo
以上!