Android开发网

首页|Android开发环境|Android开发教程|Android开发视频|Android游戏开发|Android开发实例|Android开发书籍|鸡啄米博客

带你实现开发者头条（二） 实现左滑菜单

　　今天开始模仿开发者头条的侧滑菜单，是本系列第二篇文章，相信大家已经看到很多app使用这种侧滑。今天我来教大家用Android自带DrawerLayout控件实现。

　　DrawerLayout是SupportLibrary包中实现了侧滑菜单效果的控件，可以说DrawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

　　一、先上效果图：

带你实现开发者头条（二） 实现左滑菜单

　　二、代码实现

　　1.drawerLayout其实是一个布局控件，跟LinearLayout等控件是一种东西，但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。我这边把侧滑菜单的内容放一个布局文件了。

XML/HTML代码
  1. <android.support.v4.widget.DrawerLayout   
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/drawer_layout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <RelativeLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:clipToPadding="true"  
  11.         android:fitsSystemWindows="true" >  
  12.   
  13.         <include  
  14.             android:id="@+id/rl_title"  
  15.             layout="@layout/layout_main_title" />  
  16.   
  17.         <!-- The main content view -->  
  18.   
  19.         <FrameLayout  
  20.             android:id="@+id/content_frame"  
  21.             android:layout_width="match_parent"  
  22.             android:layout_height="match_parent"  
  23.             android:layout_below="@+id/rl_title"  
  24.             android:background="@color/white_normal" >  
  25.         </FrameLayout>  
  26.     </RelativeLayout>  
  27.   
  28.     <!-- The navigation view -->  
  29.     <FrameLayout  
  30.         android:id="@+id/left_drawer"  
  31.         android:layout_width="280dp"  
  32.         android:layout_height="match_parent"  
  33.         android:layout_gravity="start" >  
  34.         <!--   左侧菜单 -->  
  35.         <include layout="@layout/layout_main_left" />  
  36.     </FrameLayout>  
  37. </android.support.v4.widget.DrawerLayout>  

　　注意事项

　　主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主内容区

　　侧滑菜单的部分的布局（这里是ListView）可以设置layout_gravity属性，他表示侧滑菜单是在左边还是右边。

　　2.MainActivity.java 继承FragmentActivity

　　1).设置内容Fragment，设置状态栏

　　2).处理左侧点击事件,在点击事件中设置选中背景，关闭左边侧滑菜单。

Java代码
  1. public class MainActivity extends FragmentActivity{  
  2.     private DrawerLayout mDrawerLayout;  
  3.     private RelativeLayout rlHome, rlGift, rlShare;  
  4.     private int currentSelectItem = R.id.rl_home;// 默认首页  
  5.     private ContentFragment contentFragment;  
  6.   
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_main);  
  11.   
  12.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
  13.   
  14.         findViewById(R.id.iv_menu).setOnClickListener(clickListener);  
  15.   
  16.         initLeftMenu();//初始化左边菜单  
  17.   
  18.         contentFragment=new ContentFragment();  
  19.         getSupportFragmentManager().beginTransaction().add(R.id.content_frame,contentFragment).commit();    
  20.   
  21.         setWindowStatus();  
  22.     }  
  23.   
  24.     private void initLeftMenu() {  
  25.         rlHome = (RelativeLayout) findViewById(R.id.rl_home);  
  26.         rlGift = (RelativeLayout) findViewById(R.id.rl_gift);  
  27.         rlShare = (RelativeLayout) findViewById(R.id.rl_share);  
  28.   
  29.         rlHome.setOnClickListener(onLeftMenuClickListener);  
  30.         rlGift.setOnClickListener(onLeftMenuClickListener);  
  31.         rlShare.setOnClickListener(onLeftMenuClickListener);  
  32.   
  33.         rlHome.setSelected(true);  
  34.     }  
  35.   
  36.     private OnClickListener onLeftMenuClickListener = new OnClickListener() {  
  37.         @Override  
  38.         public void onClick(View v) {  
  39.             if (currentSelectItem != v.getId()) {//防止重复点击  
  40.                 currentSelectItem=v.getId();  
  41.                 noItemSelect();  
  42.   
  43.                 switch (v.getId()) {  
  44.                 case R.id.rl_home:  
  45.                     rlHome.setSelected(true);  
  46.                     contentFragment.setContent("这是首页");  
  47.                     break;  
  48.                 case R.id.rl_gift:  
  49.                     rlGift.setSelected(true);  
  50.                     contentFragment.setContent("这是礼物兑换");  
  51.                     break;  
  52.                 case R.id.rl_share:  
  53.                     rlShare.setSelected(true);  
  54.                     contentFragment.setContent("这是我的分享");  
  55.                     break;  
  56.                 }  
  57.   
  58.                 mDrawerLayout.closeDrawer(Gravity.LEFT);  
  59.             }  
  60.         }  
  61.     };  
  62.   
  63.     private void noItemSelect(){  
  64.         rlHome.setSelected(false);  
  65.         rlGift.setSelected(false);  
  66.         rlShare.setSelected(false);  
  67.     }  
  68.   
  69.     private OnClickListener clickListener = new OnClickListener() {  
  70.         @Override  
  71.         public void onClick(View v) {  
  72.             switch (v.getId()) {  
  73.             case R.id.iv_menu:// 打开左边抽屉  
  74.                 mDrawerLayout.openDrawer(Gravity.LEFT);  
  75.                 break;  
  76.             }  
  77.         }  
  78.     };  
  79.   
  80.     // 设置状态栏  
  81.     private void setWindowStatus() {  
  82.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  
  83.             // 透明状态栏  
  84.             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
  85.             // 透明导航栏  
  86.             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  
  87.             // 设置状态栏颜色  
  88.             getWindow().setBackgroundDrawableResource(R.color.main_color);  
  89.         }  
  90.     }  
  91. }  

　　3.左侧菜单item选中背景的布局文件 selector_left_menu_item.xml。

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <item android:drawable="@color/menu_left_item_select" android:state_selected="true"/>  
  4.     <item android:drawable="@color/white_normal"/>  
  5. </selector>  

　　4.ContentFragment 显示内容的Fragment 这里我加了一个设置内容的方法，就是用来点击左侧切换显示用的。

Java代码
  1. public class ContentFragment extends Fragment{  
  2.     private TextView tvContent;  
  3.   
  4.     @Override  
  5.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){  
  6.         View rootView=LayoutInflater.from(getActivity()).inflate(R.layout.fragment_content, null);  
  7.         tvContent=(TextView) rootView.findViewById(R.id.tv_content);  
  8.         return rootView;  
  9.     }  
  10.   
  11.     public void setContent(String content){  
  12.         tvContent.setText(content);  
  13.     }  
  14. }  

　　5.drawerLayout与Fragment是什么关系？

　　我们看到很多使用drawerLayout的代码中都同时使用了Fragment，这会造成误解，以为使用drawerLayout必须用到Fragment，其实这是错误的，使用Fragment是因为在侧滑菜单被点击的时候，主内容区如果内容比较复杂，用Fragment去填充会更容易，如果你的主内容区只是一个简单的字符串，只想在不同菜单点击的时候更新一下字符串的内容，我觉得没必要用Fragment。我这边用Fragment所做的就是更新字符串内容这么简单。

　　三、源码下载

　　点击下载源码

　　四、相关文章:

　　带你实现开发者头条(一) 启动页实现

Tags:Fragment,Layout | 2016/5/6 | 发表评论

相关文章: