利用DrawLayout和Fragment实现左右侧滑菜单

利用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()方法也可以实现功能,完全没有影响






  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值