现在做的Android项目大部分都要实现左右滑动菜单栏的功能,一般都是通过开源库SlidingMenu实现的。实现方法如下:
(1)下载SlidingMenu库文件
(2)在Eclipse中导入此库文件,具体方法我就不说了
(3)新建Android项目
(4)在项目中右键Properties->Android->Add->SlidingMenu库文件->OK;
(5)在项目的libs文件夹中删除掉adroid-support-v4.jar文件,因为slidingMenu库中已包含,不删除会产生冲突;
(6)Activity继承SlidingFragmentActivity;
(7)下面贴上具体代码,都有详细注释:
1.
properties.xml布局
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/list_padding" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="@dimen/list_padding"
android:paddingTop="@dimen/list_padding" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="Mode"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="@+id/mode"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/left" />
<RadioButton
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/right" />
<RadioButton
android:id="@+id/left_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/left_and_right" />
</RadioGroup>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="@dimen/list_padding"
android:paddingTop="@dimen/list_padding" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="Touch Mode Above"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="@+id/touch_above"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/touch_above_full"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Fullscreen" />
<RadioButton
android:id="@+id/touch_above_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Margin" />
<RadioButton
android:id="@+id/touch_above_none"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="None" />
</RadioGroup>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="@dimen/list_padding"
android:paddingTop="@dimen/list_padding"
android:visibility="gone" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="Touch Mode Behind"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="@+id/touch_behind"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/touch_behind_full"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Fullscreen" />
<RadioButton
android:id="@+id/touch_behind_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Margin" />
</RadioGroup>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/list_padding"
android:text="Scroll Scale"
android:textAppearance="?android:attr/textAppearanceMedium" />
<SeekBar
android:id="@+id/scroll_scale"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/list_padding"
android:text="Behind Width"
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="gone" />
<SeekBar
android:id="@+id/behind_width"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/list_padding" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="Shadow"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox
android:id="@+id/shadow_enabled"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enabled?" />
</LinearLayout>
<SeekBar
android:id="@+id/shadow_width"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/list_padding" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="Fade"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox
android:id="@+id/fade_enabled"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enabled?" />
</LinearLayout>
<SeekBar
android:id="@+id/fade_degree"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
2.menu_frame.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 用来存放滑动后的视图界面 -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/menu_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3.menu_frame_two.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/menu_frame_two"
android:layout_width="match_parent"
android:layout_height="match_parent" />
4.list.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- ListView布局会在ListFragment中用到 -->
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/list_padding"
android:paddingRight="@dimen/list_padding" />
5.row.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="50dp"
android:orientation="horizontal" >
<ImageView
android:id="@+id/row_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Medium Text"
android:textAppearance="@android:style/TextAppearance.Medium" />
</LinearLayout>
6.SampleListFragment.java
package com.yangyu.myslidingmenudemo01;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
* @author yangyu
* 功能描述:列表Fragment,用来显示滑动菜单打开后的内容
*/
public class SampleListFragment extends ListFragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.list, null);
}
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
SampleAdapter adapter = new SampleAdapter(getActivity());
for (int i = 0; i < 20; i++) {
adapter.add(new SampleItem("Sample List", android.R.drawable.ic_menu_search));
}
setListAdapter(adapter);
}
public class SampleAdapter extends ArrayAdapter<SampleItem> {
public SampleAdapter(Context context) {
super(context, 0);
}
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null);
}
ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);
icon.setImageResource(getItem(position).iconRes);
TextView title = (TextView) convertView.findViewById(R.id.row_title);
title.setText(getItem(position).tag);
return convertView;
}
}
private class SampleItem {
public String tag;
public int iconRes;
public SampleItem(String tag, int iconRes) {
this.tag = tag;
this.iconRes = iconRes;
}
}
}
7.MainActivity.java
package com.yangyu.myslidingmenudemo01;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
public class MainActivity extends SlidingFragmentActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置标题栏的标题
setTitle("SlidingMenu Properties");
//设置是否能够使用ActionBar来滑动
setSlidingActionBarEnabled(true);
//设置是否显示Home图标按钮
getActionBar().setDisplayHomeAsUpEnabled(true);
//设置主界面视图
setContentView(R.layout.properties);
//初始化滑动菜单
initSlidingMenu(savedInstanceState);
//初始化组件
initView();
}
/**
* 初始化滑动菜单
*/
private void initSlidingMenu(Bundle savedInstanceState) {
// 设置滑动菜单的视图
setBehindContentView(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();
// 实例化滑动菜单对象
SlidingMenu sm = getSlidingMenu();
// 设置滑动阴影的宽度
sm.setShadowWidthRes(R.dimen.shadow_width);
// 设置滑动阴影的图像资源
sm.setShadowDrawable(R.drawable.shadow);
// 设置滑动菜单视图的宽度
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
// 设置渐入渐出效果的值
sm.setFadeDegree(0.35f);
// 设置触摸屏幕的模式
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
}
/**
* 初始化组件
*/
private void initView() {
// 设置滑动菜单的位置(左边、右边或者左右两边都有)
RadioGroup mode = (RadioGroup) findViewById(R.id.mode);
mode.check(R.id.left);
mode.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
SlidingMenu sm = getSlidingMenu();
switch (checkedId) {
case R.id.left:
sm.setMode(SlidingMenu.LEFT);
sm.setShadowDrawable(R.drawable.shadow);
break;
case R.id.right:
sm.setMode(SlidingMenu.RIGHT);
sm.setShadowDrawable(R.drawable.shadowright);
break;
case R.id.left_right:
sm.setMode(SlidingMenu.LEFT_RIGHT);
sm.setSecondaryMenu(R.layout.menu_frame_two);
getSupportFragmentManager().beginTransaction()
.replace(R.id.menu_frame_two,
new SampleListFragment()).commit();
sm.setSecondaryShadowDrawable(R.drawable.shadowright);
sm.setShadowDrawable(R.drawable.shadow);
}
}
});
// 设置触摸的模式(全屏触摸滑动、边缘触摸滑动或者触摸不能滑动)
RadioGroup touchAbove = (RadioGroup) findViewById(R.id.touch_above);
touchAbove.check(R.id.touch_above_full);
touchAbove.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.touch_above_full:
getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
break;
case R.id.touch_above_margin:
getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
break;
case R.id.touch_above_none:
getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
break;
}
}
});
// 设置滑动菜单滑动时缩放的效果(值越大效果越明显)
SeekBar scrollScale = (SeekBar) findViewById(R.id.scroll_scale);
scrollScale.setMax(1000);
scrollScale.setProgress(333);
scrollScale.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
getSlidingMenu().setBehindScrollScale((float) seekBar.getProgress() / seekBar.getMax());
}
});
// 设置滑动菜单时下方视图的宽度(值越大宽度越大)
SeekBar behindWidth = (SeekBar) findViewById(R.id.behind_width);
behindWidth.setMax(1000);
behindWidth.setProgress(750);
behindWidth.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
float percent = (float) seekBar.getProgress() / seekBar.getMax();
getSlidingMenu().setBehindWidth((int) (percent * getSlidingMenu().getWidth()));
getSlidingMenu().requestLayout();
}
});
// 设置滑动菜单滑动时的阴影效果(值越大效果越明显)
CheckBox shadowEnabled = (CheckBox) findViewById(R.id.shadow_enabled);
shadowEnabled.setChecked(true);
shadowEnabled.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked)
getSlidingMenu().setShadowDrawable(getSlidingMenu().getMode() == SlidingMenu.LEFT ? R.drawable.shadow: R.drawable.shadowright);
else
getSlidingMenu().setShadowDrawable(null);
}
});
SeekBar shadowWidth = (SeekBar) findViewById(R.id.shadow_width);
shadowWidth.setMax(1000);
shadowWidth.setProgress(75);
shadowWidth.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
float percent = (float) seekBar.getProgress() / (float) seekBar.getMax();
int width = (int) (percent * (float) getSlidingMenu().getWidth());
getSlidingMenu().setShadowWidth(width);
getSlidingMenu().invalidate();
}
});
// 设置滑动菜单滑动时渐入渐出的效果(值越大效果越明显)
CheckBox fadeEnabled = (CheckBox) findViewById(R.id.fade_enabled);
fadeEnabled.setChecked(true);
fadeEnabled.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
getSlidingMenu().setFadeEnabled(isChecked);
}
});
SeekBar fadeDeg = (SeekBar) findViewById(R.id.fade_degree);
fadeDeg.setMax(1000);
fadeDeg.setProgress(666);
fadeDeg.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
getSlidingMenu().setFadeDegree(
(float) seekBar.getProgress() / seekBar.getMax());
}
});
}
/**
* 菜单按钮点击事件,通过点击ActionBar的Home图标按钮来打开滑动菜单
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
toggle();
return true;
}
return super.onOptionsItemSelected(item);
}
}