devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

利用DrawLayout和Fragment实现左右侧滑菜单_android侧滑菜单栏实现:drawerlayout+fragment

作者：从前慢现在也慢 | 2024-03-21 08:06:16

赞

踩

android侧滑菜单栏实现:drawerlayout+fragment

利用Fragment实现界面左右滑动后显示侧滑的菜单，效果图如下：

方案一：利用

方案一：一个布局完成（左右抽屉布局与中间布局在同一个布局文件中）

布局：draw_activity_layouot.xml

  1. <android.support.v4.widget.DrawerLayout
  2.     android:id="@+id/main_activity_drawerLayout"
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/white"
  7.     android:orientation="vertical">
  8.  
  9.     <FrameLayout
  10.         android:id="@+id/main_activity_container"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent">
  13.     </FrameLayout>
  14.  
  15. <!--左边抽屉，在这里一定要设置layout_gravity="start"  ，并且宽度不能超过320dp-->
  16.     <LinearLayout
  17.         android:id="@+id/left_draw_layout"
  18.         android:layout_width="100dp"
  19.         android:layout_height="match_parent"
  20.         android:layout_gravity="start"
  21.         android:background="@android:color/holo_blue_dark"
  22.         android:orientation="vertical">
  23.  
  24.         <LinearLayout
  25.             android:id="@+id/layout1"
  26.             android:layout_width="wrap_content"
  27.             android:layout_height="wrap_content">
  28.  
  29.             <ImageView
  30.                 android:layout_width="80dip"
  31.                 android:layout_height="80dip"
  32.                 android:src="@drawable/a"/>
  33.         </LinearLayout>
  34.  
  35.         <LinearLayout
  36.             android:id="@+id/layout2"
  37.             android:layout_width="wrap_content"
  38.             android:layout_height="wrap_content">
  39.  
  40.             <ImageView
  41.                 android:layout_width="80dip"
  42.                 android:layout_height="80dip"
  43.                 android:src="@drawable/b"/>
  44.         </LinearLayout>
  45.  
  46.         <LinearLayout
  47.             android:id="@+id/layout3"
  48.             android:layout_width="wrap_content"
  49.             android:layout_height="wrap_content">
  50.  
  51.             <ImageView
  52.                 android:layout_width="80dip"
  53.                 android:layout_height="80dip"
  54.                 android:src="@drawable/c"/>
  55.         </LinearLayout>
  56.     </LinearLayout>
  57.     <!--右边抽屉，在这里一定要设置layout_gravity="end"  ，并且宽度不能超过320dp-->
  58.     <LinearLayout
  59.         android:id="@+id/right_draw_layout"
  60.         android:layout_width="100dp"
  61.         android:layout_height="match_parent"
  62.         android:layout_gravity="end"
  63.         android:background="@android:color/holo_green_dark"
  64.         android:orientation="vertical">
  65.         <!--此处可设置右边抽屉的布局-->
  66.     </LinearLayout>
  67.  
  68. </android.support.v4.widget.DrawerLayout>
  1. <span style="font-family: Arial, Helvetica, sans-serif;">
  2. </span>
<span style="font-family: Arial, Helvetica, sans-serif;">LDrawActivity</span>

  1. package learnbroadcast.ld.com.broadcastdemo;
  2.  
  3. import android.os.Bundle;
  4. import android.support.v4.app.FragmentActivity;
  5. import android.support.v4.app.FragmentManager;
  6. import android.support.v4.widget.DrawerLayout;
  7. import android.support.v4.widget.DrawerLayout.DrawerListener;
  8. import android.view.Gravity;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.Toast;
  12.  
  13. public class LDrawActivity extends FragmentActivity implements DrawerListener ,OnClickListener{
  14.     private DrawerLayout mDrawerLayout;//抽屉菜单
  15.     private boolean isOpenDrawlayout=false;//是否打开抽屉
  16.     private FragmentManager fragmentManager=getSupportFragmentManager();;
  17.  
  18.     @Override
  19.     protected void onCreate(Bundle savedInstanceState) {
  20.         super.onCreate(savedInstanceState);
  21.         setContentView(R.layout.draw_activity_layouot);
  22.         mDrawerLayout = (DrawerLayout) findViewById(R.id.main_activity_drawerLayout);
  23.         initDrawLayout();
  1.         //初始化中间布局
  2.         Fragment3  fragment3=new Fragment3();
  3.         fragmentManager.beginTransaction().replace(R.id.main_activity_container, fragment3).commit();
  4.     }
  5.     //左边抽屉监听
  6.     private void initDrawLayout() {
  7.         mDrawerLayout.setDrawerListener(this);
  8.         findViewById(R.id.layout1).setOnClickListener(this);
  9.         findViewById(R.id.layout2).setOnClickListener(this);
  10.         findViewById(R.id.layout3).setOnClickListener(this);
  11.     }
  12.     // ----------------------实现抽屉的监听事件------------------------
  13.     @Override
  14.     public void onDrawerSlide(View drawerView, float slideOffset) {
  15.     }
  16.     @Override
  17.     public void onDrawerOpened(View drawerView) {
  18.         isOpenDrawlayout=true;
  19.     }
  20.     @Override
  21.     public void onDrawerClosed(View drawerView) {
  22.         isOpenDrawlayout=false;
  23.     }
  24.     @Override
  25.     public void onDrawerStateChanged(int newState) {
  26.     }
  27.     @Override
  28.     public void onClick(View v) {
  29.         switch(v.getId()){
  30.             case R.id.layout1:
<pre name="code" class="java">               //点击的时候切换中间的布局
Toast.makeText(LDrawActivity.this, "点击了第一个美女", Toast.LENGTH_SHORT).show(); Fragment1 fragment1=new Fragment1(); 
 

  1.                 fragmentManager.beginTransaction().replace(R.id.main_activity_container, fragment1).commit();
  2.                 mDrawerLayout.closeDrawer(Gravity.LEFT);
  3.                 break;
  4.             case R.id.layout2:
 

<pre name="code" class="java">             //点击的时候切换中间的布局
 Toast.makeText(LDrawActivity.this,"点击了第二个美女",Toast.LENGTH_SHORT).show(); Fragment2 fragment2=new Fragment2(); fragmentManager.beginTransaction().replace(R.id.main_activity_container, fragment2).commit(); mDrawerLayout.closeDrawer(Gravity.LEFT); break; case R.id.layout3: Toast.makeText(LDrawActivity.this,"点击了第三个美女",Toast.LENGTH_SHORT).show(); mDrawerLayout.closeDrawer(Gravity.LEFT); break; } }} 

 

 

点击下方的左边按钮就会显示左边的侧滑按钮，向右滑动手势也可以打开左侧的侧滑菜单，同理右边的侧滑菜单也是同样的，具体结构如下：
 

方案二：左右抽屉布局独立出来，通过代码加到主界面
 

 

 MainActivity extends FragmentActivity
 

 3个XML布局文件
 

 activity_main       中间主界面布局
 

 left_menu_layout    左边侧滑菜单布局
 

 
 

 right_menu_layout   右边侧滑菜单布局
 

 
 

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.    
  6.    >
  7. <android.support.v4.widget.DrawerLayout
  8.         android:id="@+id/main_drawer_layout"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         >
  12.  
  13.         <!-- 中间内容 -->
  14.  
  15.         <FrameLayout
  16.             android:id="@+id/main_content_frame_parent"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent" >
  19.         </FrameLayout>
  20.         <!-- 左侧滑动栏 -->
  21.  
  22.         <RelativeLayout
  23.             android:id="@+id/main_left_drawer_layout"
  24.             android:layout_width="240dp"
  25.             android:layout_height="match_parent"
  26.             android:layout_gravity="left"
  27.             android:background="@android:color/transparent"
  28.             android:paddingBottom="50dip" >
  29.         </RelativeLayout>
  30.         <!-- 右侧滑动栏 -->      
  31.          <RelativeLayout
  32.             android:id="@+id/main_right_drawer_layout"
  33.             android:layout_width="240dp"
  34.             android:layout_height="match_parent"
  35.             android:layout_gravity="right"
  36.             android:background="@android:color/transparent"
  37.             android:paddingBottom="50dp" />
  38.     </android.support.v4.widget.DrawerLayout>
  39.      <Button android:id="@+id/left_btn"
  40.               android:layout_width="wrap_content"
  41.               android:layout_height="wrap_content"
  42.               android:layout_alignParentBottom="true"
  43.               android:layout_alignParentLeft="true"
  44.               android:text="左边"/>
  45.      <Button android:id="@+id/right_btn"
  46.               android:layout_width="wrap_content"
  47.               android:layout_height="wrap_content"
  48.               android:layout_alignParentBottom="true"
  49.               android:layout_alignParentRight="true"
  50.               android:text=" 右边"/>
  51.     </RelativeLayout>
 

 

  1. <pre name="code" class="java">package com.example.ldclient;
  2.  
  3.  
  4. import android.annotation.SuppressLint;
  5. import android.os.Bundle;
  6. import android.support.v4.app.ActionBarDrawerToggle;
  7. import android.support.v4.app.FragmentActivity;
  8. import android.support.v4.widget.DrawerLayout;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.Button;
  12. import android.widget.ImageView;
  13. import android.widget.LinearLayout;
  14. import android.widget.RelativeLayout;
  15. import android.widget.TextView;
  16.  
  17.  
  18. //      
  19. @SuppressWarnings("deprecation")
  20. @SuppressLint({ "ClickableViewAccessibility", "InflateParams", "HandlerLeak" })
  21. public class MainActivity extends FragmentActivity {
  22.  
  23. 	private RelativeLayout main_left_drawer_layout;
  24. 	private RelativeLayout main_right_drawer_layout;
  25. 	private ActionBarDrawerToggle drawerbar; // 抽屉菜单对象
  26. 	// 左侧菜单资源属性
  27. 	private ImageView backQuan;
  28. 	private ImageView userPhoto; // 用户头像
  29. 	private RelativeLayout mUserPhotoLayout;
  30. 	private RelativeLayout mUserMoney;
  31. 	private LinearLayout mMyOrderLayout;
  32. 	private LinearLayout mRecentViewLayout;
  33. 	private LinearLayout mMyMessageLayout;
  34. 	private LinearLayout mHelpLayout;
  35. 	private LinearLayout mAboutUsLayout;
  36. 	private LinearLayout mMyBugLayout;
  37. 	private DrawerLayout drawerLayout;
  38.     private Button left_btn,right_btn;
  39. 	private TextView balance;
  40. 	@Override
  41. 	protected void onCreate(Bundle savedInstanceState) {
  42. 		super.onCreate(savedInstanceState);
  43. 		setContentView(R.layout.activity_main);
  44. 		initView();
  45. 		initEvent();
  46. 	
  47. 	}
  48.  
  49. 	@Override
  50. 	protected void onResume() {
  51. 		super.onResume();
  52. 	}
  53.  
  54.  
  55. 	// 实例化view
  56. 	public void initView() {
  57. 		drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer_layout);		
  58. 		initLeftLayout();
  59. 	    initRightLayout();
  60. 		left_btn = (Button) findViewById(R.id.left_btn);
  61. 		left_btn.setOnClickListener(new OnClickListener() {
  62. 			
  63. 			public void onClick(View v) {
  64. 				openLeftLayout();
  65. 				
  66. 			}
  67. 		});
  68. 		right_btn = (Button) findViewById(R.id.right_btn);
  69. 		right_btn.setOnClickListener(new OnClickListener() {
  70. 			
  71. 			@Override
  72. 			public void onClick(View v) {
  73. 				openRightLayout();
  74. 				
  75. 			}
  76. 		});
  77. 		
  78. 		// 中间替换fragment
  79. //				mMainFragment = new TEMainFragment(isNotification);
  80. //				FragmentManager fragmentManager = getSupportFragmentManager();
  81. //				FragmentTransaction f_transaction = fragmentManager.beginTransaction();
  82. //				f_transaction.replace(R.id.main_content_frame_parent, mMainFragment);
  83. //				f_transaction.commit();
  84. 	}
  85.  
  86. 	private void initEvent() {
  87. 		drawerbar = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_launcher, R.string.app_name, R.string.app_name) {
  88. 			@Override
  89. 			public void onDrawerOpened(View drawerView) {
  90. 				super.onDrawerOpened(drawerView);
  91. 			}
  92.  
  93. 			@Override
  94. 			public void onDrawerClosed(View drawerView) {
  95. 				super.onDrawerClosed(drawerView);
  96. 			}
  97. 		};
  98. 		drawerLayout.setDrawerListener(drawerbar);
  99. 		drawerbar.setDrawerIndicatorEnabled(false);
  100. 		
  101. 	}
  102. 	public void initLeftLayout() {
  103. 		// 设置透明
  104. 		// drawerLayout.setScrimColor(0x00000000);
  105. 		main_left_drawer_layout = (RelativeLayout) findViewById(R.id.main_left_drawer_layout);
  106. 		View view = getLayoutInflater().inflate(R.layout.left_menu_layout, null);
  107. 		backQuan = (ImageView) view.findViewById(R.id.back_quan);
  108. 		userPhoto = (ImageView) view.findViewById(R.id.user_photo);
  109. 		balance = (TextView) view.findViewById(R.id.balance);		
  110. 		mUserPhotoLayout = (RelativeLayout) view.findViewById(R.id.user_photo_layout);
  111. 		mUserMoney = (RelativeLayout) view.findViewById(R.id.user_money);
  112. 		mMyOrderLayout = (LinearLayout) view.findViewById(R.id.my_order_layout);
  113. 		mRecentViewLayout = (LinearLayout) view.findViewById(R.id.recently_view_layout);
  114. 		mMyMessageLayout = (LinearLayout) view.findViewById(R.id.my_message_layout);
  115. 		mHelpLayout = (LinearLayout) view.findViewById(R.id.help_layout);
  116. 		mAboutUsLayout = (LinearLayout) view.findViewById(R.id.about_us_layout);
  117. 		mMyBugLayout = (LinearLayout) view.findViewById(R.id.my_bug_layout);	
  118. 		main_left_drawer_layout.addView(view);	
  119. 	}
  120.  
  121. 	/**
  122. 	 * 右边边菜单
  123. 	 */
  124. 	 public void initRightLayout() {
  125. 	 main_right_drawer_layout = (RelativeLayout)findViewById(R.id.main_right_drawer_layout);
  126. 	 View view = getLayoutInflater().inflate(R.layout.right_menu_layout, null);
  127. 	 main_right_drawer_layout.addView(view);	
  128. 	 }
  129. 	/**
  130. 	 * 打开左边菜单
  131. 	 */
  132. 	public void openLeftLayout() {
  133. 		if (drawerLayout.isDrawerOpen(main_left_drawer_layout)) {
  134. 			drawerLayout.closeDrawer(main_left_drawer_layout);
  135. 		} else {
  136. 			drawerLayout.openDrawer(main_left_drawer_layout);
  137. 		    drawerLayout.closeDrawer(main_right_drawer_layout);
  138. 		}
  139. 	}
  140.  
  141. 	/**
  142. 	 * 打开右边菜单
  143. 	 */
  144. 	public void openRightLayout() {
  145. 		if (drawerLayout.isDrawerOpen(main_right_drawer_layout)) {
  146. 			drawerLayout.closeDrawer(main_right_drawer_layout);
  147. 		} else {
  148. 			drawerLayout.openDrawer(main_right_drawer_layout);
  149. 			drawerLayout.closeDrawer(main_left_drawer_layout);
  150. 		}
  151. 	}
  152.  
  153. //	/**
  154. //	 * 关闭滑动效果
  155. //	 */
  156. //	public void closeSlide() {
  157. //		drawerLayout.removeView(left_menu_layout);
  158. //	}
  159. //
  160. //	/**
  161. //	 * 关闭左菜单
  162. //	 */
  163. //	public void closeLeftMenu() {
  164. //		drawerLayout.closeDrawer(left_menu_layout);
  165. //	}
  166. //
  167. //	/**
  168. //	 * 代开滑动效果
  169. //	 */
  170. //	public void openSlide() {
  171. //		drawerLayout.removeView(left_menu_layout);	
  172. //		drawerLayout.addView(left_menu_layout);
  173. //	}
  174. 	public MainActivity getMainActivity() {
  175. 		return this;
  176. 	}
  177. 	@Override
  178. 	protected void onDestroy() {
  179. 		super.onDestroy();
  180. 		
  181. 	}
  182.  
  183.  
  184. }
 

 

 

 左右的侧滑菜单可以自己定义，自定义侧滑菜单的样式，当然侧滑菜单中控件也可以进行事件监听，进一步处理，此处不详述。中间的Fragment 也是自定义，使用的时候只要调用折断代码即可： 

 

 
 

  1. 		// 中间替换fragment
  2. //				mMainFragment = new TEMainFragment(isNotification);
  3. //				FragmentManager fragmentManager = getSupportFragmentManager();
  4. //				FragmentTransaction f_transaction = fragmentManager.beginTransaction();
  5. //				f_transaction.replace(R.id.main_content_frame_parent, mMainFragment);
  6. //				f_transaction.commit();
 

 其中的 
TEMainFragment是中间部分显示的内容。 

 

 其中的initEvent（）中的方法是系统默认的一个打开菜单的方法，实际应用过程中可以忽略，即可以不用initEvent（）方法也可以实现功能，完全没有影响
 
 
 
 
 
 

 

 
 

                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/279608
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号