利用Fragment实现界面左右滑动后显示侧滑的菜单,效果图如下:
方案一:利用
方案一:一个布局完成(左右抽屉布局与中间布局在同一个布局文件中)
布局:draw_activity_layouot.xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/main_activity_drawerLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<FrameLayout
android:id="@+id/main_activity_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<!--左边抽屉,在这里一定要设置layout_gravity="start" ,并且宽度不能超过320dp-->
<LinearLayout
android:id="@+id/left_draw_layout"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/holo_blue_dark"
android:orientation="vertical">
<LinearLayout
android:id="@+id/layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="80dip"
android:layout_height="80dip"
android:src="@drawable/a"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="80dip"
android:layout_height="80dip"
android:src="@drawable/b"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="80dip"
android:layout_height="80dip"
android:src="@drawable/c"/>
</LinearLayout>
</LinearLayout>
<!--右边抽屉,在这里一定要设置layout_gravity="end" ,并且宽度不能超过320dp-->
<LinearLayout
android:id="@+id/right_draw_layout"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="@android:color/holo_green_dark"
android:orientation="vertical">
<!--此处可设置右边抽屉的布局-->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Arial, Helvetica, sans-serif;">LDrawActivity</span>
package learnbroadcast.ld.com.broadcastdemo;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
public class LDrawActivity extends FragmentActivity implements DrawerListener ,OnClickListener{
private DrawerLayout mDrawerLayout;//抽屉菜单
private boolean isOpenDrawlayout=false;//是否打开抽屉
private FragmentManager fragmentManager=getSupportFragmentManager();;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.draw_activity_layouot);
mDrawerLayout = (DrawerLayout) findViewById(R.id.main_activity_drawerLayout);
initDrawLayout();
//初始化中间布局
Fragment3 fragment3=new Fragment3();
fragmentManager.beginTransaction().replace(R.id.main_activity_container, fragment3).commit();
}
//左边抽屉监听
private void initDrawLayout() {
mDrawerLayout.setDrawerListener(this);
findViewById(R.id.layout1).setOnClickListener(this);
findViewById(R.id.layout2).setOnClickListener(this);
findViewById(R.id.layout3).setOnClickListener(this);
}
// ----------------------实现抽屉的监听事件------------------------
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
}
@Override
public void onDrawerOpened(View drawerView) {
isOpenDrawlayout=true;
}
@Override
public void onDrawerClosed(View drawerView) {
isOpenDrawlayout=false;
}
@Override
public void onDrawerStateChanged(int newState) {
}
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.layout1:
<pre name="code" class="java"> //点击的时候切换中间的布局
Toast.makeText(LDrawActivity.this, "点击了第一个美女", Toast.LENGTH_SHORT).show(); Fragment1 fragment1=new Fragment1();
fragmentManager.beginTransaction().replace(R.id.main_activity_container, fragment1).commit();
mDrawerLayout.closeDrawer(Gravity.LEFT);
break;
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 右边侧滑菜单布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.widget.DrawerLayout
android:id="@+id/main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- 中间内容 -->
<FrameLayout
android:id="@+id/main_content_frame_parent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- 左侧滑动栏 -->
<RelativeLayout
android:id="@+id/main_left_drawer_layout"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/transparent"
android:paddingBottom="50dip" >
</RelativeLayout>
<!-- 右侧滑动栏 -->
<RelativeLayout
android:id="@+id/main_right_drawer_layout"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@android:color/transparent"
android:paddingBottom="50dp" />
</android.support.v4.widget.DrawerLayout>
<Button android:id="@+id/left_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="左边"/>
<Button android:id="@+id/right_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text=" 右边"/>
</RelativeLayout>
<pre name="code" class="java">package com.example.ldclient;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
//
@SuppressWarnings("deprecation")
@SuppressLint({ "ClickableViewAccessibility", "InflateParams", "HandlerLeak" })
public class MainActivity extends FragmentActivity {
private RelativeLayout main_left_drawer_layout;
private RelativeLayout main_right_drawer_layout;
private ActionBarDrawerToggle drawerbar; // 抽屉菜单对象
// 左侧菜单资源属性
private ImageView backQuan;
private ImageView userPhoto; // 用户头像
private RelativeLayout mUserPhotoLayout;
private RelativeLayout mUserMoney;
private LinearLayout mMyOrderLayout;
private LinearLayout mRecentViewLayout;
private LinearLayout mMyMessageLayout;
private LinearLayout mHelpLayout;
private LinearLayout mAboutUsLayout;
private LinearLayout mMyBugLayout;
private DrawerLayout drawerLayout;
private Button left_btn,right_btn;
private TextView balance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initEvent();
}
@Override
protected void onResume() {
super.onResume();
}
// 实例化view
public void initView() {
drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer_layout);
initLeftLayout();
initRightLayout();
left_btn = (Button) findViewById(R.id.left_btn);
left_btn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
openLeftLayout();
}
});
right_btn = (Button) findViewById(R.id.right_btn);
right_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
openRightLayout();
}
});
// 中间替换fragment
// mMainFragment = new TEMainFragment(isNotification);
// FragmentManager fragmentManager = getSupportFragmentManager();
// FragmentTransaction f_transaction = fragmentManager.beginTransaction();
// f_transaction.replace(R.id.main_content_frame_parent, mMainFragment);
// f_transaction.commit();
}
private void initEvent() {
drawerbar = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_launcher, R.string.app_name, R.string.app_name) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
drawerLayout.setDrawerListener(drawerbar);
drawerbar.setDrawerIndicatorEnabled(false);
}
public void initLeftLayout() {
// 设置透明
// drawerLayout.setScrimColor(0x00000000);
main_left_drawer_layout = (RelativeLayout) findViewById(R.id.main_left_drawer_layout);
View view = getLayoutInflater().inflate(R.layout.left_menu_layout, null);
backQuan = (ImageView) view.findViewById(R.id.back_quan);
userPhoto = (ImageView) view.findViewById(R.id.user_photo);
balance = (TextView) view.findViewById(R.id.balance);
mUserPhotoLayout = (RelativeLayout) view.findViewById(R.id.user_photo_layout);
mUserMoney = (RelativeLayout) view.findViewById(R.id.user_money);
mMyOrderLayout = (LinearLayout) view.findViewById(R.id.my_order_layout);
mRecentViewLayout = (LinearLayout) view.findViewById(R.id.recently_view_layout);
mMyMessageLayout = (LinearLayout) view.findViewById(R.id.my_message_layout);
mHelpLayout = (LinearLayout) view.findViewById(R.id.help_layout);
mAboutUsLayout = (LinearLayout) view.findViewById(R.id.about_us_layout);
mMyBugLayout = (LinearLayout) view.findViewById(R.id.my_bug_layout);
main_left_drawer_layout.addView(view);
}
/**
* 右边边菜单
*/
public void initRightLayout() {
main_right_drawer_layout = (RelativeLayout)findViewById(R.id.main_right_drawer_layout);
View view = getLayoutInflater().inflate(R.layout.right_menu_layout, null);
main_right_drawer_layout.addView(view);
}
/**
* 打开左边菜单
*/
public void openLeftLayout() {
if (drawerLayout.isDrawerOpen(main_left_drawer_layout)) {
drawerLayout.closeDrawer(main_left_drawer_layout);
} else {
drawerLayout.openDrawer(main_left_drawer_layout);
drawerLayout.closeDrawer(main_right_drawer_layout);
}
}
/**
* 打开右边菜单
*/
public void openRightLayout() {
if (drawerLayout.isDrawerOpen(main_right_drawer_layout)) {
drawerLayout.closeDrawer(main_right_drawer_layout);
} else {
drawerLayout.openDrawer(main_right_drawer_layout);
drawerLayout.closeDrawer(main_left_drawer_layout);
}
}
// /**
// * 关闭滑动效果
// */
// public void closeSlide() {
// drawerLayout.removeView(left_menu_layout);
// }
//
// /**
// * 关闭左菜单
// */
// public void closeLeftMenu() {
// drawerLayout.closeDrawer(left_menu_layout);
// }
//
// /**
// * 代开滑动效果
// */
// public void openSlide() {
// drawerLayout.removeView(left_menu_layout);
// drawerLayout.addView(left_menu_layout);
// }
public MainActivity getMainActivity() {
return this;
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
左右的侧滑菜单可以自己定义,自定义侧滑菜单的样式,当然侧滑菜单中控件也可以进行事件监听,进一步处理,此处不详述。中间的Fragment 也是自定义,使用的时候只要调用折断代码即可:
// 中间替换fragment
// mMainFragment = new TEMainFragment(isNotification);
// FragmentManager fragmentManager = getSupportFragmentManager();
// FragmentTransaction f_transaction = fragmentManager.beginTransaction();
// f_transaction.replace(R.id.main_content_frame_parent, mMainFragment);
// f_transaction.commit();
其中的 TEMainFragment是中间部分显示的内容。
其中的initEvent()中的方法是系统默认的一个打开菜单的方法,实际应用过程中可以忽略,即可以不用initEvent()方法也可以实现功能,完全没有影响