Android各种侧滑栏总结

前言

经常我们使用Android APP时，会注意到很多app都有侧滑栏，比如网易云、B站、滴滴、QQ等。

网易云 滴滴

效果展示

本篇博客一共实现了5种样式：

侧边栏样式一 Android原生风格

侧边栏样式二 B站 网易云 滴滴风格

侧边栏样式三 iOS侧滑风格

侧边栏样式四（仿QQ 5.0.0）风格

侧边栏样式五（仿QQ 8.0.0）风格

5种侧边栏效果

代码实现

侧边栏样式一 Android原生风格

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--标题栏样式一-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:subtitleTextColor="@android:color/white"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="样式1"
        app:titleTextColor="@android:color/white">
    </android.support.v7.widget.Toolbar>

    <!--侧边栏样式-->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <!--主页内容-->
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Hello World!"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
        </android.support.constraint.ConstraintLayout>

        <!--侧边栏内容-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigationview_header"
            app:menu="@menu/menu_navigation">

            <!--添加脚布局-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/footer_item_setting"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:background="@android:color/transparent"
                    android:drawableStart="@drawable/ic_setting"
                    android:drawableLeft="@drawable/ic_setting"
                    android:drawablePadding="1dp"
                    android:gravity="center"
                    android:paddingLeft="5dp"
                    android:text="设置"
                    android:textAlignment="inherit"
                    android:textColor="@color/colorPrimary"/>

                <Button
                    android:id="@+id/footer_item_out"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:drawableStart="@drawable/ic_out"
                    android:drawableLeft="@drawable/ic_out"
                    android:drawablePadding="1dp"
                    android:gravity="center"
                    android:paddingLeft="5dp"
                    android:text="退出"
                    android:textAlignment="center"
                    android:textColor="@color/colorPrimary"/>
            </LinearLayout>

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

</LinearLayout>

这里使用DrawerLayout+NavigationView实现的， NavigationView在标签里添加布局可以实现脚布局。

在menu文件添加item条目，

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <group
        android:id="@+id/group1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/single_1"
            android:icon="@drawable/ic_android_fill"
            android:title="安卓"
            app:actionLayout="@layout/bage_hint"/>

        <item
            android:id="@+id/single_2"
            android:icon="@drawable/ic_apple_fill"
            android:title="苹果"/>
    </group>

    <group
        android:id="@+id/group2"
        android:checkableBehavior="single">
        <item
            android:id="@+id/single_3"
            android:icon="@drawable/ic_github_line"
            android:title="github"/>

        <item
            android:id="@+id/single_4"
            android:icon="@drawable/ic_wechat_fill"
            android:title="wechat"/>
    </group>

    <item
        android:title="子菜单">
        <menu>
            <item
                android:id="@+id/item_2"
                android:icon="@drawable/ic_taobao_fill"
                android:title="淘宝"/>

            <item
                android:id="@+id/item_1"
                android:icon="@drawable/ic_baidu_line"
                android:title="百度"/>

            <item
                android:id="@+id/item_3"
                android:icon="@drawable/ic_qq_fill"
                android:title="腾讯"/>
        </menu>
    </item>
</menu>

bage_hint.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/msg_bg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/badge_bg"
        android:gravity="center"
        android:text="0"
        android:textColor="@android:color/white"
        android:textSize="10sp"/>
</LinearLayout>

vip_view.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_vip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/ic_vip"
        android:drawableLeft="@drawable/ic_vip"
        android:gravity="center"
        android:text="开通Vip 99元"
        android:textColor="@android:color/holo_red_light"
        android:textSize="12sp"/>
</LinearLayout>

其中需要注意的是app:actionLayout="@layout/bage_hint"，actionLayout这里是item扩展布局，布局是从右向左显示，当太宽的时候，会遮盖item的内容。

item扩展信息

Style1Activity.class代码：

public class Style1Activity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_style1);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        NavigationView navigationview = (NavigationView) findViewById(R.id.navigation_view);
        final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        setSupportActionBar(toolbar);//将toolbar与ActionBar关联
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, 0, 0);
        drawer.setDrawerListener(toggle);//初始化状态
        toggle.syncState();


        /*---------------------------添加头布局和尾布局-----------------------------*/
        //获取xml头布局view
        View headerView = navigationview.getHeaderView(0);
        //添加头布局的另外一种方式
        //View headview=navigationview.inflateHeaderView(R.layout.navigationview_header);

        //寻找头部里面的控件
        ImageView imageView = headerView.findViewById(R.id.iv_head);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "点击了头像", Toast.LENGTH_LONG).show();
            }
        });
        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                return false;
            }
        });
        ColorStateList csl = (ColorStateList) getResources().getColorStateList(R.color.nav_menu_text_color);
        //设置item的条目颜色
        navigationview.setItemTextColor(csl);
        //去掉默认颜色显示原来颜色  设置为null显示本来图片的颜色
        navigationview.setItemIconTintList(csl);

        //设置单个消息数量
        LinearLayout llAndroid = (LinearLayout) navigationview.getMenu().findItem(R.id.single_1).getActionView();
        TextView msg= (TextView) llAndroid.findViewById(R.id.msg_bg);
        msg.setText("99+");

        //设置条目点击监听
        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //安卓
                Toast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_LONG).show();
                //设置哪个按钮被选中
//                menuItem.setChecked(true);
                //关闭侧边栏
//                drawer.closeDrawers();
                return false;
            }
        });
    }
}

侧边栏样式二 B站 网易云 滴滴

第二种方式第一种方式实现类似，只是调整了一下Toolbar与DrawerLayout顺序，国内大部分APP应用采用这种侧滑方式。

<?xml version="1.0" encoding="utf-8"?>
<!--侧边栏样式-->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <!--主页内容-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <!--标题栏样式一-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="@color/colorPrimary"
            app:subtitleTextColor="@android:color/white"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="样式2"
            app:titleTextColor="@android:color/white">
        </android.support.v7.widget.Toolbar>

        <!--主页内容-->
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Hello World!"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
        </android.support.constraint.ConstraintLayout>

    </LinearLayout>

    <!--侧边栏内容-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigationview_header"
        app:insetForeground="@android:color/transparent"
        app:menu="@menu/menu_navigation">

        <!--添加脚布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/footer_item_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@android:color/transparent"
                android:drawableStart="@drawable/ic_setting"
                android:drawableLeft="@drawable/ic_setting"
                android:drawablePadding="1dp"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="设置"
                android:textAlignment="inherit"
                android:textColor="@color/colorPrimary"/>

            <Button
                android:id="@+id/footer_item_out"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:drawableStart="@drawable/ic_out"
                android:drawableLeft="@drawable/ic_out"
                android:drawablePadding="1dp"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="退出"
                android:textAlignment="center"
                android:textColor="@color/colorPrimary"/>
        </LinearLayout>

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

状态栏遮挡

但是还是注意几点侧滑时隐藏状态栏，这里我们可以将状态栏变成透明色，xml根布局设置为android:fitsSystemWindows="true"，否则主布局会进入状态栏，在Activity当中添加如下代码实现状态栏透明：

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                //5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色
                Window window = activity.getWindow();
                View decorView = window.getDecorView();
                //两个 flag 要结合使用，表示让应用的主体内容占用系统状态栏的空间
                int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
                decorView.setSystemUiVisibility(option);
                window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                window.setStatusBarColor(Color.TRANSPARENT);
                //导航栏颜色也可以正常设置
//                window.setNavigationBarColor(Color.TRANSPARENT);
            } else {
                Window window = activity.getWindow();
                WindowManager.LayoutParams attributes = window.getAttributes();
                int flagTranslucentStatus = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
                int flagTranslucentNavigation = WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION;
                attributes.flags |= flagTranslucentStatus;
//                attributes.flags |= flagTranslucentNavigation;
                window.setAttributes(attributes);
            }
        }

接着一个bug未解决，又出现一个问题，那就是侧滑时，状态栏存在阴影

状态栏阴影

最新的NavigationView控件作为侧滑内容，而谷歌把它写死了，一直都会有那个状态栏阴影，所以为NavigationView控件添加app:insetForeground=”@android:color/transparent” ，就可以完美解决这个问题。

最终结果

【注意】如果NavigationView默认Menu布局无法满足你们公司UI设计狮的要求，那么就要可以使用这个绝招了，通过Fragment自定义NavigationView布局。

NavigationView自定义布局

 getSupportFragmentManager().beginTransaction().replace(R.id.navigation_view,
                new NavigationViewFragment()).commit();

定义一个Fragment填充NavigationView，这样就可以显示Fragment的布局了。

侧边栏样式三 iOS风格侧滑

IOS侧边栏

这种风格侧边栏这里使用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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--主页内容-->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include layout="@layout/activity_content3"/>
    </FrameLayout>

    <!--侧边栏内容-->
    <FrameLayout
        android:id="@+id/menu_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <include layout="@layout/left_menu3"/>
    </FrameLayout>

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

Activity代码：

public class Style3Activity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //隐藏状态栏时，获取状态栏高度
        int statusBarHeight = ScreenInfoUtils.getStatusBarHeight(this);
        //隐藏状态栏
        ScreenInfoUtils.fullScreen(this);
        //初始化布局
        setContentView(R.layout.activity_style3);
        //初始化状态栏的高度
        View statusbar = (View) findViewById(R.id.view_statusbar);
        ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_PARENT, statusBarHeight);
        statusbar.setLayoutParams(params);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        setSupportActionBar(toolbar);//将toolbar与ActionBar关联
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, 0, 0);
        drawerLayout.addDrawerListener(toggle);//初始化状态
        toggle.syncState();

        //蒙层颜色
        drawerLayout.setScrimColor(getResources().getColor(R.color.colorGray));
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerStateChanged(int newState) {
            }

            @Override
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                View mContent = drawerLayout.getChildAt(0);
                View mMenu = drawerView;
                ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * slideOffset);
            }

            @Override
            public void onDrawerOpened(@NonNull View drawerView) {
            }

            @Override
            public void onDrawerClosed(@NonNull View drawerView) {
            }
        });
    }
}

侧边栏样式四（仿QQ 5.0.0）

缩放侧边栏

样式四与样式三差不多，只是onDrawerSlide里面跑的逻辑不一样

// 滑动的过程中执行 slideOffset：从0到1
//主页内容
View content = drawerLayout.getChildAt(0);
//侧边栏
View menu = drawerView;
//
float scale = 1 - slideOffset;//1~0
float leftScale = (float) (1 - 0.3 * scale);
float rightScale = (float) (0.7f + 0.3 * scale);//0.7~1
//menu.setScaleX(leftScale);//1~0.7
menu.setScaleY(leftScale);//1~0.7

//content.setScaleX(rightScale);
content.setScaleY(rightScale);
content.setTranslationX(menu.getMeasuredWidth() * slideOffset);//0~width
Log.d(TAG, "slideOffset=" + slideOffset + ",leftScale=" + leftScale + ",rightScale=" + rightScale);

侧边栏样式五（仿QQ 8.0.0）

样式五其实跟样式三差不多，它只是侧边栏全部铺满屏幕，这个时候侧边栏设置为match_parent仍然无法铺满屏幕。

 View leftMenu = findViewById(R.id.menu_frame);

//获取侧边栏默认宽度
ViewGroup.LayoutParams leftParams = leftMenu.getLayoutParams();
//获取屏幕宽度
final int width = ScreenInfoUtils.getWindowWidth(this);
//获取屏幕高度
final int height = ScreenInfoUtils.getFullActivityHeight(this);
//设置侧边的宽高(如果不重新设置，即时设置match_parent也只能占屏幕百分80)
leftParams.width = width;
leftParams.height = FrameLayout.LayoutParams.MATCH_PARENT;
leftMenu.setLayoutParams(leftParams);

这个时候我们可以将侧边视图的宽高设置为屏幕的宽高，就可以解决这个问题。

侧边栏全屏

总结

这些都是平常玩Android应用所看到的侧边栏，全部总结在这里，如果以后还看到其他类型的侧边栏再做补充。
github 地址