DrawerLayout && NavigationView

最新推荐文章于 2023-12-11 06:00:00 发布
最新推荐文章于 2023-12-11 06:00:00 发布
阅读量390 收藏 2
点赞数
分类专栏： android第三方库

http://www.jianshu.com/p/d70cfd724c7f


Material Design 控件知识梳理(1) - Android Design Support Library 是什么
Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知识梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知识梳理(4) - FloatingActionButton
Material Design 控件知识梳理(5) - DrawerLayout && NavigationView
Material Design 控件知识梳理(6) - Snackbar
Material Design 控件知识梳理(7) - BottomNavigationBar
Material Design 控件知识梳理(8) - TabLayout
Material Design 控件知识梳理(9) - TextInputLayout

一、概述

今天，我们来介绍两个和侧滑菜单有关的MD控件：

  • DrawerLayout：实现侧滑菜单的基础。
  • NavigationView：作为侧滑菜单布局的一种实现方式。

二、DrawerLayout

2.1 基本原理

当我们需要使用到侧滑菜单时，可以通过DrawerLayout来实现，DrawerLayout、侧滑菜单布局、普通布局这三者的关系为：



layout_gravity决定了将哪个菜单作为侧滑布局，DrawerLayout会根据是否声明了layout_gravity属性，把它内部的直接子View分成两类：

  • 对于没有声明layout_gravity的布局，那么它会将它们当作普通布局，并按照FrameLayout的方式来排列它们。
  • 对于声明了layout_gravity="start"或者layout_gravity="left"的布局，在普通情况下会将它们隐藏起来，当从屏幕的最左侧往右移动手指时，这个布局会渐渐展现出来，对于DrawerLayout的所有子View来说，只允许有一个子View的该属性为start/left，这就是我们的侧滑布局。
  • layout_gravity="end/right"和上面类似，只不过它的调出是从屏幕的右侧向左侧移动。

2.2 简单事例

下面是一个使用DrawerLayout的最简单的例子：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DrawerLayoutActivity">
    <!-- 普通布局 -->
    <FrameLayout
        android:id="@+id/fl_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="我是内容布局"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </FrameLayout>
    <!-- 侧滑布局 -->
    <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>

layout_drawer_normal就是侧滑菜单，我们将它的layout_gravity定义为start，按照前面的分析，它应当位于屏幕的左侧：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_gravity="start"
    android:layout_width="200dp"
    android:background="@android:color/holo_green_dark"
    android:layout_height="match_parent">
    <TextView
        android:text="我是侧滑布局"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

下面是最终的效果：


2.3 监听DrawerLayout的状态变化

如果我们希望监听DrawerLayout状态的变化，那么可以通过下面这个方法：

    private Toolbar mToolbar;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout_simple);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                Log.d("mDrawerLayout", "onDrawerSlide, slideOffset=" + slideOffset);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                Log.d("mDrawerLayout", "onDrawerOpened");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                Log.d("mDrawerLayout", "onDrawerClosed");
            }

            @Override
            public void onDrawerStateChanged(int newState) {
                Log.d("mDrawerLayout", "onDrawerStateChanged, state=" + newState);

            }
        });

    }

其中opened和closed方法都很好理解，就是对应展开和收起，而onDrawerSlide方法中的slideOffset，则对应于DrawerLayout展开的偏移值，全部展开时为1，全部收起时为0，onDrawerStateChanged对应于所处的状态：STATE_IDLE/STATE_DRAGGING/STATE_SETTLING。

三、DrawerLayout和Toolbar结合使用

3.1 Toolbar的NavigationIcon跟随DrawerLayout变化

下面，我们看一下把DrawerLayout和Toolbar相结合，做出下面的效果，让Toolbar的navigationIcon跟随着DrawerLayout变化：



当拖动侧边栏的时候，Toolbar的按钮会跟随着进行状态的变化，我们也可以通过点击Toolbar的按钮来展开和收起侧边栏，首先看我们的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@android:color/holo_green_dark"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 普通布局 -->
        <FrameLayout
            android:id="@+id/fl_content"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="我是内容布局"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </FrameLayout>
        <!-- 侧滑布局 -->
        <include layout="@layout/layout_drawer_normal"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

在Activity中，我们需要将Toolbar和DrawerLayout关联起来：

public class DrawerLayoutActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private DrawerLayout mDrawerLayout;

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

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); //1.决定显示.
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close); //2.传入Toolbar可以点击.
        mDrawerLayout.addDrawerListener(mActionBarDrawerToggle); //3.监听变化.
    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        //4.同步状态
        mActionBarDrawerToggle.syncState();
    }
}

这里需要做的有四步工作：

  • 将Toolbar作为ActionBar，并调用Toolbar的setDisplayHomeAsUpEnabled，这样最左边的Icon才可以显示。
  • 实例化ActionBarDrawerToggle，并传入Toolbar和DrawerLayout。
  • 通过DrawerLayout的addDrawerListener方法，让DrawerLayout的状态能够回调到ActionBarDrawerToggle。
  • 在onPostCreate中，调用ActionBarDrawerToggle的syncState方法。

3.2 DrawerLayout覆盖Toolbar

在上面的实现方式中，侧滑菜单位于Toolbar的下方，如果我们希望它覆盖Toolbar，那么可以像下面这样布局：

<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">
    <!-- 普通布局 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
        <FrameLayout
            android:id="@+id/fl_content"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="我是内容布局"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </FrameLayout>
    </LinearLayout>
    <!-- 侧滑布局 -->
    <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>

最终的效果为：


3.3 DrawerLayout和Toolbar延伸到状态栏上方

如果我们希望侧滑菜单的区域能够延伸到状态栏，那么可以进行以下三步的修改：

  • 第一步：修改Activity的style，让状态栏透明，并修改状态栏的颜色： 
    <resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="colorPrimary">@color/colorPrimary</item>
      <item name="colorAccent">@color/colorAccent</item>
      <!-- 修改状态栏颜色 -->
      <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
      <!-- 状态栏透明 -->
      <item name="android:windowTranslucentStatus">true</item>
  </style>
</resources>
  • 第二步：给Activity根布局设置android:fitsSystemWindows="true"属性 
    <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"
  android:fitsSystemWindows="true">
  <!-- 普通布局 -->
  <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:background="@android:color/holo_green_dark"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"/>
      <FrameLayout
          android:id="@+id/fl_content"
          android:background="@android:color/holo_orange_dark"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
          <TextView
              android:text="我是内容布局"
              android:layout_gravity="center"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"/>
      </FrameLayout>
  </LinearLayout>
  <!-- 侧滑布局 -->
  <include layout="@layout/layout_drawer_normal"/>
</android.support.v4.widget.DrawerLayout>
  • 第三步：给侧滑布局设置android:fitsSystemWindows="true"属性 
    <LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_gravity="start"
  android:layout_width="200dp"
  android:background="@android:color/holo_green_dark"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
  <TextView
      android:text="我是侧滑布局"
      android:layout_gravity="center"
      android:textColor="@android:color/white"
      android:gravity="center"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>
</LinearLayout>

通过以上三步，就可以达到沉浸式状态栏的效果：


四、NavigationView

4.1 Navigation属性

在使用DrawerLayout的时候，我们可以随意定义侧滑菜单的布局，NavigationView其实就是Google推荐的侧滑布局应该有的样子，它的效果类似于下面这样：



我们先来看一个使用Navigation的简单例子：

<android.support.design.widget.NavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/layout_drawer_navigation_header"
    app:menu="@menu/menu_navigation"
    app:itemIconTint="@android:color/white"
    app:itemBackground="@android:color/holo_green_dark"
    app:itemTextColor="@android:color/black">
</android.support.design.widget.NavigationView>

上面app各属性对应到下图中就是这样：



可以看到，Navigation分为两个部分：头部和列表。

  • 头部是app:headerLayout所指定的布局： 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <ImageView
      android:src="@drawable/ic_bg"
      android:scaleType="centerCrop"
      android:layout_width="match_parent"
      android:layout_height="200dp"/>
</LinearLayout>
  • 列表通过app:menu所指定： 
    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:id="@+id/favorite"
      android:icon="@mipmap/ic_launcher"
      android:title="收藏"/>
  <item
      android:id="@+id/wallet"
      android:icon="@mipmap/ic_launcher"
      android:title="钱包"/>
  <item
      android:id="@+id/photo"
      android:icon="@mipmap/ic_launcher"
      android:title="相册"/>
  <item
      android:id="@+id/file"
      android:icon="@mipmap/ic_launcher"
      android:title="文件"/>
</menu>
    menu当中的每个item就对应于列表当中的一项，而item的icon和title则分别对应列表项的图标和文字，如果希望对item进行分组，那么可以采用group的方式来组织menu： 
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:id="@+id/group1">
      <item
          android:id="@+id/favorite"
          android:icon="@mipmap/ic_launcher"
          android:title="group1 - item1"/>
      <item
          android:id="@+id/wallet"
          android:icon="@mipmap/ic_launcher"
          android:title="group1 - item2"/>
  </group>
  <group android:id="@+id/group2">
      <item
          android:id="@+id/photo"
          android:icon="@mipmap/ic_launcher"
          android:title="group2 - item1"/>
      <item
          android:id="@+id/file"
          android:icon="@mipmap/ic_launcher"
          android:title="group2 - item2"/>
  </group>
</menu>
    不同组之间就会被分割线隔开：


    如果想要给某个分组添加标题，那么可以采用subMenu的方式： 
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:id="@+id/group1">
      <item
          android:id="@+id/item1"
          android:icon="@mipmap/ic_launcher"
          android:title="group1 - item1"/>
      <item
          android:id="@+id/item2"
          android:icon="@mipmap/ic_launcher"
          android:title="group1 - item2"/>
  </group>
  <group android:id="@+id/group2">
      <item
          android:id="@+id/item3"
          android:icon="@mipmap/ic_launcher"
          android:title="group2 - item1"/>
      <item
          android:id="@+id/item4"
          android:icon="@mipmap/ic_launcher"
          android:title="group2 - item2"/>
  </group>
  <item
      android:id="@+id/item5"
      android:title="group3">
      <menu>
          <item
              android:id="@+id/item6"
              android:icon="@mipmap/ic_launcher"
              android:title="group3 - item1"/>
          <item
              android:id="@+id/item7"
              android:icon="@mipmap/ic_launcher"
              android:title="group3 - item2"/>
      </menu>
  </item>
</menu>

4.2 Navigation点击监听

4.2.1 列表点击监听

如果希望处理Navigation中列表的监听，那么可以使用现成的接口，根据item的id来判断是点击的是列表中的哪一项。

mNavigationView = (NavigationView) findViewById(R.id.navigation);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Log.d("onSelected", "id=" + item.getItemId());
        return true;
    } 
});

4.2.2 头部点击监听

NavigationView并没有提供头部点击的监听回调，因此，我们只能够通过findViewById的方法找到对应的View，对其设置监听，下面是整个headerLayout在NavigationView中的层次：


五、参考文献

Android 5.0 之 NavigationView 的使用

更多文章，欢迎访问我的 Android 知识梳理系列：



作者：泽毛
链接：http://www.jianshu.com/p/d70cfd724c7f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

code_dream_wq
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android新特性：DrawerLayout与NavigationView配合使用
01-20
android新特性：DrawerLayout与NavigationView配合使用
Android DrawerLayout和NavigationView 的使用方法
热门推荐
laxian2009的专栏
11-07 1万+
1、DrawerLayout 侧拉菜单作为常见的导航交互控件，最开始在没有没有android官方控件时，很多时候都是使用开源的SlidingMenu。使用DrawerLayout可以轻松的实现抽屉效果。DrawerLayout 在android.support.v4.widget.DrawerLayout这个包里。这里只说DrawerLayout最简单的实现，相当于hello world
Android---DrawerLayout + NavigationView
qq_44950283的博客
01-05 796
使用 DrawerLayout 和 NavigationView 实现左滑菜单（或右滑菜单）。src 与 srcCompat 的使用区别。使用 fitsSystemWindows 实现沉浸式状态栏效果。
Android 滑动菜单(DrawerLayout + NavigationView )
最新发布
帅次的博客
12-11 543
1.主内容视图一定要是DrawerLayout的第一个子视图且宽度和高度需要match_parent。 2.侧滑菜单必须添加android:layout_gravity属性，推荐使用 start|end，不推荐使用left|right。 3.侧滑视图的宽度以dp为单位，官方建议一般小于320(为了总能看到一些主内容视图)。 4.设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
Material Design实战之DrawerLayout与NavigationView
Android小白
04-09 166
一.DrawerLayout DrawerLayout就是滑动菜单。 DrawerLayout是一个布局，它允许放入两个直接子控件，第一个子控件是主屏幕显示的东西，第二个子控件是滑动菜单里面显示的东西。 ①所以我们可以在MainActivity的xml文件中中 <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.
DrawerLayout+NavigationView的用法demo下载
03-24
https://blog.csdn.net/qq_25804863/article/details/48698737
DrawerLayout和NavigationView实现侧滑菜单
09-18
DrawerLayout和NavigationView实现侧滑菜单博客地址：http://blog.csdn.net/xiaoqiang_0719/article/details/52574814
DrawerLayout+NavigationView+Toolbar
12-16
最近做了一个纯Kotlin开发的Android开源软件，刚好用到了Material Design设计风格。功能完善好，代码简单贴一下，方便日后查看和使用。原文地址http://blog.csdn.net/donkor_/article/details/78819081
NavigationView和DrawerLayout的结合
03-16
NavigationView和DrawerLayout的结合
DrawerLayout+Navigation侧滑框
07-10
DrawerLayout+Navigation侧滑框，下载以后就可以直接使用，侧滑框可以自己改，实现效果以及代码详解发在我的博客--侧滑框DrawerLayout和NavigationView完美合作，大家可以看了是否适合自己下载
DrawerLayout和NavigationView轻松实现抽屉侧滑
07-24
DrawerLayout和NavigationView轻松实现抽屉侧滑
NavigationView和DrawerLayout实现侧滑菜单栏
04-29
NavigationView和DrawerLayout实现侧滑菜单栏
Android-NavigationView+DrawerLayout实现抽屉菜单
08-26
Android-NavigationView+DrawerLayout实现抽屉菜单
侧滑框DrawerLayout和NavigationView完美合作
u012763405的博客
07-10 1224
【楔子】写之前讲下这个两个各自功能，DrawerLayout是管理抽屉拉进拉出，Navigation负责侧滑页面就是抽屉里面的东西，Google在Android5.0之后推出的NavigationView，导航栏菜单，这个菜单是什么呢？ Navigation分为上半部和下半部，为了适应我们现在的大部分App上半部分是头像资料信息，下半部分一些设置功能 &lt;strong&gt;app:...
Android Material Design 系列之 DrawerLayout + NavigationView 使用详解
一名互联网时代苟且偷生的 Android码农
06-25 1768
前言 DrawerLayout 是 Support Library 包中实现了侧滑菜单效果的控件，可以说 DrawerLayout 是因为第三方控件如 MenuDrawer 等的出现之后，google 借鉴而出现的产物。DrawerLayout 分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout 自身特性），主内容区的内容可以随着菜单的点击而变化。 一、DrawerLayout 基础使用 DrawerLayout 其实是一个布局控件，继承 ViewGroup，与 Lin
【Material Design】DrawerLayout+NavigationView只看这一篇就够了
柳的博客
08-24 805
简述 NavigationView标准导航菜单，也叫做侧滑菜单，是谷歌对侧滑功能的一个整理。 一般是放在DrawerLayout中一起使用。 先来一张最简单的Material design风格的效果图 我们具体分解一下 该图由toolbar+drawerLayout+NavigationView组成 红色部分toolbar就不说了，大家的老朋友了，该篇主要讲紫色部分也就是drawerLayout+NavigationView 开始实现，首先依赖 implementati..
Toobar，DrawerLayout，NavigationVIew的简单使用 （部分）
weixin_58124208的博客
08-17 597
toolbar DrawerLayout NavigationVIew
学习笔记： DrawerLayout、NavigationView、FloatingActionButton、SnakeBar的使用
编码之路
01-11 594
一、一键生成 project &amp;gt; new Moudle &amp;gt; phone &amp;amp; Tablet Moudle &amp;gt; Navigation Drawer Activity 下面我们开始一步步实现上面的效果，学习各个新控件的使用方法 二、DrawerLayout 1. 简介 DrawerLayout，v4包提供的一个实现滑动菜单效果的控件。 2. ...
[Android]DrawerLayout滑动菜单+NavigationView
weixin_63357306的博客
02-07 589
滑动菜单，就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式即节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法。NavigationView是Material库中提供的一个控件，它不仅是严格按照Material Design的要求设计的，而且可以将滑动菜单页面的实现变得非常简单。第二个子控件是滑动菜单中显示的内容。第一个子控件是主屏幕中显示的内容。添加导航按钮展示滑动菜单。处理菜单项的点击事件。
android studio drawerlayout
03-16
Android Studio中的DrawerLayout是一个布局容器，它允许用户通过从屏幕边缘滑动来访问...DrawerLayout和NavigationView的结合使用可以为用户提供更好的应用程序体验，使他们能够轻松地浏览和访问应用程序的不同部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值