一、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;
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;
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() {
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();
}
});
}
publicboolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
returntrue;
}
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;
}
}
}