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
效果图: