Android导航栏与侧边栏实现（TabLayout+Viewpager2+DrawerLayout） ...

想要做的效果

目前效果，图标巨细还不太匹配，后续会再更改一下

拆解分析
1导航栏 tablayout+viewpgaer+fragment
下面参考中已写得非常好，不再赘述。
参考
https://blog.csdn.net/W41ted/article/details/123571731
2侧边栏 drawerLayout+toolbar
参考
https://github.com/Li-Xiang-Lan/AndroidSidebar-master
https://blog.csdn.net/cdhahaha/article/details/70208860
图标均来自阿里，可自行查找 https://www.iconfont.cn/
下面是具体实现
1 activity_main xml

主结构为DrawerLayout，用两个FrameLayout分别装载主页内容（导航栏）和侧边栏内容

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.drawerlayout.widget.DrawerLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:id="@+id/drawer_layout"
5.     android:fitsSystemWindows="true"
7.     android:layout_width="match_parent"
8.     android:layout_height="match_parent">
10.     <!--主页内容-->
11.     <FrameLayout
12.         android:id="@+id/content_frame"
13.         android:layout_width="match_parent"
14.         android:layout_height="match_parent">
15.         <include layout="@layout/activity_content"/>
16.     </FrameLayout>
18.     <!--侧边栏内容-->
19.     <FrameLayout
20.         android:id="@+id/menu_frame"
21.         android:layout_width="match_parent"
22.         android:layout_height="match_parent"
23.         android:layout_gravity="start">
24.         <include layout="@layout/left_menu"/>
25.     </FrameLayout>
27. </androidx.drawerlayout.widget.DrawerLayout>

复制代码

2 activity_content xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     xmlns:tools="http://schemas.android.com/tools"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent"
8.     android:orientation="vertical">
10.     <!--模拟状态栏占位-->
11.     <View
12.         android:id="@+id/view_statusbar"
13.         android:layout_width="match_parent"
14.         android:layout_height="1dp"
15.         android:orientation="horizontal"
16.         app:layout_constraintTop_toTopOf="parent"/>
18.     <LinearLayout
19.         android:layout_width="match_parent"
20.         android:layout_height="match_parent"
21.         android:orientation="vertical">
22.     <LinearLayout
23.         android:layout_width="match_parent"
24.         android:layout_height="wrap_content"
25.         android:background="@color/white"
26.         android:weightSum="8"
27.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
28.         tools:ignore="MissingConstraints">
29.     <!--与drawerlayout配合实现更换图标等功能-->
30.     <androidx.appcompat.widget.Toolbar
31.         android:layout_weight="1"
33.         android:id="@+id/toolbar"
34.         android:layout_width="0dp"
35.         android:layout_height="?actionBarSize"
36.         app:layout_constraintTop_toBottomOf="@+id/view_statusbar"
37.         app:subtitleTextColor="@android:color/white"
38.         app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
39.         app:title=" "
40.         app:titleTextColor="@android:color/white">
41.     </androidx.appcompat.widget.Toolbar>
42.         <com.google.android.material.tabs.TabLayout
43.             android:layout_weight="6"
44.             android:id="@+id/tab_layout"
45.             android:layout_width="0dp"
46.             android:layout_height="wrap_content"
47.             app:tabIndicatorHeight="0dp"
48.             app:tabBackground="@color/transparent"
49.             app:tabRippleColor="@color/transparent"
50.             app:tabMode="fixed"
51.             app:tabGravity="fill">
52.             <com.google.android.material.tabs.TabItem
53.                 android:id="@+id/item_music"
54.                 android:layout_width="wrap_content"
55.                 android:layout_height="wrap_content">
57.             </com.google.android.material.tabs.TabItem>
58.             <com.google.android.material.tabs.TabItem
59.                 android:layout_width="wrap_content"
60.                 android:layout_height="wrap_content">
62.             </com.google.android.material.tabs.TabItem>
63.             <com.google.android.material.tabs.TabItem
64.                 android:layout_width="wrap_content"
65.                 android:layout_height="wrap_content">
66.             </com.google.android.material.tabs.TabItem>
68.         </com.google.android.material.tabs.TabLayout>
70.         <ImageView
71.             android:layout_weight="1"
72.             android:layout_width="0dp"
73.             android:layout_height="wrap_content"
74.             android:layout_gravity="center"
75.             android:src="@drawable/search"></ImageView>
76.     </LinearLayout>
77.     <TextView
78.         android:layout_width="wrap_content"
79.         android:layout_height="wrap_content"
80.         android:text="主页内容"
81.         app:layout_constraintBottom_toBottomOf="parent"
82.         app:layout_constraintLeft_toLeftOf="parent"
83.         app:layout_constraintRight_toRightOf="parent"
84.         app:layout_constraintTop_toTopOf="parent"/>
86.     <androidx.viewpager2.widget.ViewPager2
87.         android:id="@+id/viewpager2"
88.         android:layout_width="match_parent"
89.         android:layout_height="match_parent">
91.     </androidx.viewpager2.widget.ViewPager2>
93.     </LinearLayout>
94. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

3 left_menu xml 侧边栏内容

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     xmlns:tools="http://schemas.android.com/tools"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent"
8.     android:background="@android:color/white">
10.     <androidx.constraintlayout.widget.ConstraintLayout
11.         android:id="@+id/cl_head_view"
12.         android:layout_width="match_parent"
13.         android:layout_height="150dp"
14.         tools:ignore="MissingConstraints">
16.         <androidx.appcompat.widget.AppCompatImageView
17.             android:id="@+id/iv_head"
18.             android:layout_width="60dp"
19.             android:layout_height="60dp"
20.             android:src="@drawable/test1"
21.             app:layout_constraintBottom_toBottomOf="parent"
22.             app:layout_constraintLeft_toLeftOf="parent"
23.             app:layout_constraintRight_toRightOf="parent"
24.             app:layout_constraintTop_toTopOf="parent"/>
26.         <TextView
27.             android:layout_width="wrap_content"
28.             android:layout_height="wrap_content"
29.             android:layout_marginBottom="10dp"
30.             android:text="@string/User"
31.             android:textColor="@android:color/black"
32.             app:layout_constraintBottom_toBottomOf="parent"
33.             app:layout_constraintLeft_toLeftOf="parent"
34.             app:layout_constraintRight_toRightOf="parent"
35.             app:layout_constraintTop_toBottomOf="@+id/iv_head"/>
37.     </androidx.constraintlayout.widget.ConstraintLayout>
39.     <LinearLayout
40.         android:id="@+id/ll_android"
41.         android:layout_width="match_parent"
42.         android:layout_height="wrap_content"
43.         android:gravity="center_vertical"
44.         android:orientation="horizontal"
45.         android:padding="10dp"
46.         app:layout_constraintTop_toBottomOf="@+id/cl_head_view">
47.         <TextView
48.             android:layout_width="wrap_content"
49.             android:layout_height="wrap_content"
50.             android:drawablePadding="10dp"
51.             android:gravity="center"
52.             android:text="随机内容1"/>
53.     </LinearLayout>
55.     <LinearLayout
56.         android:id="@+id/ll_apple"
57.         android:layout_width="match_parent"
58.         android:layout_height="wrap_content"
59.         android:layout_marginTop="10dp"
60.         android:orientation="horizontal"
61.         android:padding="10dp"
62.         app:layout_constraintTop_toBottomOf="@+id/ll_android">
64.         <TextView
65.             android:layout_width="wrap_content"
66.             android:layout_height="wrap_content"
67.             android:drawablePadding="10dp"
68.             android:gravity="center"
69.             android:text="随机内容2"/>
70.     </LinearLayout>
72.     <LinearLayout
73.         android:layout_width="match_parent"
74.         android:layout_height="wrap_content"
75.         android:layout_marginTop="10dp"
76.         android:orientation="horizontal"
77.         android:padding="10dp"
78.         app:layout_constraintTop_toBottomOf="@+id/ll_apple">
79.         <TextView
80.             android:layout_width="wrap_content"
81.             android:layout_height="wrap_content"
82.             android:drawablePadding="10dp"
83.             android:gravity="center"
84.             android:text="随机内容3"/>
85.     </LinearLayout>
86. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

4 MainActivity java

1. import androidx.annotation.NonNull;
2. import androidx.appcompat.app.ActionBarDrawerToggle;
3. import androidx.appcompat.app.AppCompatActivity;
4. import androidx.appcompat.widget.Toolbar;
5. import androidx.constraintlayout.widget.ConstraintLayout;
6. import androidx.core.view.GravityCompat;
7. import androidx.drawerlayout.widget.DrawerLayout;
8. import androidx.viewpager2.widget.ViewPager2;
9. import android.os.Bundle;
10. import android.view.View;
11. import com.blueshark.bsplayer.R;
12. import com.blueshark.bsplayer.util.ScreenInfoUtils;
13. import com.google.android.material.tabs.TabLayout;
14. import com.google.android.material.tabs.TabLayoutMediator;
15. import com.nineoldandroids.view.ViewHelper;
17. public class MainActivity extends AppCompatActivity {
20.     private TabLayout tabLayout;
21.     private ViewPager2 viewPager2;
23.     @Override
24.     protected void onCreate(Bundle savedInstanceState) {
25.         super.onCreate(savedInstanceState);
27.         //初始化布局
28.         setContentView(R.layout.activity_main);
30.         //初始化侧边栏
31.         initsidebar();
33.         //初始化主页内容
34.         initcontent();
36.     }
38.     private void initsidebar() {
39.         //隐藏状态栏时，获取状态栏高度
40.         int statusBarHeight = ScreenInfoUtils.getStatusBarHeight(this);
41.         //隐藏状态栏
42.         ScreenInfoUtils.fullScreen(this);
43.         //初始化状态栏的高度
44.         View statusbar = (View) findViewById(R.id.view_statusbar);
45.         ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_PARENT, statusBarHeight);
46.         statusbar.setLayoutParams(params);
49.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
50.         final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
52.         setSupportActionBar(toolbar);//将toolbar与ActionBar关联
53.         ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
54.                 this, drawerLayout, toolbar, 0, 0);
55.         //设置侧边栏图标
56.         toggle.setDrawerIndicatorEnabled(false);
57.         toolbar.setNavigationIcon(R.drawable.user);
58.         //设置图标后点击事件会消失，重新设置点击事件
59.         toolbar.setNavigationOnClickListener(new View.OnClickListener() {
60.             @Override
61.             public void onClick(View view) {
62.                 drawerLayout.openDrawer(GravityCompat.START);
63.             }
64.         });
66.         drawerLayout.addDrawerListener(toggle);//初始化状态
67.         toggle.syncState();
70.         //蒙层颜色
71.         drawerLayout.setScrimColor(getResources().getColor(R.color.slidegray));
72.         drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
73.             @Override
74.             public void onDrawerStateChanged(int newState) {
75.             }
77.             @Override
78.             public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
79.                 View mContent = drawerLayout.getChildAt(0);
80.                 View mMenu = drawerView;
81.                 ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * slideOffset);
82.             }
84.             @Override
85.             public void onDrawerOpened(@NonNull View drawerView) {
86.             }
88.             @Override
89.             public void onDrawerClosed(@NonNull View drawerView) {
90.             }
91.         });
92.     }
94.     final String[] titleArray = new String[]{"测试1", "测试2", "测试3"};
95.     final int[] titleItem = new int[]{R.drawable.ic_test,R.drawable.ic_test,R.drawable.ic_test};
97.     private void initcontent() {
98.         tabLayout = findViewById(R.id.tab_layout);
99.         viewPager2 = findViewById(R.id.viewpager2);
100.         OuterPagerAdapter outerPagerAdapter = new OuterPagerAdapter(this);
101.         viewPager2.setAdapter(outerPagerAdapter);
102.         //TabLayout 和 Viewpager2 关联
103.         TabLayoutMediator tab = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
104.             @Override
105.             public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
106.             //若settext会在图标下方出现文字
107. //                tab.setText(titleArray[position]);
108.                 tab.setIcon(titleItem[position]);
109.             }
110.         });
111.         tab.attach();
112.     }
113. }

复制代码

OuterPagerAdapter 和 DynamicFragment 都写得比较简朴，可以根据需求自行扩充
5 OuterPagerAdapter java

1. import androidx.annotation.NonNull;
2. import androidx.fragment.app.Fragment;
3. import androidx.fragment.app.FragmentActivity;
4. import androidx.viewpager2.adapter.FragmentStateAdapter;
6. import java.util.ArrayList;
7. import java.util.List;
9. public class OuterPagerAdapter extends FragmentStateAdapter {
10.     private final List<Fragment> fragments = new ArrayList<>();
12.     public OuterPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
13.         super(fragmentActivity);
14.         fragments.add(new DynamicFragment());
15.         fragments.add(new DynamicFragment());
16.         fragments.add(new DynamicFragment());
18.     }
20.     @NonNull
21.     @Override
22.     public Fragment createFragment(int position) {
23.         return fragments.get(position);
24.     }
26.     @Override
27.     public int getItemCount() {
28.         return fragments.size();
29.     }
30. }

复制代码

6 DynamicFragment java

xml只有一个textview，就不再贴了

1. import android.os.Bundle;
2. import android.os.Handler;
3. import android.view.LayoutInflater;
4. import android.view.View;
5. import android.view.ViewGroup;
7. import androidx.annotation.NonNull;
8. import androidx.annotation.Nullable;
9. import androidx.fragment.app.Fragment;
10. public class DynamicFragment extends Fragment {
13.     public static DynamicFragment newInstance(String title) {
14.         DynamicFragment fragment = new DynamicFragment();
16.         return fragment;
17.     }
19.     @Nullable
20.     @Override
21.     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
22.         View view = inflater.inflate(R.layout.fragment_dynamic, container, false);
23.         return view;
24.     }
26. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。