使用drawerlayout 布局点击切换fragment
1: 新建一个empty activity
2: Gradle(app) 添加依赖
implementation 'com.android.support:design:28.0.0'
3: 添加drawer中的菜单
选择Meun类型的数据,添加item
item 必须要有title和id
1 <?xml version="1.0" encoding="utf-8"?> 2 <menu xmlns:android="http://schemas.android.com/apk/res/android"> 3 <group> 4 <item android:title="个人中心" android:id="@+id/account"></item> 5 <item android:title="红绿灯控制" android:id="@+id/trafficControl"></item> 6 <item android:title="查看违章" android:id="@+id/violation"></item> 7 </group> 8 </menu>
4: android 自带的toolbar不能满足需求,我们自己创建一个
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="100dp" android:background="@color/colorPrimary" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher_foreground" android:layout_gravity="center" /> </LinearLayout>
4.2: 在style中修改新toolsbar的属性 (重要一定要添加,不然后面的步骤会报错)
1 <style name="AppTheme.NoActionBar"> 2 <item name="windowActionBar">false</item> 3 <item name="windowNoTitle">true</item> 4 </style>
4.3: 在Android Manifest添加进我们新写的属性
android:theme="@style/AppTheme.NoActionBar">
4.4: 在values -> strings 中添加新的元素为toolbar的使用准备
1 <string name="close">close</string> 2 <string name="open">open</string>
5: 编写主页布局
几个重要元素
1: android.support.v4.widget.DrawerLayout //主布局,写在最外层
2: android.support.v7.widget.Toolbar // 我们要修改的toolbar布局
3: FrameLayout //用来切换fragment的布局
4: android.support.design.widget.NavigationView //显示抽题布局的导航栏
5: tools:openDrawer="start" //在编写xml的时候可以预览drawer的效果
1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 xmlns:tools="http://schemas.android.com/tools" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 tools:context=".MainActivity" 8 tools:openDrawer="start" 9 android:id="@+id/drawerLayout" 10 > 11 <LinearLayout 12 android:layout_width="match_parent" 13 android:layout_height="match_parent" 14 android:orientation="vertical"> 15 <android.support.v7.widget.Toolbar 16 android:id="@+id/toolbar" 17 android:layout_width="match_parent" 18 android:layout_height="?attr/actionBarSize" 19 android:background="@color/colorPrimary" 20 android:elevation="4dp" 21 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 22 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 23 <FrameLayout 24 android:id="@+id/fragment_Container" 25 android:layout_width="match_parent" 26 android:layout_height="match_parent" 27 /> 28 </LinearLayout> 29 <android.support.design.widget.NavigationView 30 android:id="@+id/nav_view" 31 android:layout_width="wrap_content" 32 android:layout_height="match_parent" 33 android:layout_gravity="start" 34 app:headerLayout="@layout/navigation_header" 35 app:menu="@menu/navigation_menu" 36 > 37 </android.support.design.widget.NavigationView> 38 </android.support.v4.widget.DrawerLayout>
6: 编写fragment的xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:gravity="center" 6 > 7 <LinearLayout 8 android:layout_width="match_parent" 9 android:layout_height="match_parent" 10 android:layout_centerInParent="true" 11 android:gravity="center" 12 android:orientation="vertical"> 13 14 <LinearLayout 15 android:layout_width="match_parent" 16 android:layout_height="100dp" 17 android:orientation="horizontal"> 18 19 <TextView 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 22 android:text="账户余额: " 23 android:textSize="25dp" 24 android:textStyle="bold" /> 25 26 <TextView 27 android:id="@+id/balance_text" 28 android:layout_width="wrap_content" 29 android:layout_height="wrap_content" 30 android:text="55元" 31 android:textSize="25dp" 32 android:textStyle="bold" /> 33 </LinearLayout> 34 35 36 <LinearLayout 37 android:layout_width="match_parent" 38 android:layout_height="100dp" 39 android:layout_marginTop="25dp" 40 android:orientation="horizontal"> 41 42 <TextView 43 android:layout_width="wrap_content" 44 android:layout_height="wrap_content" 45 android:layout_gravity="center" 46 android:text="车 号: " 47 android:textSize="25dp" 48 android:textStyle="bold" /> 49 50 <Spinner 51 android:id="@+id/CarId_spinner" 52 android:layout_width="90dp" 53 android:layout_height="25dp" 54 android:layout_gravity="center" 55 android:entries="@array/carnumber"></Spinner> 56 </LinearLayout> 57 58 <LinearLayout 59 android:layout_width="match_parent" 60 android:layout_height="100dp" 61 android:layout_marginTop="25dp" 62 android:orientation="horizontal"> 63 64 <TextView 65 android:layout_width="wrap_content" 66 android:layout_height="wrap_content" 67 android:layout_gravity="center" 68 android:text="充值金额: " 69 android:textSize="25dp" 70 android:textStyle="bold" /> 71 72 <EditText 73 android:id="@+id/charge_edit" 74 android:layout_width="100dp" 75 android:layout_height="25dp" 76 android:layout_gravity="center" /> 77 78 </LinearLayout> 79 80 <LinearLayout 81 android:layout_width="match_parent" 82 android:layout_height="100dp" 83 android:orientation="horizontal"> 84 85 <Button 86 android:id="@+id/query_btn" 87 android:layout_width="wrap_content" 88 android:layout_height="match_parent" 89 android:layout_marginRight="25dp" 90 android:text="查询金额" 91 android:textSize="25dp" 92 android:textStyle="bold" /> 93 94 <Button 95 android:id="@+id/charge_btn" 96 android:layout_width="wrap_content" 97 android:layout_height="match_parent" 98 android:text="充值金额" 99 android:textSize="25dp" 100 android:textStyle="bold" /> 101 102 </LinearLayout> 103 104 </LinearLayout> 105 </RelativeLayout>
7: 做好了先前的准备工作,现在开始编写底层java代码实现点击drawer中的item切换fragment
1 package com.example.national5_05; 2 3 import android.os.Bundle; 4 import android.support.annotation.NonNull; 5 import android.support.design.widget.NavigationView; 6 import android.support.v4.view.GravityCompat; 7 import android.support.v4.widget.DrawerLayout; 8 import android.support.v7.app.ActionBarDrawerToggle; 9 import android.support.v7.app.AppCompatActivity; 10 import android.support.v7.widget.Toolbar; 11 import android.view.MenuItem; 12 13 14 public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { 15 16 DrawerLayout drawerLayout; 17 18 @Override 19 protected void onCreate(Bundle savedInstanceState) { 20 super.onCreate(savedInstanceState); 21 setContentView(R.layout.activity_main); 22 23 //将控件首先实例化 24 drawerLayout = findViewById(R.id.drawerLayout); 25 Toolbar toolbar = findViewById(R.id.toolbar); 26 NavigationView navigationView = findViewById(R.id.nav_view); 27 navigationView.setNavigationItemSelectedListener(this); 28 29 //添加自己编写的toolbar 30 setSupportActionBar(toolbar); 31 32 //给drawer加上Toggle Button实现来回切换的效果,不然的话drawer只能抽出不能回去 33 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close); 34 drawerLayout.addDrawerListener(toggle); 35 toggle.syncState(); 36 37 //初始化情况下打开black Fragment,判断之前是否有打开过,如果没有默认打开account界面. 38 if (savedInstanceState == null) { 39 getSupportFragmentManager().beginTransaction().replace(R.id.fragment_Container, new fragment_account()).commit(); 40 navigationView.setCheckedItem(R.id.account); 41 } 42 } 43 44 @Override 45 public void onBackPressed() { 46 if (drawerLayout.isDrawerOpen(GravityCompat.START)) { 47 48 drawerLayout.closeDrawer(GravityCompat.START); 49 } else { 50 super.onBackPressed(); 51 } 52 } 53 54 @Override 55 public boolean onNavigationItemSelected(@NonNull MenuItem item) { 56 57 switch (item.getItemId()) { 58 case R.id.account: 59 getSupportFragmentManager().beginTransaction().replace(R.id.fragment_Container, new fragment_account()).commit();
//切换fragment的方法 60 break; 61 case R.id.trafficControl: 62 getSupportFragmentManager().beginTransaction().replace(R.id.fragment_Container, new fragment_TrafficControl()).commit(); 63 break; 64 } 65 drawerLayout.closeDrawer(GravityCompat.START); 66 return true; 67 } 68 }