模仿QQ带侧边栏框架搭建

侧边栏实现的两种方法

App展示：

方法一：SlidingMenu

https://github.com/jfeinstein10/SlidingMenu

在GitHub上下载SlidingMenu文件，解压后，将library库导入到AndroidStudio项目中

导入方法：

File--New--ImportModule--选择解压完的SlidingMenu文件下的library文件夹--Finish

之后会报这样一个错：

你只需要找到Library的build.gradle，然后将buildeToolsVersion改为：

buildToolsVersion "19.1.0

之后会报这样一个错：

这个时候只需要点击安装Build Tools 19.1.0版本即可。

之后就是关联library库，即：ModuleDependencies--选择library库即可。

接下来直接看代码（写到比较low只是实现功能）：

/**
 * 继承SlidingFragmentActivity一定要将oncreate权限改为public
 */
public class MainActivity extends SlidingFragmentActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //指定隐藏的布局
        setBehindContentView(R.layout.layout_slidingmenu);
        //获取SlidingMenu对象
        SlidingMenu slidingMenu = getSlidingMenu();
        //指定打开侧边栏后屏幕剩余的空间
        slidingMenu.setBehindOffset(300);
        //从左边打开侧边栏
        slidingMenu.setMode(SlidingMenu.LEFT);
        //设置全屏触摸模式
        //slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        slidingMenu.setTouchModeAbove(SlidingMenu.LEFT);
        initFragment();
    }
    //初始化Fragment
    private void initFragment() {
        FragmentManager fm = getSupportFragmentManager();//获取Fragment管理器
        FragmentTransaction ft = fm.beginTransaction();//开启事务
        ft.replace(R.id.flContent,new ContentFragment());//用fragment动态替换帧布局
        ft.replace(R.id.flLeft,new LeftMenuFragment());
        ft.commit(); //提交事务
    }
}

Fragment的基类：

public abstract class BaseFragment extends Fragment {

    public Activity mActivity; //给Fragment的子类当做上下文使用

    //BaseFragment实例对象创建的时候进行的回调
    //这个方法中一般用来获取Fragment所依附的Activity对象
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mActivity = getActivity();
    }

    //返回Fragment所包装的View对象
    //一般用来加载布局
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return initView();
    }

    // Fragment所依附的Activity完全创建成功后进行的回调
    //一般用来加载数据
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initData();
    }

    //基类无法决定子类的样子，所以需要交给特定的子类完成布局初始化
    public abstract View initView();
    public void initData(){}
}

主内容的Fragment：

public class ContentFragment extends BaseFragment {

    private TextView  tvTitle;
    private ImageView iv;

    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.layout_content, null);
        final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        tvTitle = (TextView) view.findViewById(R.id.tvTitle);
        iv = (ImageView) view.findViewById(R.id.ivMenu);
        RadioGroup rg = (RadioGroup) view.findViewById(R.id.rg);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rbConversation:
                        tvTitle.setText("消息");
                        viewPager.setCurrentItem(0, false);
                        break;
                    case R.id.rbContact:
                        tvTitle.setText("联系人");
                        viewPager.setCurrentItem(1, false);
                        break;
                    case R.id.rbPlugin:
                        tvTitle.setText("动态");
                        viewPager.setCurrentItem(2, false);
                        break;
                }
            }
        });
        rg.check(R.id.rbConversation);  //默认选中会话页
        viewPager.setAdapter(new MyAdapter());

        return view;
    }

    //Fragment中的点击事件一定要在onActivityCreated方法调用后才能实现


    @Override
    public void initData() {
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MainActivity mainAcitivity = (MainActivity) mActivity;
                mainAcitivity.getSlidingMenu().toggle();
            }
        });
    }

    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //创建每一个item的view对象
            switch (position) {
                case 0:
                    View conversationView = View.inflate(mActivity, R.layout.layout_conversation, null);
                    container.addView(conversationView);
                    return conversationView;
                case 1:
                    View contractView = View.inflate(mActivity, R.layout.layout_contract, null);
                    container.addView(contractView);
                    return contractView;
                case 2:
                    View pluginView = View.inflate(mActivity, R.layout.layout_plugin, null);
                    container.addView(pluginView);
                    return pluginView;
            }
            return super.instantiateItem(container, position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

侧边栏的Fragment：

public class LeftMenuFragment extends BaseFragment {
    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.layout_left, null);
        return view;
    }
}

禁止滑动的ViewPager：

public class NoScrollViewPager extends ViewPager {


    public NoScrollViewPager(Context context) {
        super(context);
    }

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return true;
    }
}

方法二：使用DrawerLayout实现侧边栏

这个是系统自带的，所以就直接上代码：

public class MainActivity extends AppCompatActivity {

    private Toolbar               mToolbar;
    private DrawerLayout          mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        //设置ToolbarLogo
        mToolbar.setLogo(R.mipmap.ic_launcher);
        //设置标题的margin
        mToolbar.setTitleMarginStart(100);
        //设置Toolbar主标题
        mToolbar.setTitle("主标题");
        //设置Toolbar副标题
        mToolbar.setSubtitle("副标题");
        setSupportActionBar(mToolbar);

        //实现DrawerLayout打开关闭监听
        mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar,
                R.string.open, R.string.close);
        mDrawerToggle.syncState();
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        initFragment();
    }

    private void initFragment() {
        //获取Fragment管理器
        FragmentManager fm = getSupportFragmentManager();
        //开启事务
        FragmentTransaction ft = fm.beginTransaction();
        //替换帧布局
        ft.replace(R.id.flContent,new ContentFragment());
        ft.replace(R.id.flLeft,new LeftFragment());
        //提交事务
        ft.commit();

    }
}

MAinActivity的布局：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <include layout="@layout/custom_toolbar"/>

    <include layout="@layout/custom_drawerlayout"/>
</LinearLayout>

Toolbar的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

</android.support.v7.widget.Toolbar>

DrawerLayout的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--内容界面-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

       <FrameLayout
           android:id="@+id/flContent"
           android:layout_width="match_parent"
           android:layout_height="match_parent"></FrameLayout>

    </LinearLayout>

    <!--侧滑菜单内容，必须指定其水平重力-->

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:background="#00ff77"
        android:layout_gravity="start"
        android:orientation="vertical">
         <FrameLayout
             android:id="@+id/flLeft"
             android:layout_width="match_parent"
             android:layout_height="match_parent"></FrameLayout>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

注意：我在使用SlidingMenu的时候，点击每一页使用的是ViewPager进行切换，这里使用的是Fragment嵌套Fragment，效果一样。（不过有点繁琐，哈哈）

Fragment的基类：（标准代码，都是一样的）。

public abstract class BaseFragment extends Fragment {

    public Activity mActivity;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mActivity = getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return initView();
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
           initData();
    }

    public abstract View initView();
    public void initData(){};
}

主内容ContentFragment：

BottomNavigationBarGitHub路径：

(https://github.com/Ashok-Varma/BottomNavigation)

public class ContentFragment extends BaseFragment implements BottomNavigationBar.OnTabSelectedListener {


    private BottomNavigationBar bottomBar;

    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_content, null);
        bottomBar = (BottomNavigationBar) view.findViewById(R.id.bottomNavigationBar);
        //初始化BottomNavigationBar底部栏
        initBottomBar();
        //初始化Fragment
        initFragment();
        return view;
    }

    private void initFragment() {
        //Fragement嵌套Fragment必须使用getChildFragmentManager()获取管理器
        FragmentManager fm = getChildFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        ft.replace(R.id.fl_child_fragment, new ConversationFragment());
        ft.commit();
    }


    private void initBottomBar() {
        BadgeItem badgeItem = new BadgeItem(); //标记的item，也就是那个小圆点
        badgeItem.setText("5")
                .setGravity(Gravity.RIGHT)  //靠右显示
                .setBackgroundColor(Color.RED)
                .setTextColor(Color.WHITE)
                .setHideOnSelect(false) //选中BottomNavigationBar时，不让小圆点隐藏
                .setAnimationDuration(100)
                .show();
        bottomBar
                .setActiveColor("#00ACFF") //设置选中时的颜色
                .setInActiveColor("#ABADBB")//设置为选中的颜色
                .addItem(new BottomNavigationItem( //增加item
                        R.mipmap.conversation_selected_2, "消息")
                        .setBadgeItem(badgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.contact_selected_2, "联系人"))
                .addItem(new BottomNavigationItem(R.mipmap.plugin_selected_2, "动态"))
                .setFirstSelectedPosition(0)  //默认第0个item被选中
                .initialise(); //最后一步初始化完成
        // BottomNavigationBar的点击事件
        bottomBar.setTabSelectedListener(this);
    }

    @Override
    public void onTabSelected(int position) {
        FragmentManager fm = getChildFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        switch (position) {
            case 0:
                ft.replace(R.id.fl_child_fragment, new ConversationFragment());
                ft.commit();
                break;
            case 1:
                ft.replace(R.id.fl_child_fragment, new ContactFragment());
                ft.commit();
                break;
            case 2:
                ft.replace(R.id.fl_child_fragment, new PluginFragment());
                ft.commit();
                break;
        }
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

侧边栏LeftFragment：(就简单的显示一个TextView)

public class LeftFragment extends BaseFragment {


    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_left, null);
        return view;
    }
}

消息ConversationFragment：(简单的显示一个TextView)

public class ConversationFragment extends BaseFragment {


    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_conversation, null);
        return view;
    }
}

联系人ContactFragment：(简单的显示一个TextView)

public class ContactFragment extends BaseFragment {


    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_contact, null);
        return view;
    }
}

动态PluginFragment：(简单的显示一个TextView)

public class PluginFragment extends BaseFragment {


    @Override
    public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_plugin, null);
        return view;
    }
}