模仿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;    }}