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

效果图:















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值