Android各種側(cè)滑欄總結(jié)

前言

經(jīng)常我們使用Android APP時(shí)，會注意到很多app都有側(cè)滑欄，比如網(wǎng)易云、B站、滴滴、QQ等。


網(wǎng)易云
滴滴

效果展示

本篇博客一共實(shí)現(xiàn)了5種樣式：

側(cè)邊欄樣式一 Android原生風(fēng)格
側(cè)邊欄樣式二 B站 網(wǎng)易云 滴滴風(fēng)格
側(cè)邊欄樣式三 iOS側(cè)滑風(fēng)格
側(cè)邊欄樣式四（仿QQ 5.0.0）風(fēng)格
側(cè)邊欄樣式五（仿QQ 8.0.0）風(fēng)格
5種側(cè)邊欄效果

代碼實(shí)現(xiàn)

側(cè)邊欄樣式一 Android原生風(fēng)格

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">

    <!--標(biāo)題欄樣式一-->
    <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>

    <!--側(cè)邊欄樣式-->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <!--主頁內(nèi)容-->
        <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>

        <!--側(cè)邊欄內(nèi)容-->
        <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="設(shè)置"
                    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實(shí)現(xiàn)的， NavigationView在標(biāo)簽里添加布局可以實(shí)現(xiàn)腳布局。

在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擴(kuò)展布局，布局是從右向左顯示，當(dāng)太寬的時(shí)候，會遮蓋item的內(nèi)容。


item擴(kuò)展信息

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關(guān)聯(lián)
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, 0, 0);
        drawer.setDrawerListener(toggle);//初始化狀態(tài)
        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(), "點(diǎn)擊了頭像", 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);
        //設(shè)置item的條目顏色
        navigationview.setItemTextColor(csl);
        //去掉默認(rèn)顏色顯示原來顏色  設(shè)置為null顯示本來圖片的顏色
        navigationview.setItemIconTintList(csl);

        //設(shè)置單個(gè)消息數(shù)量
        LinearLayout llAndroid = (LinearLayout) navigationview.getMenu().findItem(R.id.single_1).getActionView();
        TextView msg= (TextView) llAndroid.findViewById(R.id.msg_bg);
        msg.setText("99+");

        //設(shè)置條目點(diǎn)擊監(jiān)聽
        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //安卓
                Toast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_LONG).show();
                //設(shè)置哪個(gè)按鈕被選中
//                menuItem.setChecked(true);
                //關(guān)閉側(cè)邊欄
//                drawer.closeDrawers();
                return false;
            }
        });
    }
}

側(cè)邊欄樣式二 B站 網(wǎng)易云 滴滴

第二種方式第一種方式實(shí)現(xiàn)類似，只是調(diào)整了一下Toolbar與DrawerLayout順序，國內(nèi)大部分APP應(yīng)用采用這種側(cè)滑方式。

<?xml version="1.0" encoding="utf-8"?>
<!--側(cè)邊欄樣式-->
<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">

    <!--主頁內(nèi)容-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <!--標(biāo)題欄樣式一-->
        <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>

        <!--主頁內(nèi)容-->
        <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>

    <!--側(cè)邊欄內(nèi)容-->
    <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="設(shè)置"
                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>
狀態(tài)欄遮擋

但是還是注意幾點(diǎn)側(cè)滑時(shí)隱藏狀態(tài)欄，這里我們可以將狀態(tài)欄變成透明色，xml根布局設(shè)置為android:fitsSystemWindows="true"，否則主布局會進(jìn)入狀態(tài)欄，在Activity當(dāng)中添加如下代碼實(shí)現(xiàn)狀態(tài)欄透明：

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                //5.x開始需要把顏色設(shè)置透明，否則導(dǎo)航欄會呈現(xiàn)系統(tǒng)默認(rèn)的淺灰色
                Window window = activity.getWindow();
                View decorView = window.getDecorView();
                //兩個(gè) flag 要結(jié)合使用，表示讓應(yīng)用的主體內(nèi)容占用系統(tǒng)狀態(tài)欄的空間
                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);
                //導(dǎo)航欄顏色也可以正常設(shè)置
//                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);
            }
        }

接著一個(gè)bug未解決，又出現(xiàn)一個(gè)問題，那就是側(cè)滑時(shí)，狀態(tài)欄存在陰影


狀態(tài)欄陰影

最新的NavigationView控件作為側(cè)滑內(nèi)容，而谷歌把它寫死了，一直都會有那個(gè)狀態(tài)欄陰影，所以為NavigationView控件添加app:insetForeground=”@android:color/transparent” ，就可以完美解決這個(gè)問題。


最終結(jié)果

【注意】如果NavigationView默認(rèn)Menu布局無法滿足你們公司UI設(shè)計(jì)獅的要求，那么就要可以使用這個(gè)絕招了，通過Fragment自定義NavigationView布局。


NavigationView自定義布局
 getSupportFragmentManager().beginTransaction().replace(R.id.navigation_view,
                new NavigationViewFragment()).commit();

定義一個(gè)Fragment填充NavigationView，這樣就可以顯示Fragment的布局了。

側(cè)邊欄樣式三 iOS風(fēng)格側(cè)滑

IOS側(cè)邊欄

這種風(fēng)格側(cè)邊欄這里使用DrawerLayout兩個(gè)子布局之間切換實(shí)現(xiàn)，具體代碼：

<?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">

    <!--主頁內(nèi)容-->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <!--側(cè)邊欄內(nèi)容-->
    <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);
        //隱藏狀態(tài)欄時(shí)，獲取狀態(tài)欄高度
        int statusBarHeight = ScreenInfoUtils.getStatusBarHeight(this);
        //隱藏狀態(tài)欄
        ScreenInfoUtils.fullScreen(this);
        //初始化布局
        setContentView(R.layout.activity_style3);
        //初始化狀態(tài)欄的高度
        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關(guān)聯(lián)
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, 0, 0);
        drawerLayout.addDrawerListener(toggle);//初始化狀態(tài)
        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) {
            }
        });
    }
}

側(cè)邊欄樣式四（仿QQ 5.0.0）

縮放側(cè)邊欄

樣式四與樣式三差不多，只是onDrawerSlide里面跑的邏輯不一樣

// 滑動的過程中執(zhí)行 slideOffset：從0到1
//主頁內(nèi)容
View content = drawerLayout.getChildAt(0);
//側(cè)邊欄
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);

側(cè)邊欄樣式五（仿QQ 8.0.0）

樣式五其實(shí)跟樣式三差不多，它只是側(cè)邊欄全部鋪滿屏幕，這個(gè)時(shí)候側(cè)邊欄設(shè)置為match_parent仍然無法鋪滿屏幕。

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

//獲取側(cè)邊欄默認(rèn)寬度
ViewGroup.LayoutParams leftParams = leftMenu.getLayoutParams();
//獲取屏幕寬度
final int width = ScreenInfoUtils.getWindowWidth(this);
//獲取屏幕高度
final int height = ScreenInfoUtils.getFullActivityHeight(this);
//設(shè)置側(cè)邊的寬高(如果不重新設(shè)置，即時(shí)設(shè)置match_parent也只能占屏幕百分80)
leftParams.width = width;
leftParams.height = FrameLayout.LayoutParams.MATCH_PARENT;
leftMenu.setLayoutParams(leftParams);

這個(gè)時(shí)候我們可以將側(cè)邊視圖的寬高設(shè)置為屏幕的寬高，就可以解決這個(gè)問題。


側(cè)邊欄全屏

總結(jié)

這些都是平常玩Android應(yīng)用所看到的側(cè)邊欄，全部總結(jié)在這里，如果以后還看到其他類型的側(cè)邊欄再做補(bǔ)充。
github 地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容