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

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，当然也可以自定义名字）。



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



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



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

首先创建主布局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：

<resources>

<dimen name="sliding_menu_offset">150dp</dimen>
<dimen name="shadow_width">5dp</dimen>
</resources>

主布局文件的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

效果图：