SlidingMenu滑动菜单及DrawerLayout

最新推荐文章于 2021-05-25 14:26:23 发布

bobob_

最新推荐文章于 2021-05-25 14:26:23 发布

阅读量359

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/dubo_csdn/article/details/86503704

版权

android 专栏收录该内容

317 篇文章 0 订阅

订阅专栏

一、SlidingMenu基础：

（一）、SlidingMenu简介:

SlidingMenu的是一种比较新的设置界面或配置界面效果，在主界面左滑或者右滑出现设置界面，能方便的进行各种操作.目前有大量的应用都在使用这一效果。如Evernote、Google+、Foursquare等，国内的豌豆夹，人人，360手机助手等都使用SlidingMenu的界面方案。

（二）、基本用法：

1、SlidingMenuLibrary是一个开源库，而不是一个完整的项目，要把它作为libary引入到你自己的工程里，简单配置一下就可以实现SlidingMenu的效果。

2、新建一个Android项目，将SlidingMenuLibrary导入新建的Android项目中，步骤如下：

<1> 右键点击新建的Android项目，然后点击最下方的“Properties”选项；

<2> 点击弹出对话框之后，在最左侧选择“Android”选项，然后再点击右下方的“Add”按钮；

<3> 点击后弹出对话框，选中之前导入的SlidingMenuLibrary项目；

<4> 选中之后如图所示；

<5> 导入成功之后会在Android的引用包中出现一个slidingmenulibrary.jar包；

（三）、特别注意：

有个地方需要特别注意：在新建完Android项目之后，较新的Eclipse版本都会在Android目录下生成一个libs的文件夹，里面会有一个android-support-v4.jar的jar包，这个jar一定要删掉，否则运行程序的时候会出现异常，提示是找不到类的异常。最后发现出现异常的原因是因为在导入slidingmenulibrary类库的时候，这个类库里面本身就包含了android-support-v4.jar的jar包，所以运行的时候就会出现异常，系统不知道去调用哪个路径的下的包，所以程序崩溃，提示找不到类。

二、使用SlidingMenu开源库开发：

（一）、开发步骤：

1、第一步：生成SlidingMenu对象

SlidingMenu slidMenu = new SlidingMenu(this);

2、第二步：设置参数：

（1）、SlidingMenu菜单模式：

slidMenu.setMode(SlidingMenu.RIGHT);

模式有三种,第一种是LEFT 第二种RIGHT 右边滑出,LEFT_RIGHT左右滑出

（2）、设置SlidingMenu菜单布局：

slidMenu.setMenu(R.layout.menu_left);

setMenu()：设置左边滑动菜单的界面，setSecondaryMenu()设置右边滑动菜单的界面

（3）、设置菜单显示方式：

slidMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

第一种TOUCHMODE_FULLSCREEN，第二种TOUCHMODE_MARGIN ，第三种 TOUCHMODE_NONE

（4）、设置触摸滑动菜单时隐藏菜单：

slidMenu.setTouchBehind()；

（4）、设置菜单显示宽度：

slidMenu.setBehindWidth(300); //单位：px

（5）、将菜单附加到当前的Activity窗口中：

slidMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT); //以内容方式附加，共用一个ActionBar。SLIDING_CONTENT、SLIDING_WINDOW

（6）、其他属性：

//设置菜单与内容边缘的阴影效果

slidMenu.setShadowWidth(10);

slidMenu.setShadowDrawable(getResources().getDrawable(R.drawable.shadow_shape));

slidMenu.setFadeEnabled(true);

slidMenu.setFadeDegree(1.0f);

//设置滑动菜单的滑动尺度

slidMenu.setBehindScrollScale(0.25f);

（二）、SlidingMenu 常用属性介绍:

menu.setMode(SlidingMenu.LEFT);//设置左滑菜单

menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围，该设置为全屏区域都可以滑动

menu.setShadowDrawable(R.drawable.shadow);//设置阴影图片

menu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度

menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度

menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度

menu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度

menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上

menu.setMenu(R.layout.menu_layout);//设置menu的布局文件

menu.toggle();//动态判断自动关闭或开启SlidingMenu

menu.showMenu();//显示SlidingMenu

menu.showContent();//显示内容

menu.setOnOpenListener(onOpenListener);//监听slidingmenu打开

关于关闭menu有两个监听，简单的来说，对于menu close事件，一个是when,一个是after

menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭时事件

menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭后事件

左右都可以划出SlidingMenu菜单只需要设置：

menu.setMode(SlidingMenu.LEFT_RIGHT);属性，然后设置右侧菜单的布局文件

menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

使用Fragment实现SlidingMenu:

1.首先Activity继承自SlidingMenu包下的SlidingFragmentActivity

2. setContentView(R.layout.content_frame);//该layout为一个全屏的FrameLayout

3. setBehindContentView(R.layout.menu_frame);//设置SlidingMenu使用的布局，同样是一个全屏的FrameLayout

4.设置SlidingMenu左侧菜单的Fragment

[java]

setBehindContentView(R.layout.menu_frame);

FragmentTransaction t = this.getSupportFragmentManager().beginTransaction();

leftMenuFragment = new MenuFragment();

t.replace(R.id.menu_frame, leftMenuFragment);

t.commit();

（三）、实例代码：

1、简单的滑动菜单效果：

publicclass MainActivity extends Activity {

private SlidingMenu slidingMenu;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

slidingMenu = new SlidingMenu(this);

slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

slidingMenu.setMenu(R.layout.sm_left);

slidingMenu.setSecondaryMenu(R.layout.sm_right);

slidingMenu.setBehindWidth(200);

slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

}

2、访问数据库+Fragment的滑动菜单效果：

一、MainActivity代码：

publicclass MainActivity extends FragmentActivity {

private SlidingMenu slidingMenu;

private ListView listView_menu_titlelist;

private MySQLiteDatabaseHelper dbHelper;

private List<Map<String, Object>> totalList = null;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

dbHelper = new MySQLiteDatabaseHelper();

totalList = dbHelper.selectData(

"select id ,title ,content from android_basic", null);

List<String> titleList = new ArrayList<String>();

for (int i = 0; i < totalList.size(); i++) {

titleList.add(totalList.get(i).get("title").toString());

}

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, titleList);

getSlidingMenu(adapter);

ActionBar actionBar = getActionBar();

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setDisplayShowHomeEnabled(true);

actionBar.setHomeButtonEnabled(true);

// actionBar.setHomeAsUpIndicator(getResources().getDrawable(

// R.drawable.indicator));

}

privatevoid getSlidingMenu(ArrayAdapter adapter) {

slidingMenu = new SlidingMenu(this);

slidingMenu.setMode(SlidingMenu.LEFT);

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

// slidingMenu.setTouchModeBehind(SlidingMenu.TOUCHMODE_FULLSCREEN);

slidingMenu.setMenu(R.layout.slidingmenu_left);

slidingMenu

.setBehindWidth(getResources().getDisplayMetrics().widthPixels / 2);

slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

listView_menu_titlelist = (ListView) slidingMenu.getMenu()

.findViewById(R.id.listView_menu_titlelist);

listView_menu_titlelist.setAdapter(adapter);

listView_menu_titlelist

.setOnItemClickListener(new OnItemClickListener() {

@Override

publicvoid onItemClick(AdapterView<?> parent, View view,

int position, long id) {

Map<String, Object> map = totalList.get(position);

String data = map.get("content").toString();

ContentFragment fragment = new ContentFragment();

Bundle bundle = new Bundle();

bundle.putString("content", data);

fragment.setArguments(bundle);

FragmentTransaction transaction = MainActivity.this

.getSupportFragmentManager().beginTransaction();

transaction.replace(R.id.layout_container, fragment);

transaction.addToBackStack("androidManual");

transaction.commit();

}

});

}

@Override

publicboolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

returntrue;

}

@Override

publicboolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_showmenu:

slidingMenu.toggle();

break;

case android.R.id.home:

slidingMenu.toggle();

break;

default:

break;

}

returnsuper.onOptionsItemSelected(item);

}

二、ContentFragment代码：

publicclass ContentFragment extends Fragment {

private TextView textView_fragment_content;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_content, null);

textView_fragment_content = (TextView) view

.findViewById(R.id.text_fragment_content);

Bundle bundle = getArguments();

String data = bundle.getString("content");

textView_fragment_content.setText(data);

return view;

}

三、DrawerLayout：

（一）、概念：

抽屉布局作为视窗内的顶层容器，它允许用户通过抽屉式的推拉操作，从而把视图视窗外边缘拉到屏幕内。作为常见的导航交互控件，最开始在没有没官方控件时，都是使用开源的SlidingMenu，但是android.support.v4.widget.DrawerLayout更简单方便。

抽屉菜单的摆放和布局通过android:layout_gravity属性来控制，可选值为left、right或start、end。

通过xml来布局的话，需要把DrawerLayout作为父容器，其中要包含两个子节点。

第一个子元素是抽屉没有打开时显示的布局；
第二个子元素是抽屉中的内容，即抽屉布局。

（二）、布局的核心代码实例：

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent" >


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/layout_main_tabtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">

<TextView
android:id="@+id/textView1"
style="@style/mystyle1"
android:text="头条" />

<TextView
android:id="@+id/textView2"
style="@style/mystyle1"
android:text="百科" />

<TextView
android:id="@+id/textView3"
style="@style/mystyle1"
android:text="咨询" />

<ImageView
android:id="@+id/imageView_main_more"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="clickButton"
android:src="@drawable/more" />

</LinearLayout>
<TextView
android:id="@+id/text_main_line"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#00CD00"/>

</LinearLayout>


<LinearLayout
android:id="@+id/layout_main_rightdrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#fff"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/layout_drawer_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/imageView_drawer_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:onClick="clickButton"
android:src="@drawable/more" />
<TextView
android:id="@+id/text_drawer_title"
style="@style/mystyle1"
android:textSize="20sp"
android:text="@string/title_right_drawer" />
<ImageView
android:id="@+id/imageView_drawer_home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:onClick="clickButton"
android:src="@drawable/righttopbutton" />
</LinearLayout>

<TextView
android:id="@+id/text_line"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#00CD00"/>

</LinearLayout>

</android.support.v4.widget.DrawerLayout>

（三）、MainActivity核心代码：

public class MainActivity extends FragmentActivity {

private DrawerLayout layout_drawer;

private LinearLayout layout_main_rightdrawer;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

layout_drawer = (DrawerLayout) findViewById(R.id.layout_drawer);

layout_main_rightdrawer = (LinearLayout) findViewById(R.id.layout_main_rightdrawer);

LayoutParams layoutParams = layout_main_rightdrawer.getLayoutParams();

layoutParams.width = getResources().getDisplayMetrics().widthPixels * 4 / 5;// 设置抽屉出现时的宽度

layout_main_rightdrawer.setLayoutParams(layoutParams);

}

public void clickButton(View view) {

switch (view.getId()) {

case R.id.imageView_main_more:

layout_drawer.openDrawer(layout_main_rightdrawer);

break;

case R.id.imageView_drawer_back:

layout_drawer.closeDrawer(layout_main_rightdrawer);

break;

}

自定义一个

drawerMenuAnimTool = new DrawerMenuAnimTool(activity,mainLayout,R.layout.slid_slipping_menu,200,500,true, true);

打开

drawerMenuAnimTool.showDrawerMenu();

DrawerLayout

public class DrawerMenuAnimTool {
    private BaseActivity activity;
    private View drawerMenuView,drawerShadowView;
    private boolean isDrawerOpen = false,isShowLeft = true;
    private int drawerWidthDp = 200,animDuration = 10;

    public DrawerMenuAnimTool(BaseActivity activity, FrameLayout mainLayout, int drawerMenuLayoutResId,int drawerWidthDp, int animDuration, boolean isShadowClose, boolean isShowLeft) {
        this.activity = activity;
        drawerShadowView = new View(activity);
        drawerShadowView.setBackgroundColor(activity.getResources().getColor(R.color.transparent_half));
        mainLayout.addView(drawerShadowView, FrameLayout.LayoutParams.MATCH_PARENT,FrameLayout.LayoutParams.MATCH_PARENT);
        drawerMenuView = LayoutInflater.from(activity).inflate(drawerMenuLayoutResId,null);
        mainLayout.addView(drawerMenuView,new FrameLayout.LayoutParams(ToolUtils.dip2px(activity,drawerWidthDp), ViewGroup.LayoutParams.MATCH_PARENT, Gravity.LEFT));
        this.drawerWidthDp = drawerWidthDp;
        this.animDuration = animDuration;
        this.isShowLeft = isShowLeft;
        //init operation
        drawerMenuView.setVisibility(View.GONE);
        drawerShadowView.setVisibility(View.GONE);
        /*ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(drawerMenuView, "translationX", isShowLeft ? 0 : activity.width, isShowLeft ? -ToolUtils.dip2px(activity,drawerWidthDp) : activity.width);
        objectAnimatorX.setDuration(1);
        objectAnimatorX.start();*/
        if(isShadowClose)drawerShadowView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                closeDrawerMenu();
            }
        });
    }

    public void showDrawerMenu(){
        if(isDrawerOpen)return;
        isDrawerOpen = true;
        drawerMenuView.setVisibility(View.VISIBLE);
        drawerShadowView.setVisibility(View.VISIBLE);
        ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(drawerMenuView, "translationX", isShowLeft ? -ToolUtils.dip2px(activity,drawerWidthDp) : activity.width, isShowLeft ? 0 : ToolUtils.dip2px(activity,drawerWidthDp));
        ObjectAnimator objectAnimatorA = ObjectAnimator.ofFloat(drawerMenuView, "alpha", 0.8f, 1f);
        ObjectAnimator objectAnimatorB = ObjectAnimator.ofFloat(drawerShadowView, "alpha", 0.6f, 1f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(objectAnimatorX,objectAnimatorA,objectAnimatorB);
        animatorSet.setDuration(animDuration);
        animatorSet.start();
    }

    public void closeDrawerMenu(){
        if(!isDrawerOpen)return;
        isDrawerOpen = false;
        ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(drawerMenuView, "translationX", isShowLeft ? 0 : ToolUtils.dip2px(activity,drawerWidthDp), isShowLeft ? -ToolUtils.dip2px(activity,drawerWidthDp) : activity.width);
        ObjectAnimator objectAnimatorA = ObjectAnimator.ofFloat(drawerMenuView, "alpha", 1f, 0.8f);
        ObjectAnimator objectAnimatorB = ObjectAnimator.ofFloat(drawerShadowView, "alpha", 1f, 0f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(objectAnimatorX,objectAnimatorA,objectAnimatorB);
        animatorSet.setDuration(animDuration);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                drawerShadowView.setVisibility(View.GONE);
            }
        });
        animatorSet.start();
    }

    public boolean isDrawerOpen() {
        return isDrawerOpen;
    }
}

bobob_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SlidingMenu滑动菜单及DrawerLayout

一、SlidingMenu基础：（一）、SlidingMenu简介: SlidingMenu的是一种比较新的设置界面或配置界面效果，在主界面左滑或者右滑出现设置界面，能方便的进行各种操作.目前有大量的应用都在使用这一效果。如Evernote、Google+、Foursquare等，国内的豌豆夹，人人，360手机助手等都使用SlidingMenu的界面方案。（二）、...
复制链接

扫一扫