首先上效果图：


先说一下toolbar上的箭头实现： 
     
          
  1. // 这两句显示左边的三条杠，如果要变为白色在toolbar的布局文件里添加这两句：
    2.       
  2. // android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    3.       
  3. // app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    4.       
  4. getSupportActionBar().setHomeButtonEnabled(true);
    5.       
  5. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    6.      
             只需要两句代码就可以显示箭头，但默认的颜色是黑色的，要想变成白色，就在toolbar的布局文件中添加注释的两句代码即可。             
             下面就是Drawer的实现了。             先贴一下toolbar的布局，因为它适合drawer联动的，等会要用到它，至于为什么单独放一个文件中，说是这样可以提高复用率。                   
      
           
  1. <?xml version="1.0" encoding="utf-8"?>
    2.        
  2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    3.        
  3.  xmlns:app="http://schemas.android.com/apk/res-auto"
    4.        
  4.  android:layout_width="match_parent"
    5.        
  5.  android:layout_height="wrap_content"
    6.        
  6.  android:id="@+id/toolbar"
    7.        
  7.  android:background="?attr/colorPrimary"
    8.        
  8.  android:minHeight="?attr/actionBarSize"
    9.        
  9.  android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    10.        
  10.  app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    11.        
  11.  >
    12.        
    13.        
  13. android.support.v7.widget.Toolbar>
    14.       
                接着是DrawerLayout的布局，因为它也是一个组件，所以可以在布局文件中使用。                        
      
           
  1. <?xml version="1.0" encoding="utf-8"?>
    2.        
  2. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.        
  3.  android:layout_width="match_parent"
    4.        
  4.  android:layout_height="match_parent"
    5.        
  5.  android:id="@+id/drawer_layout">
    6.        
  6.  <LinearLayout
    7.        
  7.  android:id="@+id/ll_content"
    8.        
  8.  android:layout_width="match_parent"
    9.        
  9.  android:layout_height="match_parent">
    10.        
    11.        
  11.  LinearLayout>
    12.        
    13.        
  13.  <LinearLayout
    14.        
  14.  android:id="@+id/ll_drawer"
    15.        
  15.  android:layout_width="240dp"
    16.        
  16.  android:layout_height="match_parent"
    17.        
  17.  android:layout_gravity="start"
    18.        
  18.  android:background="@android:color/white">
    19.        
  19.  <ListView
    20.        
  20.  android:id="@+id/lv_drawer"
    21.        
  21.  android:layout_width="240dp"
    22.        
  22.  android:layout_height="match_parent"
    23.        
  23.  android:divider="@null"
    24.        
  24.  />
    25.        
  25.  LinearLayout>
    26.        
    27.        
  27. android.support.v4.widget.DrawerLayout>
    28.       
                从上面的代码可以看出，DrawerLayout实在v4包中的。将它作为根布局使用，其中上面一个线性布局作为主界面的容器，下面的一个是作为侧滑菜单内容的容器。      要强调的一点是：在下面的LinearLayout中要添加                
      
           
  1. android:layout_gravity="start"
    2.       
                这个属性，才能将它作为侧滑菜单内容的容器，否则其会覆盖上面的LinearLayout。                  将上面两个布局用include属性引入MainActivity的布局文件：                   
      
           
  1. <?xml version="1.0" encoding="utf-8"?>
    2.        
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.        
  3.  android:fitsSystemWindows="true"
    4.        
  4.  android:layout_width="match_parent"
    5.        
  5.  android:layout_height="match_parent"
    6.        
  6.  android:orientation="vertical">
    7.        
  7.  <include layout="@layout/layout_toolbar"/>
    8.        
    9.        
  9.  <include layout="@layout/layout_drawer"/>
    10.        
  10. LinearLayout>
    11.       
                接下来就要在代码中做相关操作了。                  首先，先获取toolbar和DrawerLayout的引用：                   
      
           
  1. toolbar = (Toolbar) findViewById(R.id.toolbar);
    2.        
  2. setSupportActionBar(toolbar);
    3.        
  3. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    4.       
                然后创建抽屉的开关，将toolbar和DrawerLayout作为参数传递给它：                        
      
           
  1. mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
    2.       
                通过下面这句实现toolbar和Drawer的联动：                        
      
           
  1. mToggle.syncState();
    2.       
                如果没有上面的代码，箭头是不会随着侧滑菜单的开关而变换的，具体的可以自己试验一下。                  最后给DrawerLayout设置开关的监听：                   
      
           
  1. mDrawerLayout.addDrawerListener(mToggle);
    2.       
                这样就可以实现开头的图片效果了。                  
             下面说一下用Fragment实现点击侧滑菜单项变换页面的效果。             首先定义三个布局，             
     
          
  1. <?xml version="1.0" encoding="utf-8"?>
    2.       
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.       
  3.  android:orientation="vertical" android:layout_width="match_parent"
    4.       
  4.  android:layout_height="match_parent">
    5.       
    6.       
  6.  <TextView
    7.       
  7.  android:layout_width="match_parent"
    8.       
  8.  android:layout_height="match_parent"
    9.       
  9.  android:text="news"
    10.       
  10.  android:gravity="center"
    11.       
  11.  android:textSize="29sp"
    12.       
  12.  />
    13.       
    14.       
  14. LinearLayout>
    15.      
             三个长得差不多，就贴一个了。             再定义三个Fragment继承自Fragment也可以继承v4包的，我这里继承的不是v4包里的。                   
      
           
  1. public class NewsFragment extends Fragment {
    2.        
    3.        
  3.  @Nullable
    4.        
  4.  @Override
    5.        
  5.  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    6.        
    7.        
  7.  return inflater.inflate(R.layout.fragment_news, container, false);
    8.        
  8.  }
    9.        
  9. }
    10.       
                恩，也贴一个吧，反正都差不多。                  下面是MainActivity中的相关操作：             首先我让MainActivity中的容器默认添加NewsFragment：                   
      
           
  1.  // 主页面默认添加NewsFragment
    2.        
  2.  fragmentManager = getFragmentManager();
    3.        
  3.  fragmentManager.beginTransaction().add(R.id.ll_content, new NewsFragment()).commit();
    4.       
                其次获取侧滑菜单列表的引用，并设置数据和item点击事件：      
                        
      
           
  1. lv_drawer = (ListView) findViewById(R.id.lv_drawer);
    2.        
  2. mAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, items);
    3.        
  3. lv_drawer.setAdapter(mAdapter);
    4.        
  4. ll_drawer = (LinearLayout) findViewById(R.id.ll_drawer);
    5.        
  5. lv_drawer.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    6.        
  6.  @Override
    7.        
  7.  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    8.        
  8.  switchFragment(position);
    9.        
  9.  }
    10.        
  10.  });
    11.       
                能看到在上面的点击事件方法中调用了switchFragment方法，用于切换Framment，从而实现页面变换。其具体定义：                        
      
           
  1.  // 根据所点列表项的下标，切换fragment
    2.        
  2.  @Override
    3.        
  3.  public void switchFragment(int fragmentId) {
    4.        
  4.  mDrawerLayout.closeDrawer(ll_drawer);
    5.        
  5.  if(currentFragmentId == fragmentId)
    6.        
  6.  return;
    7.        
  7.  currentFragmentId = fragmentId;
    8.        
  8.  FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    9.        
  9.  switch (fragmentId)
    10.        
  10.  {
    11.        
  11.  case 0:
    12.        
  12.  fragmentTransaction.replace(R.id.ll_content, new NewsFragment());
    13.        
  13.  toolbar.setTitle("新闻资讯");
    14.        
  14.  break;
    15.        
  15.  case 1:
    16.        
  16.  fragmentTransaction.replace(R.id.ll_content, new VideoFragment());
    17.        
  17.  toolbar.setTitle("视频");
    18.        
  18.  break;
    19.        
  19.  case 2:
    20.        
  20.  fragmentTransaction.replace(R.id.ll_content, new WeatherFragment());
    21.        
  21.  toolbar.setTitle("天气");
    22.        
  22.  break;
    23.        
  23.  }
    24.        
  24.  fragmentTransaction.commit();
    25.        
  25.  }
    26.       
                解释一下，其中的currentFragmentId表示当前正在显示的Fragment的编号，我是根据侧滑菜单项的下标指定其编号的。方法的第一句代码实现了关闭菜单的功能，其中的参数ll_drawer就是菜单内容容器的引用。然后判断所点菜单项的下标是否等于当前显示的Fragment的id，如果是，则返回，不是，则修改currentFragmentId为当前点击项的下标，最后通过FragmentTransaction的replace方法实现页面变换。                   
          源码地址： https://github.com/miyuexingchen/Swen







更多相关文章
	

    

  1. Android(安卓)Inflate方法
  2. Android(安卓)自定义RecyclerView 实现真正的Gallery效果
  3. Android(安卓)listview 实现列表多选
  4. Android_Layout_xml布局
  5. Android-基本控件（五大布局 Layout）
  6. Android(安卓)ListView展示不同的布局
  7. Android(安卓)模仿renren的左右划动菜单栏
  8. RemoteViews用法一：widget简单用法
  9. [置顶] Android(安卓)SimpleAdapter，SimpleCursorAdapter，ArrayAda



随机推荐
	

    

  1. 
Android关于LinearLayout和RelativeLayou
    2. 

  2. 
Android的介绍
    3. 

  3. 
Android(安卓)仿抖音视频播放列表和评论
    4. 

  4. 
创建Android工程
    5. 

  5. 
百度招聘Android客服端(1)
    6. 

  6. 
android控件布局
    7. 

  7. 
在Android上玩google-breakpad（崩溃日志收
    8. 

  8. 
Android(安卓)出现 OutOfMemoryError 的
    9. 

  9. 
android ConfigChanges
    10. 

  10. 
android Service Activity三种交互方式（付
    11.