侧面菜单支持手机,平板

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

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

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

 

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

?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns: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"
    >

    <include
        android:id="@+id/menu_layout"
        layout="@layout/main_menu"
        ></include>

    <TextView
        android: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"/>

    <FrameLayout
        android: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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/loginlogo"/>


    <de.hdodenhof.circleimageview.CircleImageView
        android: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"/>

    <TextView
        android: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"/>

    <TextView

        android: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"/>

    <TextView
        android: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"/>

    <TextView
        android: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"/>

    <TextView
        android: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"/>

    <TextView
        android: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"/>

    <TextView
        android: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，这样会影响程序的性能问题.很可能导致程序崩溃.