Android 端04小程序自定义导航栏|学习笔记

简介: 快速学习 Android 端04小程序自定义导航栏

开发者学堂课程【mPaaS 小程序开发实战Android 端04小程序自定义导航栏】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/301/detail/3514


Android 端04小程序自定义导航栏

内容介绍

一、小程序自定义标题栏

 

一、小程序自定义标题栏

1、前置条件

如果您需要开通小程序自定义标题栏,需在custom configjson中加入:

{

“value": "NO",

"key": "mp_ta_use_orginal_mini_nagivationbar"

}

加入到默认使用小程序的工程里面

小程序和 H5共用一个导航栏,我们可以参考 H5的设置

首先,要实现 AbsTitleView,实现 AbsTitleView 后,要在 H5ViewProvider 中返回回去,并且把 Provider 设置给容器。

Dame 可以参考 android-tinyapp

除了拷贝 AbsTitleView,还有小程序右上角的一个胶囊区 Option button和 close button。

小程序右上角控制区 

当处于小程序场景时,最右侧区域需要特殊实现,步骤如下:

(1)继承 AbsTinyOptionMenuView 抽象类实现自定义控制区。

(2)在合适的地方,比如应用启动时,设置 TinvQptionMenuViewProvider 至容器。H5Utils.setProvider(TinvOptionMenuViewProvider.class.getName0.new TinvOptionMenuViewProviderof

@Override

public AbsTinyOptionMenuView createView(Context context){

return new TinyOptionMenuView(context);

}

}); 

按照容器规范要求,开发者必须实现和配置更多和 关闭按钮视图。

publicabstract void setOptionMenuOnClickListener(View.OnClickListener listener);

public abstract void setCloseButtonOnClickListener(View.OnClickListener listener);

public abstract void setCloseButtonOnLongClickListener(View.OnLongClickListener listener);

public abstract void onStateChanged(TinyAppActionState currentState);

public abstract View getView();

当小程序在使用定位的时候,会出现一个图标。如下图:

image.png

h5_new_title_layout.xml(自定义的title)

layout_tiny_right.xml(右边的胶囊)

public class MyApplication extends Application{

@Override

protected void attachBaseContext(Context base){

super.attachBaseContext(base);

QuinoxlessFramework.setup(this,()→{H5Utils.setProvider(H5AppCenterPresetProvider.class.getName(),newTinyAppCenterPresetProvider());

});

)I

@Override

public void onCreate(){

super.onCreate();

QuinoxlessFramework.init();}}

把它设置给我们的容器。

一切准备就绪进行运行。

打开小程序,可以看到现在的小程序已经自定义过了,随机点击一个示图,可以看到如图示例:

image.png

以上就是自定义小程序的内容。

相关文章
|
10月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
684 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
356 0
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
2262 1
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
993 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
704 0
微信小程序:自定义关注公众号组件样式
|
API Android开发 开发者
Android经典实战之用WindowInsetsControllerCompat方便的显示和隐藏状态栏和导航栏
本文介绍 `WindowInsetsControllerCompat` 类,它是 Android 提供的一种现代化工具,用于处理窗口插入如状态栏和导航栏的显示与隐藏。此类位于 `androidx.core.view` 包中,增强了跨不同 Android 版本的兼容性。主要功能包括控制状态栏与导航栏的显示、设置系统窗口行为及调整样式。通过 Kotlin 代码示例展示了如何初始化并使用此类,以及如何设置系统栏的颜色样式。
848 2
|
API Android开发 Kotlin
Android实战经验分享之如何获取状态栏和导航栏的高度
在Android开发中,掌握状态栏和导航栏的高度对于优化UI布局至关重要。本文介绍两种主要方法:一是通过资源名称获取,简单且兼容性好;二是利用WindowInsets,适用于新版Android,准确性高。文中提供了Kotlin代码示例,并对比了两者的优缺点及适用场景。
1429 1
|
XML Android开发 数据格式
Android面试题之DialogFragment中隐藏导航栏
在Android中展示全屏`DialogFragment`并隐藏状态栏和导航栏,可通过设置系统UI标志实现。 记得在布局文件中添加内容,并使用`show()`方法显示`DialogFragment`。
275 2