侧面菜单支持手机,平板

NI你现在顶部,底部导航栏太多了,我们几乎很少用到原生的Fragment了,是不是顶部与底部导航栏就可以满足所有需求呐？很显然不是,

我们知道平板比手机的尺寸要大得多,如果我们主页面利用底部导航栏设计出来空白太多,而且整体看起来不是很美观，于是乎我就想利用Fragment做一个侧面菜单。我在网上,Github，找了很多资料都没有合适的一个框架来支撑这个需求.最后我还是狠下心来用原生Fragment了。

1.首先我贴一张效果图，图片跟背景都是在随便找的资源.

我们再来看看上图对应的布局

?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/back"><includeandroid:id="@+id/menu_layout"layout="@layout/main_menu"></include><TextViewandroid:id="@+id/title_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toRightOf="@id/menu_layout"android:padding="10dp"android:text="亲睦家健康管理,欢迎您!"android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"android:textColor="@color/normaltextcolor"/><FrameLayoutandroid:id="@+id/main_framelayout"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/title_text"android:layout_toRightOf="@id/menu_layout"android:background="@color/normaltextcolor"></FrameLayout></RelativeLayout>

main_menu布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="@dimen/x250"android:layout_height="match_parent"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/loginlogo"/><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/main_menu_image"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:padding="@dimen/x5"android:src="@mipmap/error"/><TextViewandroid:id="@+id/menu_tologin"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_toRightOf="@id/main_menu_image"android:background="@null"android:layout_marginTop="@dimen/y10"android:text="登录/注册"android:textColor="@color/colorAccent"android:visibility="visible"/><TextViewandroid:id="@+id/menu_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y10"android:gravity="center_horizontal"android:text="昵称"android:textColor="@color/morencolor"/><TextViewandroid:id="@+id/menu_one"android:layout_width="@dimen/x250"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y40"android:drawablePadding="@dimen/x8"android:drawableTop="@mipmap/old_gaoweitwo"android:gravity="center"android:paddingBottom="@dimen/y5"android:paddingTop="@dimen/y5"android:text="我的设备"android:textColor="@color/morencolor"/><TextViewandroid:id="@+id/menu_two"android:layout_width="@dimen/x250"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y30"android:drawablePadding="@dimen/x8"android:drawableTop="@mipmap/old_goodsone"android:gravity="center"android:paddingBottom="@dimen/y5"android:paddingTop="@dimen/y5"android:text="设备列表"android:textColor="@color/morencolor"/><TextViewandroid:id="@+id/menu_three"android:layout_width="@dimen/x250"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y30"android:drawablePadding="@dimen/x8"android:drawableTop="@mipmap/old_leaveone"android:gravity="center"android:paddingBottom="@dimen/y5"android:paddingTop="@dimen/y5"android:text="其他"android:textColor="@color/morencolor"/><TextViewandroid:id="@+id/menu_four"android:layout_width="@dimen/x250"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y30"android:drawablePadding="@dimen/x8"android:drawableTop="@mipmap/old_messageone"android:gravity="center"android:paddingBottom="@dimen/y5"android:paddingTop="@dimen/y5"android:text="设置"android:textColor="@color/morencolor"/><TextViewandroid:id="@+id/menu_five"android:layout_width="@dimen/x250"android:layout_height="wrap_content"android:layout_marginTop="@dimen/y30"android:drawablePadding="@dimen/x8"android:drawableTop="@mipmap/old_messageone"android:gravity="center"android:paddingBottom="@dimen/y5"android:paddingTop="@dimen/y5"android:text="退出"android:textColor="@color/morencolor"/>
</LinearLayout>

可以看到这个布局很简单左边一个menu布局右边就是一个FrameLayout.接着我们来看下怎么实现切换Fragment的,下面我就贴几个重要方法:

1.监听menu按钮事件

@Override
public void onClick(View v) {FragmentManager fragmentManager = getSupportFragmentManager();FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();switch (v.getId()) {case R.id.menu_one:SetFragment(fragmentList, fragmentTransaction, 0);SetTextViewColor(ids[0]);break;case R.id.menu_two:SetFragment(fragmentList, fragmentTransaction, 1);SetTextViewColor(ids[1]);break;case R.id.menu_three:SetFragment(fragmentList, fragmentTransaction, 2);SetTextViewColor(ids[2]);break;case R.id.menu_four:SetFragment(fragmentList, fragmentTransaction, 3);SetTextViewColor(ids[3]);break;}}

//切换fragment
public void SetFragment(List<Fragment> fragmentList, FragmentTransaction fragmentTransaction, int index) {for (int i = 0; i < fragmentList.size(); i++) {if (i == index) {if (fragmentList.get(i).isVisible() && fragmentList.get(i).isAdded()) {return;} else {fragmentTransaction.add(R.id.main_framelayout, fragmentList.get(i));}} else {if (fragmentList.get(i).isAdded()) {fragmentTransaction.remove(fragmentList.get(i));}}}fragmentTransaction.commit();}//--设置字体颜色:这里的ids是menu菜单中几个控件的id数组
public void SetTextViewColor(int id) {for (int i = 0; i < ids.length; i++) {TextView view = (TextView) findViewById(ids[i]);if (id == ids[i]) {view.setTextColor(Color.parseColor("#FF4081"));view.setTextSize(16);view.setBackgroundColor(Color.parseColor("#eeeeee"));Drawable drawable = getResources().getDrawable(imagestwo[i]);drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());view.setCompoundDrawables(null, drawable, null, null);} else {view.setTextColor(Color.parseColor("#333333"));view.setTextSize(15);view.setBackground(null);Drawable drawable = getResources().getDrawable(images[i]);drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());view.setCompoundDrawables(null, drawable, null, null);}}

温馨提示: 这里的Fragment管理栈不建议使用show(),hide()方法,因为这种主页面几乎没Activity什么事了,几乎所有的界面都由Fragment支撑,很显然用Show(),Hide()方法主页面Fragment栈管理会有很多的Fragment，这样会影响程序的性能问题.很可能导致程序崩溃.