一 前言
以目前市场上的大多数App布局框架为样例，本文演示其框架布局是如何完成的,如果想要熟悉应用该布局框架，首先应至少了解以下两个核心要素：Fragment 和 Tablayout 的相关概念。
二 目录
1.Fragment实现底部导航栏
- layout布局
- MainActivity代码控制
- 在res目录下创建menu目录，创建menu.xml文件
- 在res目录下创建navigation目录，创建mobile_navigation.xml文件
- 如何完成底部导航栏和对应的fragment进行一一对应绑定
2.Tab页签实现顶部导航栏切换并实现左右滑动效果
- 在目标fragment的布局文件中加入相应的控件
- 实现左右滑动效果
三 实现
1.在Fragment依托的主活动中加入相关控件以及代码控制
我们把MainActivity作为所有Fragment所依托的活动，因此我们首先需要在MainActivity的布局文件中加入相应控件，然后在MainActivity的主活动代码中进行控制。
（1）layout布局
我们可以看到MainActivity中主要有两个控件，BottomNavigationView 主要是用于底部的导航展示，而 fragment 则是用于放置我们的目标 fragment，我们知道在 fragment 中是可以启动另一个fragment的，就像套娃一样。同时我们必须注意 BottomNavigationView 控件中的 app:menu="@menu/bottom_nav_menu"元素，我们需要创建menu目录来确定我们底部导航栏具体应该有几个分类。在fragment控件中的 app:navGraph="@navigation/mobile_navigation" 元素用于绑定我们需要的fragment。所以我们需要在res目录下创建menu目录，创建menu.xml文件，同时创建navigation目录，创建mobile_navigation.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>（2）MainActivity代码控制
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView navView = findViewById(R.id.nav_view);
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
.build();//添加相应的Fragment
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);//将Fragment绑定在fragment控件视图当中
NavigationUI.setupWithNavController(navView, navController);//将底部导航栏对应的菜单项和对应的Fragment进行绑定
}
}（3）在res目录下创建menu目录，创建menu.xml文件
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>（4）在res目录下创建navigation目录，创建mobile_navigation.xml文件
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/mobile_navigation"
app:startDestination="@+id/navigation_home">
<fragment
android:id="@+id/navigation_home"
android:name="com.lbl.androidlayoutframe.ui.home.HomeFragment"
android:label="@string/title_home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/navigation_dashboard"
android:name="com.lbl.androidlayoutframe.ui.dashboard.DashboardFragment"
android:label="@string/title_dashboard"
tools:layout="@layout/fragment_dashboard" />
<fragment
android:id="@+id/navigation_notifications"
android:name="com.lbl.androidlayoutframe.ui.notifications.NotificationsFragment"
android:label="@string/title_notifications"
tools:layout="@layout/fragment_notifications" />
</navigation>(5) 如何完成底部导航栏和对应的fragment进行一一对应绑定
在MainActivity有这么一行代码
NavigationUI.setupWithNavController(navView, navController);//将底部导航栏对应的菜单项和对应的Fragment进行绑定实际上，完成二者相关联的就是该方法，但如何做到自动一一对应的呢？不知道注意到没有，其中关键点正是在于menu.xml 和 mobile_navigation.xml 文件，对应的menu中的 <item 和 fragment 中的 <fragment 的id值是相同的，没错，正是相同的id值完成了二者的统一，即我们需要将 <item 和我们所需要的 <fragment 设置成相同的id值来完成绑定
2.Tab页签实现顶部导航栏切换并实现左右滑动效果
（1）在目标fragment的布局文件中加入相应的控件
我们可以看到TabLayout的最外层是ViewPager，这是因为官方对于ViewPager和TabLayout有绑定支持，借助该绑定函数，我们可以轻松实现左右滑动来切换fragment的目的。 <LinearLayout 控件就是Fragment所能显示的区域。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_height="match_parent"
tools:context=".ui.home.HomeFragment">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabMode="scrollable"
tools:ignore="MissingConstraints">
</com.google.android.material.tabs.TabLayout>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="0dp"
android:layout_height="685dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>（2）实现左右滑动效果
public class HomeFragment extends Fragment {
private HomeViewModel homeViewModel;
private LikeFragment likeFragment;
private ChoiceFragment choiceFragment;
ArrayList<Fragment> fragmentList = new ArrayList<>();
private ViewPager viewPager;
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
homeViewModel =
ViewModelProviders.of(this).get(HomeViewModel.class);
View root = inflater.inflate(R.layout.fragment_home, container, false);
homeViewModel.getText().observe(getViewLifecycleOwner(), new Observer<String>() {
@Override
public void onChanged(@Nullable String s) {
}
});
viewPager = root.findViewById(R.id.vp);
likeFragment = LikeFragment.newInstance();
choiceFragment = ChoiceFragment.newInstance();
addingFragmentsTOpagerAdapter();
Fragment[] fragments = new Fragment[2];
fragments[0] = likeFragment;
fragments[1] = choiceFragment;
String[] mTitles = {"推荐", "热点"};
viewPager.setAdapter(new MyPagerAdapter(getChildFragmentManager(),fragments,mTitles));
//getChildFragmentManager().beginTransaction().replace(R.id.linearLayout,choiceFragment).commit();
TabLayout tabLayout = (TabLayout)root.findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
//tabLayout监听函数，用于监听滑动切换后的选中事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(getActivity(),tab.getText(),Toast.LENGTH_SHORT).show();
if (tab.getText().equals("推荐")){
getChildFragmentManager().beginTransaction().replace(R.id.linearLayout,likeFragment).commit();
}
if (tab.getText().equals("热点")){
getChildFragmentManager().beginTransaction().replace(R.id.linearLayout,choiceFragment).commit();
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
return root;
}
private void addingFragmentsTOpagerAdapter() {
fragmentList.add(likeFragment);
fragmentList.add(choiceFragment);
}
//ViewPager的内容适配器
public class MyPagerAdapter extends FragmentPagerAdapter {
private Fragment[] fragments;
private String[] mTitles;
MyPagerAdapter(FragmentManager fa,Fragment[] fragments,String[] mTitles){
super(fa);
this.fragments = fragments;
this.mTitles = mTitles;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragments[position];
}
@Override
public int getCount() {
return fragments.length;
}
}
}四 项目地址
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
