SlidingMenu(二)
项目地址。。。。。
开源库地址
首先看整体界面的布局
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar" >
<ImageButton
android:id="@+id/id_iv_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:onClick="showLeftMenu"
android:background="@drawable/recent_chat_showright_normal" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="微信"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
<ImageButton
android:id="@+id/id_iv_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="3dp"
android:onClick="showRightMenu"
android:background="@drawable/recent_chat_showleft_normal" />
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
</LinearLayout>
接下来2个布局文件是左侧栏目--首先填充一个FrameLayout，然后在将其替换为想要展现的布局文件
left_menu_frame.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/id_left_menu_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />left_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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="功能"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<ListView
android:id="@+id/id_listview_categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center" />
</LinearLayout>
接下来2个布局文件是右侧栏目--首先填充一个FrameLayout，然后在将其替换为想要展现的布局文件
right_menu_frame.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/id_right_menu_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
right_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:background="#eee"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="设置"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginLeft="20sp"
android:layout_marginRight="20sp"
android:background="@drawable/btn_style_zero_focused"
android:gravity="center"
android:text="退出登录"
android:textColor="#fff"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
另外主界面是一个ViewPager，还需要2个展现的fragment页面
main_tab_01.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ly_main_weixin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fcfcfc"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="this is first tab !"
android:textColor="#000000"
android:textSize="30sp"
/>
</LinearLayout>
main_tab_02.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ly_main_weixin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fcfcfc"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="this is second tab !"
android:textColor="#000000"
android:textSize="30sp"
/>
</LinearLayout>
MainActivity
package com.zhy.zhy_slidemenu_demo04;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
public class MainActivity extends SlidingFragmentActivity {
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments = new ArrayList<Fragment>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// 初始化SlideMenu
initRightMenu();
// 初始化ViewPager
initViewPager();
}
private void initViewPager() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
MainTab01 tab01 = new MainTab01();
MainTab02 tab02 = new MainTab02();
mFragments.add(tab01);
mFragments.add(tab02);
/**
* 初始化Adapter
*/
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
}
private void initRightMenu() {
/**
* 创建左侧栏的视图布局
*/
Fragment leftMenuFragment = new MenuLeftFragment();
// 设置左边（一级）侧滑菜单
setBehindContentView(R.layout.left_menu_frame);
/**
* id_left_menu_frame是一个FrameLayout布局文件 将左侧的Fragment视图替换调FrameLayout布局
*/
getSupportFragmentManager().beginTransaction()
.replace(R.id.id_left_menu_frame, leftMenuFragment).commit();
// 获取滑动栏目对象
SlidingMenu menu = getSlidingMenu();
// 设置为左右2侧都可以滑动的
menu.setMode(SlidingMenu.LEFT_RIGHT);
// 设置触摸屏幕的模式--不能通过滑动屏幕进行拖出Menu菜单
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
menu.setShadowWidthRes(R.dimen.shadow_width);
// 设置渐入渐出效果的值
menu.setFadeDegree(0.35f);
// 设置滑动菜单视图的宽度
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
/** 设置左右栏目的边界颜色 */
menu.setShadowDrawable(R.drawable.shadow);
menu.setSecondaryShadowDrawable(R.drawable.shadow);
// 设置右边（二级）侧滑菜单
menu.setSecondaryMenu(R.layout.right_menu_frame);
Fragment rightMenuFragment = new MenuRightFragment();
getSupportFragmentManager().beginTransaction()
.replace(R.id.id_right_menu_frame, rightMenuFragment).commit();
}
/**
* 点击后，拖出左边的Menu栏--一级菜单
*/
public void showLeftMenu(View view) {
getSlidingMenu().showMenu();
}
/**
* 点击后，弹出右边的Menu栏---二级菜单
*/
public void showRightMenu(View view) {
getSlidingMenu().showSecondaryMenu();
}
}
接下来是左边menu的代码
MenuLeftFragment
package com.zhy.zhy_slidemenu_demo04;
import java.util.Arrays;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
public class MenuLeftFragment extends Fragment
{
private View mView;
private ListView mCategories;
private List<String> mDatas = Arrays
.asList("聊天", "发现", "通讯录", "朋友圈", "订阅号");
private ListAdapter mAdapter;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
if (mView == null)
{
initView(inflater, container);
}
return mView;
}
private void initView(LayoutInflater inflater, ViewGroup container)
{
mView = inflater.inflate(R.layout.left_menu, container, false);
mCategories = (ListView) mView
.findViewById(R.id.id_listview_categories);
mAdapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, mDatas);
mCategories.setAdapter(mAdapter);
}
}
接下来是右边menu的代码
package com.zhy.zhy_slidemenu_demo04;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MenuRightFragment extends Fragment
{
private View mView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
if(mView == null)
{
mView = inflater.inflate(R.layout.right_menu, container, false);
}
return mView ;
}
}
接下来是主页面的fragment页面
MainTab01
package com.zhy.zhy_slidemenu_demo04;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MainTab01 extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
return inflater.inflate(R.layout.main_tab_01, container, false);
}
}
MainTab02
package com.zhy.zhy_slidemenu_demo04;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MainTab02 extends Fragment
{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View messageLayout = inflater.inflate(R.layout.main_tab_02, container, false);
return messageLayout;
}
}
最后呢还有一些menu的参数属性值
shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#ff444444"
android:startColor="#00000000" />
</shape>
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="slidingmenu_offset">60dp</dimen>
<dimen name="shadow_width">5dp</dimen>
</resources>