android菜单插件Slidingmenu和Actionbarsherlock组合使用做侧滑菜单

￡神魔★判官ぃ 2022-08-14 05:40 211阅读 0赞

Slidingmenu和Actionbarsherlock这种开源的android插件出来之后极大的方便了我们做一些炫酷的效果，使得初学者很容易做出一些炫酷的菜单了，等动画效果，我也是一个android学习者，邪门我就把我学习这2个插件的心得用例子写出来。

首先我们要了解Fragment，因为现在多个页面切换已经不使用acvitity进行转换了，都换成Fragment了，这样改动其目的是为了解决不同屏幕分辩率的动态和灵活UI设计。大屏幕如平板小屏幕如手机，平板电脑的设计使得其有更多的空间来放更多的UI组件，而多出来的空间存放UI使其会产生更多的交互，从而诞生了fragments 。

我们做代码前的准备，首先准备Slidingmenu和Actionbarsherlock，我们从github上面直接搜索就可以下载下来,我们已经下载好了，这里提供下载地址，http://pan.baidu.com/s/1eQrx1p4和http://pan.baidu.com/s/1mgERMMO，自行下载。

下载完毕之后，打开我们的ADT，选择导入项目把Slidingmenu和Actionbarsherlock导入以is\_library的形式即可，导入之后我们再进一步整合它们2个，右键我们导入的Slidingmenu把Actionbarsherlock的library加入进来（这里注意我们的Slidingmenu导入的是下面的library文件夹所以名字是library，当然也可以自定义名字）。

![Center][]

添加完成之后，我们还需要修改一个地方才可以完美一起使用它们2个，找到library下面的src下面的com.jeremyfeinstein.slidingmenu.lib.app下面的SlidingFragmentActivity.java，修改extends为SherlockFragmentActivity。

![Center 1][]

工作已经完成了，我们创建一个android项目，加入library这个包。

![Center 2][]

下面创建我们的布局文件。

首先创建主布局activity\_main.xml：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/main_menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </FrameLayout>

中间的Fragment，center\_menu\_frame.xml：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/center_menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </FrameLayout>

中间的内容文件center\_menu.xml：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#0099CC"
         >
        
    <TextView 
        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是中间的内容"
        
        />
    </LinearLayout>

左边的Fragment文件left\_menu\_frame.xml：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/left_menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </FrameLayout>

左边的内容文件left\_item.xml：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#ff999999"
        >
    	
        
        <TextView 
            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是左边的菜单滑动出现的"
            />
        
        
        
    </LinearLayout>

右侧Fragment文件right\_menu\_frame.xml：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/right_menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </FrameLayout>

右侧的内容文件right\_item.xml：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:background="#ff999999"
        >
    	    <TextView 
            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello,右边的菜单滑动出现的"
            />
    </LinearLayout>

头部actionbar文件actionbar\_item.xml：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="#0099FF"
        >
        
        
        <ImageView
            android:id="@+id/iv_left_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_title_list" />
        <TextView
            android:id="@+id/iv_right_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_centerVertical="true"
            android:text="设置" />
        
        
    
    </RelativeLayout>

尺寸文件dimens.xml：

主布局文件的activity,MainActivity.java。

package com.example.slidingmenu;
    import com.actionbarsherlock.app.ActionBar;
    import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    public class MainActivity extends SlidingFragmentActivity {
    
        @Override
    	public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initMenu();
            initActionBar();
            //SlidingMenu menu = new SlidingMenu(this); 
            SlidingMenu sm = getSlidingMenu();
    		sm.setMode(SlidingMenu.LEFT_RIGHT);
    		setBehindContentView(R.layout.left_menu_frame);
    		sm.setSlidingEnabled(true);
    		sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
    		sm.setShadowWidthRes(R.dimen.shadow_width);
    		//sm.setShadowDrawable(R.drawable.shadow);
    		getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    		getSupportFragmentManager()
    		.beginTransaction()
    		.replace(R.id.left_menu_frame, new LeftFragment())
    		.commit();
    		sm.setBehindOffsetRes(R.dimen.sliding_menu_offset);
    		sm.setBehindScrollScale(0);
    		sm.setFadeDegree(0.25f);
    		sm.setSecondaryMenu(R.layout.right_menu_frame);
    		//sm.setSecondaryShadowDrawable(R.drawable.shadow);
    		getSupportFragmentManager()
    		.beginTransaction()
    		.replace(R.id.right_menu_frame, new RightFragment())
    		.commit();
            
        }
      //加载中间的fragment
        public void initMenu(){
        	getSupportFragmentManager()
    		.beginTransaction()
    		.replace(R.id.main_menu_frame, new CenterFragment())
    		.commit();
        }
        //初始化actionbar
    	private void initActionBar(){
    		ActionBar actionBar = getSupportActionBar();
    		actionBar.setCustomView(R.layout.actionbar_item);
    		actionBar.setDisplayShowCustomEnabled(true);
    		//去掉默认的
    		actionBar.setDisplayShowHomeEnabled(false);
    		//左边点击事件
    		ImageView imageView = (ImageView) findViewById(R.id.iv_left_icon);
    		imageView.setOnClickListener(new View.OnClickListener() {
    			@Override
    			public void onClick(View arg0) {
    				// TODO Auto-generated method stub
    				toggle();
    			}
    		});
    		//右边点击事件
    		TextView textView = (TextView) findViewById(R.id.iv_right_icon);
    		textView.setOnClickListener(new View.OnClickListener() {
    			@Override
    			public void onClick(View arg0) {
    				// TODO Auto-generated method stub
    				showSecondaryMenu();
    			}
    		});
    		
    	}
    }

中间的Fragment内容展示activity，CenterFragment.java。

package com.example.slidingmenu;
    
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class CenterFragment extends Fragment {
    	
    	
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,
    			Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		
    		View view = inflater.inflate(R.layout.center_menu, null);
    		
    		return view;
    	}
    
    }

左边的Fragment内容展示文件LeftFragment.java。

package com.example.slidingmenu;
    
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class LeftFragment extends Fragment {
    	
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,
    			Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		
    		View view = inflater.inflate(R.layout.left_item, null);
    		return view;
    	}
    
    }

右边的Fragment内容展示acvitity，RightFragment.java。

package com.example.slidingmenu;
    
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class RightFragment extends Fragment {
    	
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,
    			Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		View view = inflater.inflate(R.layout.right_item, null);
    		return view;
    	}
    
    }

源码地址：[http://download.csdn.net/detail/gaoxuaiguoyi/9294399][http_download.csdn.net_detail_gaoxuaiguoyi_9294399]

效果图：

![Center 3][]

[Center]: /images/20220731/1317e45f32fb4192b7701165e19d8273.png
[Center 1]: /images/20220731/f361a54d8faf4970a74ad306759a5f03.png
[Center 2]: /images/20220731/af55a151b1c04d70a79b56525df88819.png
[http_download.csdn.net_detail_gaoxuaiguoyi_9294399]: http://download.csdn.net/detail/gaoxuaiguoyi/9294399
[Center 3]: /images/20220731/156844b9274f4ec5bddc0e960b21de9e.png