使用viewpager+CommonTabLayout上图下文底部导航栏
第一步 导入CommonTabLayout依赖
implementation ‘com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar’
第二步 创建布局
// An highlighted block
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:layout_weight="1"
android:id="@+id/vp"
android:layout_height="0dp"
android:layout_width="match_parent">
</androidx.viewpager.widget.ViewPager>
<com.flyco.tablayout.CommonTabLayout
android:layout_width="match_parent"
android:id="@+id/tab"
app:tl_textSelectColor="#0077F3"
app:tl_textUnselectColor="#000"
android:layout_height="50dp">
</com.flyco.tablayout.CommonTabLayout>
</LinearLayout>
第三步 创建一个类实现CustomTabEntity接口
// An highlighted block
/**
* @author
* @description: 封装的CustomTabEntityDemo类
* @date
*/
public class CustomTabEntityDemo implements CustomTabEntity {
private String tab;
private int SelectedIcon;
private int TabUnselectedIcon;
public CustomTabEntityDemo(String tab, int selectedIcon, int tabUnselectedIcon) {
this.tab = tab;
SelectedIcon = selectedIcon;
TabUnselectedIcon = tabUnselectedIcon;
}
@Override
public String getTabTitle() {
return tab;
}
@Override
public int getTabSelectedIcon() {
return SelectedIcon;
}
@Override
public int getTabUnselectedIcon() {
return TabUnselectedIcon;
}
}
第四步 在activity中关联起来
// An highlighted block
package com.zywl.myapplication;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.flyco.tablayout.CommonTabLayout;
import com.flyco.tablayout.listener.CustomTabEntity;
import com.flyco.tablayout.listener.OnTabSelectListener;
import com.zywl.myapplication.fragment.FirstFragment;
import com.zywl.myapplication.fragment.SecondFragment;
import com.zywl.myapplication.fragment.ThirdFragment;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
/**
* 上图下文 主页面
*/
public class MainActivity extends AppCompatActivity {
private ViewPager vp;
private CommonTabLayout tab;
//创建fragment集合
private List<Fragment> flist=new ArrayList<>();
private ArrayList<CustomTabEntity> Clist=new ArrayList<>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//找控件
vp = findViewById(R.id.vp);
tab = findViewById(R.id.tab);
//添加集合
flist.add(new FirstFragment());
flist.add(new SecondFragment());
flist.add(new ThirdFragment());
//获取到封装的对象然后把数据存进去
CustomTabEntityDemo c1 = new CustomTabEntityDemo("第一页", R.mipmap.ic_launcher, R.mipmap.ic_launcher_round);
CustomTabEntityDemo c2 = new CustomTabEntityDemo("第二页", R.mipmap.ic_launcher, R.mipmap.ic_launcher_round);
CustomTabEntityDemo c3 = new CustomTabEntityDemo("第三页", R.mipmap.ic_launcher, R.mipmap.ic_launcher_round);
//把创建好的对象存放到集合中
Clist.add(c1);
Clist.add(c2);
Clist.add(c3);
//CommonTabLayout 与ViewPage 进行关联
tab.setTabData(Clist);
//设置viewpager适配器
vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return flist.get(position);
}
@Override
public int getCount() {
return flist.size();
}
});
//
//设置CommonTabLayout 点击时间
tab.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
vp.setCurrentItem(position);
}
@Override
public void onTabReselect(int position) {
}
});
//设置viewpager滑动事件
vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
tab.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
第五步 最终效果