红橙Darren视频笔记 筛选View 属性动画 Adapter模式 组合动画AnimatorSet 观察者模式（对比Android ListView） 练习

最新推荐文章于 2021-07-05 09:44:18 发布
最新推荐文章于 2021-07-05 09:44:18 发布
阅读量247 收藏
点赞数
分类专栏： 自定义view 设计模式 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011109881/article/details/112385994
版权

效果
在这里插入图片描述

一 布局分析：

分成三部分
1.菜单栏TabView部分 本文采用线性布局包裹TextView的形式 采用LinearLayout的原因是每个Tab页可以使用权重做到均分LinearLayout的效果
2.主题内容MainContent部分 本文为了简单处理 直接放一个相对布局
3.阴影部分ShadowView 是个半透明的View
3个部分放在一个相对布局中

二 添加适配器模式并进行查漏补缺

这里的适配器为了数据和Custom FilterView能够进行适配，使用不同的Adapter可以显示不同的数据 或者如果Adapter做的强大，可以使用一个Adapter显示各种格式的数据（本文以String数组为例）
具体的适配器模式可以参考这篇文章
https://blog.csdn.net/u011109881/article/details/82288922
给tabView的每个item增加点击动作
轮巡tab页 看看是不是点击了tab页
如果点击了当前显示的tab页 关闭主体内容 切换tab页颜色
如果点击了非当前显示的tab页 tab页的颜色需要变化 内容需要变化
给阴影增加点击动作关闭菜单

三 添加动画

动画没有什么难度 调试几把就可以了 主要这里练习了AnimatorSet可以进行组合动画

四 观察者模式练习

具体的观察者模式可以参考这篇文章
https://blog.csdn.net/u011109881/article/details/81043699
需求：
一般情况下我们的内容页主要是一些列表 那么我们希望点击列表页面的时候 能够获取到当前点击的item项 并同时关闭filteView界面（调用closeContent方法），那么我们势必要在adapter调用closeContent方法 观察者模式就是为了实现这个功能而产生的。（虽然说adapter直接持有CustomFilterView对象也可以实现 但是这样耦合性提高）
具体做法可以参考ListView setAdapter的相关写法
我将ListView 和当前的Demo相似的类列出如下
在这里插入图片描述
观察者模式的工作过程：
CustomFilterView包含一个观察者AdapterObserver，在setAdapter的时候注册到事件源/被观察者上，AdapterObserver成为实际观察者
当事件源发生事件事 调用notifyDataSetChanged 通知每一个观察者,因为CustomFilterView持有AdapterObserver，所以能够收到通知

在这里插入图片描述
正如我在https://blog.csdn.net/u011109881/article/details/81043699中所描述的一样

其实Java API的设计有点问题，在Java编程经验中有一条：要面向接口编程而不是面向实现。
我们发现原先我们自己写的Subject是个接口，而JAVA
API中的Observable是个实体类，这样如果我们的被观察者继承了Observable就无法继承其他类了，这就限制了被观察者实现的实体类的扩展和复用。
另外Java编程提倡多用组合少用继承。但是Observable将changed的控制方法大多设置为protected，这就意味着，即使我们把Observable的实体类组合到Observer实体类中，也无法控制changed因为protected只在本类及其子类可用。这违反了用组合少用继承，使得程序不够灵活，有时会限制程序的扩展。
因此上面的文件我尽量声明为接口 这是与视频以及源码不同之处

五 部分代码

Activity

public class MainActivity extends AppCompatActivity {

    CustomFilterView mCustomFilterView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewAdapter filterViewAdapter = new ViewBaseAdapter(this);
        mCustomFilterView = findViewById(R.id.filterView);
        mCustomFilterView.setFilterViewAdapter(filterViewAdapter);
    }
}

观察者接口

interface Observer {//角色定位 抽象观察者 类比Observer

    void notifyDataSetChanged();
}

View

class CustomFilterView extends RelativeLayout implements View.OnClickListener {//角色定位 CustomFilterView相当于ListView

    private static final long ANIMATION_DURATION = 300;
    private static final String TAG = "CustomFilterView";
    private LinearLayout mContainerTab;
    private RelativeLayout mContainerContent;
    private View mShadowView;
    private ViewAdapter mFilterViewAdapter;
    private int mCurrentTabIndex = 0;//当前所处Tab的位置
    private boolean isAnimating = false;
    private AdapterObserver mObserver;


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

    public CustomFilterView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //还是感觉使用xml创建的方式更加清晰 使用代码添加布局适合用在添加一两个View的情况 一旦View的个数增加 逻辑也变得复杂，层次不够清晰 容易出bug
        inflate(getContext(), R.layout.layout_filter, this);
        mContainerTab = findViewById(R.id.container_tab);
        mContainerContent = findViewById(R.id.container_content);
        mShadowView = findViewById(R.id.view_shadow);
    }

    public void setFilterViewAdapter(ViewAdapter filterViewAdapter) {
        //参考ListView的setAdapter
        if (mFilterViewAdapter != null && mObserver != null) {
            mFilterViewAdapter.unregisterObserver(mObserver);
        }
        this.mFilterViewAdapter = filterViewAdapter;
        mObserver = new AdapterObserver();
        //Adapter是具体的观察者（调用registerObserver的对象是观察者）
        mFilterViewAdapter.registerObserver(mObserver);


        //获取当前有几个tab页
        int count = mFilterViewAdapter.getCount();
        for (int i = 0; i < count; i++) {
            //显示tabView部分
            TextView tabView = (TextView) mFilterViewAdapter.getTabView(i);
            LinearLayout.LayoutParams tabViewLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            tabViewLayoutParams.weight = 1;
            tabView.setLayoutParams(tabViewLayoutParams);
            tabView.setTextColor(Color.BLACK);
            mContainerTab.addView(tabView);
            //给tabView的每个item增加点击动作
            tabView.setOnClickListener(this);

            //显示content部分 只显示第一页
            if (i == 0) {
                View contentView = mFilterViewAdapter.getContentView(i);
                mContainerContent.addView(contentView);
            }
        }
        //给第零页设置为选中状态
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setTextColor(Color.RED);
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setBackgroundColor(Color.GRAY);
        mShadowView.setOnClickListener(this);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //设置阴影区域为整个view的1/5
        LayoutParams mShadowViewLayoutParams = (LayoutParams) mShadowView.getLayoutParams();
        mShadowViewLayoutParams.height = MeasureSpec.getSize(heightMeasureSpec) / 5;
        mShadowView.setLayoutParams(mShadowViewLayoutParams);
    }

    @Override
    public void onClick(View v) {
        //轮巡tab页 看看是不是点击了tab页
        int tabCount = mFilterViewAdapter.getCount();
        for (int i = 0; i < tabCount; i++) {
            Log.d(TAG, "onClick: " + isAnimating);
            //点击了某一个tab页
            if (mContainerTab.getChildAt(i) == v) {
                //点击了当前显示的tab页 关闭主体内容 切换tab页颜色
                if (mContainerTab.getChildAt(mCurrentTabIndex) == v) {
                    closeContent();
                } else if (mCurrentTabIndex == -1) {//当前没有显示的tab页
                    openContent(i);
                } else {//点击了非当前显示的tab页  tab页text的颜色需要变化（注意新旧的当前页面都要变化） 内容需要变化
                    //旧tab状态更新
                    ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setTextColor(Color.BLACK);
                    ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setBackgroundColor(Color.WHITE);
                    mCurrentTabIndex = i;
                    //新tab页状态更新
                    ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setTextColor(Color.RED);
                    ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setBackgroundColor(Color.GRAY);
                    mContainerContent.removeAllViews();
                    mContainerContent.addView(mFilterViewAdapter.getContentView(i));
                }
            }
        }

        //如果点击了shadowView 同样关闭主体部分
        if (v == mShadowView) {
            closeContent();
        }
    }

    private void closeContent() {
        if (isAnimating) {
            return;
        }
        isAnimating = true;
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setTextColor(Color.BLACK);
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setBackgroundColor(Color.WHITE);
        mCurrentTabIndex = -1;
        //添加旧页面关闭动画
        ObjectAnimator transactionAnimateInY = ObjectAnimator.ofFloat(mContainerContent, "translationY", 0, -mContainerContent.getMeasuredHeight());
        ObjectAnimator alphaAnimate = ObjectAnimator.ofFloat(mShadowView, "alpha", 1f, 0);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATION_DURATION);
        //顺序播放动画
        animatorSet.playTogether(transactionAnimateInY, alphaAnimate);
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mContainerContent.setVisibility(GONE);
                mShadowView.setVisibility(GONE);
                isAnimating = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

    private void openContent(int tabIndex) {
        if (isAnimating) {
            return;
        }
        isAnimating = true;
        //新tab页状态更新
        mCurrentTabIndex = tabIndex;
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setTextColor(Color.RED);
        ((TextView) mContainerTab.getChildAt(mCurrentTabIndex)).setBackgroundColor(Color.GRAY);
        mContainerContent.setVisibility(VISIBLE);
        mContainerContent.removeAllViews();
        mContainerContent.addView(mFilterViewAdapter.getContentView(tabIndex));
        //添加新页面打开动画
        //设置主体位置的位移动画和阴影透明度动画
        mShadowView.setVisibility(VISIBLE);
        ObjectAnimator transactionAnimateInY = ObjectAnimator.ofFloat(mContainerContent, "translationY", -mContainerContent.getMeasuredHeight(), 0);
        ObjectAnimator alphaAnimate = ObjectAnimator.ofFloat(mShadowView, "alpha", 0, 1f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATION_DURATION);
        //顺序播放动画
        animatorSet.playTogether(transactionAnimateInY, alphaAnimate);
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimating = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

    //角色定位 具体观察者 类比ListView中的AdapterDataSetObserver
    class AdapterObserver implements Observer {
        @Override
        public void notifyDataSetChanged() {
            closeContent();
        }
    }
}

Adapter接口

public interface ViewAdapter {

    //角色定位 抽象的被观察者 参考ListView的Adapter.java
    void registerObserver(Observer observer);

    void unregisterObserver(Observer observer);

    void notifyContentItemClick(View view);


    // 获取总共有几个tab页
    abstract int getCount();

    // 获取当前tab的TabView
    abstract View getTabView(int position);

    // 获取当前tab的菜单内容
    abstract View getContentView(int position);
}

Adapter实现类

class ViewBaseAdapter implements ViewAdapter {//角色定位 具体的被观察者 类比ListView的BaseAdapter
    private Context mContext;
    String[] tabTexts = {"美食", "生活", "鬼畜", "动漫区", "其他"};
    protected final ArrayList<Observer> mObservers = new ArrayList<>();

    @Override
    public void registerObserver(Observer observer) {
        mObservers.add(observer);
    }

    @Override
    public void unregisterObserver(Observer observer) {
        mObservers.remove(observer);
    }

    @Override
    public void notifyContentItemClick(View view) {
        for (Observer observer : mObservers) {
            observer.notifyDataSetChanged();
        }
    }


    public ViewBaseAdapter(Context context) {
        this.mContext = context;
    }

    @Override
    public int getCount() {
        return tabTexts.length;
    }

    @Override
    public View getTabView(int position) {
        TextView textTabView = new TextView(mContext);
        textTabView.setPadding(10, 10, 10, 10);
        textTabView.setGravity(Gravity.CENTER);
        textTabView.setText(tabTexts[position]);
        return textTabView;
    }

    @Override
    public View getContentView(int position) {
        TextView textContentView = new TextView(mContext);
        textContentView.setGravity(Gravity.CENTER);
        textContentView.setText(tabTexts[position]);
        RelativeLayout.LayoutParams contentViewLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
        contentViewLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        textContentView.setLayoutParams(contentViewLayoutParams);

        textContentView.setOnClickListener(v -> {
            //事件源 具体的被观察者 这里通知其他观察者事件
            notifyContentItemClick(v);
        });

        return textContentView;
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Hello World!" />

    <com.example.customfilterview.CustomFilterView
        android:id="@+id/filterView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</RelativeLayout>


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

    <RelativeLayout
        android:background="#cfc"
        android:layout_below="@+id/container_tab"
        android:layout_above="@+id/view_shadow"
        android:id="@+id/container_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />

    <LinearLayout
        android:background="#fff"
        android:id="@+id/container_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />

    <View
        android:layout_alignParentBottom="true"
        android:id="@+id/view_shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#88888888" />

</RelativeLayout>

后记

后来在准备文章的时候测试到一些bug，当时已经很晚了，虽然有点累了 还是想在当天fix，然而花了将近1个多小时还是没有理清头绪。后来实在没有办法，只得留给第二天解决。早上看了不到五分钟就定位并解决问题了。人的大脑真实神奇，要高效的完成一项任务，充分的休息和清醒的大脑是必要的，否则只是堆砌事件反而没什么效果。

代码：
https://github.com/caihuijian/learn_darren_android

洌冰
关注
专栏目录
Android主线程耗时动画卡顿,Android性能优化实战之界面卡顿
weixin_34723270的博客
05-26 1040
原标题：Android性能优化实战之界面卡顿作者：红橙Darrenhttps://www.jianshu.com/p/18bb507d6e62今天是个奇怪的日子，有三位同学找我，都是关于界面卡顿的问题，问我能不能帮忙解决下。由于性能优化涉及的知识点比较多，我一时半会也无法彻底回答。恰好之前在做需求时也遇到了一个卡顿的问题，因此今晚写下这篇卡顿优化的文章，希望对大家有所帮助。1. 查找卡顿原因从上面...
Adapter加载动画源码
10-27
最简洁实现adapter加载动画的代码，还可自定义动画效果
XamarinAndroid组件教程RecylerView适配器设置动画
大学霸__IT达人
06-11 220
XamarinAndroid组件教程RecylerView适配器设置动画本小节将讲解动画相关设置，如动画的时长、插值器以及复合动画等。1.设置动画时长设置动画持续的时间可以使用AnimationAdapter抽象类中的SetDuration()方法，其语法形式如下：public virtual void SetDuration(int duration)其中，duration参数用来指定时长。2....
Android 自定义筛选视图
72的博客
09-04 737
哎 累了大概一个半月左右 项目学生版的终于搞完了，但是还有点小问题 未处理 小白入行写的很low，新版的教师版就在昨天也开始步入了新的起点，看了设计图 ，ui界面太复杂，一个界面6种布局，我丢对于我这种小白来说，苦不堪言啊，没办法写呗，在做页面的时候，发现了一个新的好玩的东西，下拉筛选，当时有想过用popwindow实现，但是相对来说，会很麻烦，其中也遇到了很多的问题，自己就百度...
Android自定义view之筛选按钮
qq_34942689的博客
08-11 627
前言： 现在市面上有很多需要判定当前的选项被选中然后在前面显示一个勾表示选中的效果，这种效果的实现方式有很多种，比如用一个button和一张图片来组合，下面是实现步骤。。先来看看简单的原型图： 步骤一： 自定义一个类，然后去继承一个Layout,这个layout可以是RelativeLayout，也可以是LinearLayout，也可以是ViewGroup,然后创建XML文件代
android 商品筛选view,FilterTabView 基于 Popupwindow 实现的筛选房源信息等相关的控件，可以自由排序 @codeKK Android开源站...
weixin_39892842的博客
05-27 566
基于 Popupwindow 的下拉筛选控件 功能区分支持区域二级联动选择FilterTabConfig.FILTER_TYPE_AREA支持单行 List 样式选择FilterTabConfig.FILTER_TYPE_SINGLE_SELECT支持带 EditText 的单行选择FilterTabConfig.FILTER_TYPE_PRICE支持多类型选择FilterTabConfig...
essayJoke-1:红橙Darren仿写内涵段子
05-15
【标题】"essayJoke-1:红橙Darren仿写内涵段子"是一个与编程相关的项目，由用户红橙Darren创作，旨在模仿内涵段子的风格，结合编程领域的幽默元素，创建一种独特的IT文化体验。这个项目可能包含了一系列以编程为主题...
红橙回形箭头对比关系PPT图表
07-16
"红橙回形箭头对比关系PPT图表"是这样一种工具，它通过图形化的方式帮助观众直观理解两个或多个概念、数据集或变量之间的差异和联系。在这篇文章中，我们将深入探讨这种图表的设计原理、应用情境以及如何在PPT中创建...
红橙回形箭头对比关系图表PPT模板
03-20
"红橙回形箭头对比关系图表PPT模板"是一个专为展示对比关系设计的专业模板，它可以帮助用户直观地呈现不同数据或概念之间的差异和联系。 这个模板的核心在于其红橙回形箭头的设计，这种视觉元素不仅吸引注意力，...
时尚工作总结PPT模板-红橙黄绿蓝-PPT模板.pptx
02-04
【时尚工作总结PPT模板-红橙黄绿蓝-PPT模板.pptx】是一个设计精美的PPT模版，适用于各种工作汇报、计划总结或者信息汇总的场合。该模板以其时尚的风格，结合了红橙黄绿蓝五种颜色，旨在为用户创造出视觉效果丰富且...
Android自定义view实现下拉筛选菜单
04-01
Android自定义view实现下拉筛选菜单（仿美团下拉），源代码地址 http://www.ytsyt.cn/post/12.html
三处代码实现Adapter加载动画，还可自定义动画效果
l_215851356的专栏
11-30 870
转载地址：http://blog.csdn.net/pengkv/article/details/49448905 目录(?)[-] 效果图第一步添加滑动监听第二步在适配器里设置动画第三步回收动画防止卡顿附源码下载 效果图： 由于不会录制gif，所以只有截图展示效果，希望各位能告知如何截动态图 第一步：添加滑动监听 mRec
android 属性动画适配,Android 属性动画原理与DataBinding
weixin_42506706的博客
05-27 215
Android 属性动画原理与DataBinding看到这个标题的时候你可能会有疑问，属性动画和 DataBinding 之间有什么关系？我个人理解的是：它们内部的实现思想有相似之处。这篇文章主要对 Android 属性动画的知识通过文字进行整理记录，内容参考于《Android开发艺术探索》，在最后会给出我如此理解属性动画和 DataBinding 的原因。Android动画概述：Android ...
Android中ListView添加动画
qq97206858的博客
08-09 3076
Android开发中最常用的ListView以及GridView可以实现多种的动画，为我们的应用增加视觉的体验。比如携程机票搜索的列表页、卡牛等。今天咱们就看看如何实现炫酷的列表动画效果。首先如果只是对列表中的没一个item使用同一个动画效果，我们可以使用LayoutAnimation，顾名思义，是用来设置给viewgroup类型的animation，是子view来执行的。可以两种实现方式第一种方式
设置列表项监听器android,Android疑惑记录-----在Adapter中配置按钮监听器时,列表项内容获取混乱的问题...
weixin_36424744的博客
06-04 1198
xml布局如下:界面:代码:android:id="@+id/img_icon"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/ic_launcher"android:contentDescription="联系人头像"/>android:layout_height="wrap_con...
Android 设置属性动画AnimatorSet设置pause无效问题
清风洒脱
11-26 2135
前言 项目中做广告页动画，要求页面不可见（onpause、onstop）暂停动画执行，于是： /** *初始化动画、以及相关动画执行 */ AnimatorSet set = new AnimatorSet(); set.playTogether(animator, animator1);// 同时执行 set.setDuration(mLoadin...
android中如何让动画停止,让Android AnimatorSet停止制作动画
weixin_32331345的博客
05-25 2365
我有以下AnimatorSet方法：private AnimatorSet dialCenterThrob() {int bpm = workoutStream.getHeartRate();dialCenterImageView.clearAnimation();AnimatorSet finalSet = new AnimatorSet();ObjectAnimator pulseX = Ob...
红橙Darren视频笔记 热更新 bsdiff bspatch 在Android设备上的应用 架构篇1完结篇
积跬步 至千里
07-05 507
概述 当时红橙的视频讲解就差不多90分钟，但是真正自己做出来热更新的demo还是花了八九个晚上，期间遇到各种各样的问题，什么叫台上一分钟 台下十年功是深有体会了。 本节会涉及一部分NDK的知识 推荐阅读Android官方的NDK简介 https://developer.android.com/ndk/guides 上一节我们学习了如何在Linux下使用bspath和bsdiff 这次我们学习一下如何在Android设备上使用该第三方库 我们的热更新的一般流程是这样的 当然我们这里只是写个demo 大致了解
AOP用到的设计模式
最新发布
12-01
在AOP中，主要用到的设计模式是代理模式。代理模式是一种结构型设计模式，它允许对象在不改变其原始代码的情况下增加新的行为。在AOP中，代理模式通常用于实现Aspect，即将一组通用的横切关注点包装在一个Aspect中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值