Android ViewPagerIndicator仿今日头条标题栏效果（二）

最新推荐文章于 2024-05-16 17:29:25 发布
最新推荐文章于 2024-05-16 17:29:25 发布
阅读量3k 收藏 5
点赞数 2
分类专栏： 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kieCool/article/details/78326256
版权

前面已经提到过一种效果，不过那是以前版本，而且也是项目中用到的效果。现在今日头条版本已经6.3.9了,他的tab切换动画有所更改，那么我们今天来看看这个高大上的今日头条就这个功能用到那些技术点。。
看效果图，过过眼




看内容就知道上面一张是头条的内容样式，下面一张是自己实现的，效果都差不多吧，看看这个技术点。
1，首先我们必须计算出滑块的矩形rect，而且是根据文本的多少变化的，这里需要用到viewpager里面的方法public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {｝根据这些参数，我们就知道当前的显示的item和滑动的时候的偏移量，来控制rect的大小。
2，滑动的时候文本显示状态是切割的，随着移动字是一点点的显示出来，这里涉及到一个知识点canvas.clipRect(indicatorRect)切割画布，在画布里面切割的区域内，按照坐标绘制文本，就可以实现效果。简单来说就是是就是两层文本，一层是原生的textview设置的，一层是canvas里面绘制的，这就和我以前提到的逐字歌词一个道理，有的需求滑块可能在文本的下方，我相信有了这个案例，实现起来就太easy了。

  /**
     * 滑块的区域Rect
     */
    private void initIndicatorRect() {

         currentTab = (ViewGroup) tabsContent.getChildAt(currentPosition);
        TextView newsText = (TextView) currentTab.findViewById(R.id.news_text);

        float left = currentTab.getLeft() + newsText.getLeft();
        float right = newsText.getWidth() + left;

        if (currentPositionOffset > 0 && currentPosition < tabCount - 1) {
            ViewGroup nextTab = (ViewGroup) tabsContent.getChildAt(currentPosition + 1);
            TextView nextNewsText = (TextView) nextTab.findViewById(R.id.news_text);
            float nextLeft = nextTab.getLeft() + nextNewsText.getLeft();
            left = left + (nextLeft - left) * currentPositionOffset;
            right = left + newsText.getWidth() * (1.0f - currentPositionOffset) + currentPositionOffset * nextNewsText.getWidth();
        }

        indicatorRect.set(
                ((int) left) + getPaddingLeft(),
                getPaddingTop() + currentTab.getTop() + newsText.getTop(),
                (int) (right + getPaddingLeft()),
                newsText.getHeight() + currentTab.getTop() + getPaddingTop() + newsText.getTop());

    }

滑块rect的计算，由于我们的需求效果就必须利用俩个相邻的item来计算，仔细看上面代码，left最开始获取的是当前高亮显示的textview相对最外侧HorizontalScrollView的距离，而left = left + (nextLeft - left) * currentPositionOffset公式可以看出，随着滑动left的值是变化的，不管是向左滑动还是向右滑动，left都会相应改变。right = left + newsText.getWidth() * (1.0f - currentPositionOffset) + currentPositionOffset * nextNewsText.getWidth();right计算，right是在right的值加上width，看公式一个宽度变小，一个宽度变大，这就和效果一样，在tab文本不一样长的时候，左右滑动，滑块的宽度会变化，最终变成目标宽度。


    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if(tabCount == 0){
            return;
        }
        initIndicatorRect();
        /**
         * 滑块绘制
         */
        if (indicatorBG != null) {
            indicatorBG.setBounds(indicatorRect);
            indicatorBG.draw(canvas);
        }
        for (int i = 0; i < tabCount; i++) {
            ViewGroup tab = (ViewGroup) tabsContent.getChildAt(i);
            TextView newsText = (TextView) tab.findViewById(R.id.news_text);
            if (newsText != null) {
                initIndicatorRect();
                canvas.clipRect(indicatorRect);
                canvas.drawText(newsText.getText().toString(),
                        tab.getLeft() + newsText.getLeft() + newsText.getPaddingLeft(),
                        getPaddingTop() + tab.getTop() + newsText.getTop() + newsText.getPaddingTop() + newsText.getMeasuredHeight() / 2 + offset,
                        textPait);
            }
        }

    }

根据rect 绘制高亮，这里就可以看出，绘制的是所有tab的文本，但是我们只能看到一部分高亮，关键就是canvas.clipRect(indicatorRect);这个区域rect。如果我们吧这句干掉，会是什么效果呢，看下图

这里写图片描述

这个图还是具有一点说服力的，至少可以说明绘制两层这个问题，这符合我的猜测。到现在为止基本的效果已经出来了，还有一个问题，当tab数量比较多，HorizontalScrollView一屏肯定装不下，部分会看不到。当你滑动到屏幕边缘的时候，tab也会滑动，这个时候隐藏的部分也会跟着出来，始终让高亮的文本在屏幕可见区域。于是下面代码开始工作了

   private void scrollToItem() {

        if (tabCount == 0) {
            return;
        }
        initIndicatorRect();
        int newScrollX = lastScrollX;
        if (indicatorRect.left < getScrollX() + scrollOffset) {
            newScrollX = indicatorRect.left - scrollOffset;

        } else if (indicatorRect.right > getScrollX() + getWidth() - scrollOffset) {
            newScrollX = indicatorRect.right - getWidth() + scrollOffset;

        }
        if (newScrollX != lastScrollX) {
            lastScrollX = newScrollX;
            scrollTo(newScrollX, 0);
        }

    }

当滑动到最左边和最右边的时候，让HorizontalScrollView.scrollTo移动到指定位置，好关键代码已经贴完了，下面吧所有的代码贴出来，copy 就能跑。。
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">

    <com.example.apple.Custom.TabIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="80dp" />



    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

滑块背景xml

<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F00" />
    <corners android:radius="4.0dip" />
</shape>

item xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <TextView
        android:id="@+id/news_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="4dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="4dp"
        android:textColor="#666"
        android:textSize="14sp" />

</FrameLayout>

最关键的自定义TabIndicator

public class TabIndicator extends HorizontalScrollView implements OnPageChangeListener {

    final String TAG = this.getClass().getSimpleName();

    private LayoutInflater mLayoutInflater;
    private ViewPager pager;
    /**
     * item容器
     */
    private LinearLayout tabsContent;

    /**
     * item数量
     */
    private int tabCount;

    /**
     * 当前显示item
     */
    private int currentPosition = 0;

    /**
     * 偏移量
     */
    private float currentPositionOffset = 0f;

    /**
     * 滑块区域
     */
    private Rect indicatorRect;
    private Paint textPait;


    /**
     * 滑块停留屏幕偏移量
     */
    private int scrollOffset = 20;
    private int offset = 1;
    private int lastScrollX = 0;

    /**
     * 滑块Drawable
     */
    private Drawable indicatorBG;
    private OnPageChangeListener listener;
    private int itemLayout;


    public TabIndicator(Context context) {
        this(context, null);
    }

    public TabIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setFillViewport(true);

        mLayoutInflater = LayoutInflater.from(context);
        indicatorRect = new Rect();
        textPait = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPait.setColor(Color.WHITE);

        tabsContent = new LinearLayout(context);
        tabsContent.setOrientation(LinearLayout.HORIZONTAL);
        addView(tabsContent, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        DisplayMetrics dm = getResources().getDisplayMetrics();
        scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
        offset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, offset, dm);
        itemLayout = R.layout.news_tab;

        indicatorBG = getResources().getDrawable(R.drawable.bg_indicator, context.getTheme());
    }

    public void setViewPager(ViewPager pager) {
        this.pager = pager;
        if (pager.getAdapter() == null) {
            throw new IllegalStateException("ViewPager does not have adapter");
        }
        pager.addOnPageChangeListener(this);
        notifyDataSetChanged();
    }

    public void notifyDataSetChanged() {
        tabsContent.removeAllViews();
        tabCount = pager.getAdapter().getCount();
        for (int i = 0; i < tabCount; i++) {
            addTab(i, pager.getAdapter().getPageTitle(i).toString());
        }

    }

    private void addTab(final int position, String title) {
        ViewGroup tab = (ViewGroup) mLayoutInflater.inflate(itemLayout, this, false);
        TextView newsText = (TextView) tab.getChildAt(0);
        newsText.setText(title);
        newsText.setGravity(Gravity.CENTER);
        newsText.setTextColor(Color.GRAY);
        newsText.setSingleLine();
        textPait.setTextSize(newsText.getTextSize());
        tab.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(position);
            }
        });

        tabsContent.addView(tab);
    }


    /**
     * 滑块的区域Rect
     */
    private void initIndicatorRect() {

        ViewGroup currentTab = (ViewGroup) tabsContent.getChildAt(currentPosition);
        TextView newsText = (TextView) currentTab.findViewById(R.id.news_text);

        float left = currentTab.getLeft() + newsText.getLeft();
        float right = newsText.getWidth() + left;

        if (currentPositionOffset > 0 && currentPosition < tabCount - 1) {
            ViewGroup nextTab = (ViewGroup) tabsContent.getChildAt(currentPosition + 1);
            TextView nextNewsText = (TextView) nextTab.findViewById(R.id.news_text);
            float nextLeft = nextTab.getLeft() + nextNewsText.getLeft();
            left = left + (nextLeft - left) * currentPositionOffset;
            right = left + newsText.getWidth() * (1.0f - currentPositionOffset) + currentPositionOffset * nextNewsText.getWidth();
        }

        indicatorRect.set(
                ((int) left) + getPaddingLeft(),
                getPaddingTop() + currentTab.getTop() + newsText.getTop(),
                (int) (right + getPaddingLeft()),
                newsText.getHeight() + currentTab.getTop() + getPaddingTop() + newsText.getTop());

    }


    private void scrollToItem() {

        if (tabCount == 0) {
            return;
        }
        initIndicatorRect();
        int newScrollX = lastScrollX;
        if (indicatorRect.left < getScrollX() + scrollOffset) {
            newScrollX = indicatorRect.left - scrollOffset;

        } else if (indicatorRect.right > getScrollX() + getWidth() - scrollOffset) {
            newScrollX = indicatorRect.right - getWidth() + scrollOffset;

        }
        if (newScrollX != lastScrollX) {
            lastScrollX = newScrollX;
            scrollTo(newScrollX, 0);
        }

    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if(tabCount == 0){
            return;
        }
        initIndicatorRect();
        /**
         * 滑块绘制
         */
        if (indicatorBG != null) {
            indicatorBG.setBounds(indicatorRect);
            indicatorBG.draw(canvas);
        }
        for (int i = 0; i < tabCount; i++) {
            ViewGroup tab = (ViewGroup) tabsContent.getChildAt(i);
            TextView newsText = (TextView) tab.findViewById(R.id.news_text);
            if (newsText != null) {
                initIndicatorRect();
                canvas.clipRect(indicatorRect);
                canvas.drawText(newsText.getText().toString(),
                        tab.getLeft() + newsText.getLeft() + newsText.getPaddingLeft(),
                        getPaddingTop() + tab.getTop() + newsText.getTop() + newsText.getPaddingTop() + newsText.getMeasuredHeight() / 2 + offset,
                        textPait);
            }
        }

    }


    /**
     * @param position             当前item
     * @param positionOffset       0和1区间变化
     * @param positionOffsetPixels 像素偏移量
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (listener != null) {
            listener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
        currentPosition = position;
        currentPositionOffset = positionOffset;
        scrollToItem();
        invalidate();

    }


    @Override
    public void onPageScrollStateChanged(int state) {
        if (listener != null) {
            listener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (listener != null) {
            listener.onPageSelected(position);
        }
    }

    /**
     * 设置viewpage滑动监听
     *
     * @param listener
     */
    public void addPageListener(OnPageChangeListener listener) {
        this.listener = listener;
    }

    public void setItemLayout(int lay) {
        itemLayout = lay;
    }

activity是最简单的代码了

String[] titles = {"我爱北京", "北京", "十九大", "北京是我家", "国贸", "中关村", "百度", "鸟窝", "天安门"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_indicator);
        TabIndicator indicator = (TabIndicator) findViewById(R.id.indicator);
        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return titles.length;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return titles[position];
            }

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

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

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                TextView textView = new TextView(getApplication());
                textView.setText(titles[position] + " " + position);
                textView.setTextColor(Color.RED);
                textView.setBackgroundColor(Color.GRAY);
                container.addView(textView);
                textView.setGravity(Gravity.CENTER);
                return textView;
            }
        });

        indicator.setViewPager(mViewPager);

    }

拓展一点

如果在上面我们不用scrollToItem里面的内容，干掉这个方法，在onPageSelected里面添加如下代码，给你五秒时间，猜猜看是什么样的效果

@Override
    public void onPageSelected(int position) {
        if (listener != null) {
            listener.onPageSelected(position);
        }
        ViewGroup checkView = (ViewGroup) tabsContent.getChildAt(position);
        if (checkView == null) {
            return;
        }
        int offset =  scrollOffset / 2 - checkView.getWidth() / 2;
        smoothScrollTo(checkView.getLeft() - offset, 0);

    }

这里写图片描述

上面提到过，逐字歌词，这种方法可以实现逐字歌词，本篇效果还可以用LinearGradient，有激情的基友，可以试试。
以上就是所有代码了，本着学习的态度，错误肯定是有的，就不要喷了。。。。好了，该睡觉了，晚安。。。

kieCool
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一起Talk Android吧（第三百七十八回：给ViewPager添加indicator）
talk_8的专栏
08-26 697
本章回中主要介绍如何在ViewPager中添加指示器，并且通过具体的代码来讲解，最后通过动画演示了具体的效果。
Android程序之Indicator介绍
03-26 527
Indicator确实是个老梗了... 有重写HorizontalScrollView的，有重写LinearLayout。 这个是重写LinearLayout的哦，往LinearLayout里add   TextView用作tab标签，在LinearLayout底部画一个矩形当作指示器。 ViewPager滚动的时候用简单的小学加减乘除混合运算来机选这个矩形位置，然后滚动就好了
ViewPager2页面指示器（圆形）
C_biubiubiu的博客
10-22 1847
ViewPager2页面指示器（圆形） 用法： Vp2IndicatorView indicator = findViewById(R.id.indi); ViewPager2 viewPager2 = findViewById(R.id.vp); List<Integer> list = new ArrayList<>(); list.add(R.drawable.se1); list.add(R.drawable.se2); list.add(R.drawable.se3);
关于Android改变TabLayout 下划线(Indicator)宽度实践总结
最新发布
2401_84910259的博客
05-16 247
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
android 自定义indicator,Android自定义Indicator
weixin_29800471的博客
05-25 513
最近利用空闲时间，通过贝塞尔曲线写了一个Indicator，效果如下(视频转换gif效果不好)完整代码传送门对于原点的绘制及变化，需要对贝塞尔曲线及通过三阶贝塞尔曲线绘制圆形有初步了解，请参考以下文章Bézier curve；Composite Bézier curve；Approximate a circle with cubic Bézier curves对于贝塞尔曲线理论，没有较为扎实的数学...
android学习记录6：实现ViewPager的Indicator
ganduwei的博客
02-05 431
虽然在android5.0中design中有了TabLayout来实现ViewPager的Indicator，简单好用。但这个是我自己实现的，学习了很多，记录在这里。效果图： 第一步新建一个类继承LinearLayout，用来绘制指示器，及提供Viewpager滑动时重绘指示器的额方法：public class ViewPagerIndicator extends LinearLayout{
Android仿今日头条顶部导航栏效果的实例代码
08-27
Android仿今日头条顶部导航栏效果的实例代码主要介绍了Android之仿今日头条顶部导航栏效果的实例代码，具有很好的参考价值，希望对大家有所帮助，在本文中，我们将详细介绍 Android 中仿今日头条顶部导航栏效果的...
Android 仿今日头条首页标题栏效果
03-30
这个项目名为"Android 仿今日头条首页标题栏效果"，旨在复现今日头条App首页顶部的滑动指示器功能，通常包括多个可滑动的Tab标签和对应的页面内容。 **一、Android ViewPaper库** 在描述和标签中提到了`Android ...
Android仿今日头条滑动页面导航效果
09-02
在Android开发中，为了实现类似今日头条的滑动页面导航效果，开发者经常利用ViewPager结合自定义的标题栏来达到目的。本篇文章将详细讲解如何使用PagerSlidingTabStrip这个第三方库来实现这一效果，并进行源码解析。...
Android 源码 毕业设计高仿今日头条新闻客户端 App
01-31
Android 源码 毕业设计高仿今日头条新闻客户端 App 现有功能: 1.获取各种频道的新闻列表,包括视频和非视频新闻； 2.查看新闻详情，包括视频和非视频新闻的详情； 3.查看新闻评论列表； 4.新闻数据本地存储，已经获取...
android indicator,android magicindicator 万能的指示栏框架学习
weixin_35748962的博客
05-27 761
1.打造一个项目上要求实现的带圆角的，有图片的底部跳转tab:结合这2个框架里面的对象使用：CommonNavigator+ CommonPagerTitleView二话不说先上效果图。 xml布局：1.simple_pager_title_layout.xmlandroid:layout_width="match_parent"android:layout_height="match_paren...
Android代码-Android-ViewPagerIndicator
08-08
Android-ViewPagerIndicator 一款仿MIUI的ViewPagerIndicator，支持Tab数量随意定义。 效果图 固定tab数量 非固定tab数量 用法 代码生成tab mIndicator.setVisibleTabCount(4);//设置可见Tab数量 mIndicator.setTabItemTitles(mDatas);//设置tab标题 mViewPager.setAdapter(mAdapter); mIndicator.setViewPager(mViewPager,0);//绑定ViewPager 直接布局中书写 布局中编写，则代码中只需要绑定ViewPager一行代码。 关于我 我的博客地址
Android-ViewPagerIndicator使用：--TabPageIndicator浅析
TryIT1993的专栏
10-13 2979
Android-ViewPagerIndicator使用：--TabPageIndicator浅析 TabPageIndicator这个类，可以加入图标进行切换，并且可以点击切换，可以形成放微信左右切换的效果。 首先：进行布局xml： LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr
android 之 indicatorView的实现分析
u011546675的博客
06-01 882
android 之Viewpaper的indicatorViewindicator的实现 使用一个软件常注意到刚使用软件时会有一个导览页，也就是我们将要实现的indicator(指示器)，接来我们介绍在android 中如何实现？ indicator的实现 首先，我们需要了解indicator的组成，一般来说，它是由几个圆点组成，翻到对应页时，圆点颜色改变，有些indicator圆点还有字母或者数...
Android开源框架ViewPagerIndicator的基本使用
热门推荐
hdhhd的博客
07-25 1万+
很多新闻资讯类的app都有一些共性，那就是有一行页签，然后点击页签的内容后，会跳转到对应的页面。有很多此类app都是用到了ViewPagerIndicator这个开源框架。此篇博客就对这个框架的使用做一个笔记。后续随着在开发中不同的额使用场景，也会增加此博客的内容。 今天就先对他的使用方式，做一个介绍，完成一个小demo 首先，写一个布局。这个布局很简单，如果使用到，直接复制再根据实际需求稍作...
Android ViewPagerIndicator仿今日头条标题栏效果（一）
kieCool的博客
10-23 1606
以前在项目中遇到这个需求，和头条标题栏效果一样，现在我就把最简单的实现方式贴出来，一起学习下。目前各大网站三类似的效果框架比比皆是，但是作为学习还是值得借鉴的。。
教你轻松自定义ViewPagerIndicator
crazychen的专栏
08-02 4100
ViewPagerIndicator集成分页指示器，其实就是标题栏和ViewPager的联动效果，大家先看一下效果图直观了解：（图侵删） 这篇文章将会教大家怎么简单快速地制作自己的ViewPagerIndicator，同时说明制作思路，让大家可以轻易的扩展和定制自己想要的效果。 由于文章的主要目的在于介绍整体思路，所以实现的界面效果可能不是很好看，不过大家看过这篇文章以后，一定可以自己
android studio仿今日头条
07-28
要在Android Studio中创建一个类似今日头条的应用程序，你需要掌握以下几个关键步骤： 1. 设计界面：使用XML布局文件创建应用程序的各个界面。你可以使用RecyclerView来展示新闻列表，使用CardView来展示每个新闻项...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值