Android在抽题布局中切换fragment-案例01

 

使用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 }

 

posted @ 2019-05-09 22:21  kevin162726  阅读(267)  评论(0)  编辑  收藏  举报