开发者学堂课程【mPaaS 小程序开发实战 - 教你如何独立运行小程序 ：Android 端04 小程序自定义导航栏】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/741/detail/13130
Android 端04 小程序自定义导航栏
小程序自定义导航栏
1、前置条件
如果您需要开通小程序自定义标题栏，需在 custom_config.json 中加入:
1.{
2. “value":"NO",
3. “"key" : "mp_ta_use_orginal_mini_nagivationbar
4. }
意思就是，小程序是否使用原生的导航栏，回答是 NO，使用自定义的导航栏。 把这些代码复制到工程里，默认可以使用小程序了。
2、操作步骤
mPaaS 小程序与 mPaaS H5 容器公用一个导航栏，因此，关于自定义标题栏的步骤，您可以参考以下链接:
. 10.1.68版本
.10.1.60及以下版本
打开10.1.68版本页面：
接入步骤
1.继承 AbsTitleView 抽象类并实现自定义导航栏。
2.实现 H5ViewProvider . 在 createTitleView 方法中创建并返回自定义导航栏实例。
1.public class H5ViewProviderlmpl implements H5ViewProvider{
2.@Override
3.public H5TitleView createTitleView(Context context) {
4.return new NewH5TitleViewlmpl(context);
5.}
6.
7.@Override
8.public H5NavMenuView createNavMenu(){
9.return null;
10.}
11.
12.@Override
13.public H5PullHeaderView createPullHeaderView (Context context, ViewGroup viewGroup){
14.return null;
15.}
16.
17.@Override
18.publicH5WebContentView
createWebContentView(Context context){
19.return null;
20.}
21.}
3.在合适的地方，比如应用启动时,设置 H5ViewProvider 至容器。
1.MPNebula.setCustomViewProvider(newH5ViewProviderlmpl( ));
4.如果工程是基于Portal&Bundle架构,需额外设置。
1.H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(),new H5ReplaceResourceProvider(){
2.@Override
3.public String getReplaceResourcesBundleName(){
4.return BuildConfig.BUNDLE_NAME;
5.}
6.});
第四步不用看，因为我们一般都是基于 AR 方式的，拷贝一下 Demo 工程的 AbsTitleView 实现，Demo 工程可以参考 mpaas-demo / android-tinyapp。TinyNavigationBar 继承 AbsTitleView，把他拷贝过来，需要一些 layout，另外，除了拷贝 AbsTitleView，小程序还需要有更多的拓展，小程序右上角有一个胶囊区，即 Option button 和 Close button。
右侧控制区
右侧控制区，也可称为 OptionMenu 控制区，主要用于提供更多操作给用户。
H5 容器:
小程序：
由上图可见，开发者需要为 OptionMenu 控制区预留两个视图区域。容器操作时会按照索引来操作这两块区域。
小程序右上角控制区
当处于小程序场景时，最右侧区域需要特殊实现，步骤如下:
1.继承 AbsTinyOptionMenuView 抽象类实现自定义控制区。
2.在合适的地方，比如应用启动时，设置 TinyOptionMenuViewProvider 至容器。
1.H5Utils.setProvider(TinyOptionMenuViewProvider.class.getName()， new TinyOptionMenuViewProvider(){
2. @Override
3. public AbsTinyOptionMenuView createView(Context context){
4.return new TinyOptionMenuView(context);
5.}
6.});
需要设置一个 Provider，Provider 最终设置为容器。
按照容器规范要求。开发者必须实现和配置更多和关闭按钮视图。
1. public abstract void setOptionMenuOnClickListener (View.OnClickListener listener);
2.
3. public abstract void setCloseButtononClickListener (View.OnClickListener listener);
4.Public abstract void setCloseButtonOnLong ClickListener(View.OnLongClickListener listener);
6.
7. public abstract void onStateChanged (TinyAppActionState currentState);
8.
9. public abstract View getView();
会有一些回调函数，比如要设置 OptionMenu 的 Click 事件，CloseButtonon 是右上角胶囊里关闭小程序事件以及长按事件，当小程序状态发生改变之后，右上角反馈的改变以及最终的返回 view。
比如当小程序定位时，右上角可能就会出现定位的图标。
把代码拷贝到 TinyOptionMenuView 中，这两个都需要一些 layout，h5_new_title_layout.xml 自定义的 title
layout_tiny right.xml 右边的胶囊区
把他拷贝过来，里面需要一些图片，比如胶囊区域需要 more 和 close 的按钮，layout 里需要一个 back 和 home 的按钮。把资源都拷贝过来，现在已经没有工程报错了。把实线实现了，设置要在整体框架初始化完成之后设置一次就可以了，把他设置给容器，这里可以参考 Demo 工程里面的 CustomTitleActivity，首先要自定义标题栏，第二是要设置右上角的胶囊区的 Provider，设置一个 Provider，返回实现的 TinyOption。
private void initcustomTitle(){
//自定义标题栏
MPNebula.setcustomViewProvider(new HSViewProvider(){
@Override
public HSTitleview createTitleView(Context context){
//返回自定义 title
return new TinyNavigationBar(context);
}
@Override
public H5NavMenuView createNavenu(){ return null; }
@Override
public H5PullHeaderView createPullHeaderView(Context context，ViewGroup viewGroup){
return null;
}
@Override
public H5WebContentView createwebContentView(Context context) { return null;}
});
//自定义小程序右上角配置栏
H5Utils.setProvider(TinyOptionMenuViewProvider.class.getName()，new TinyOptionMenuViewProvider(){
@Override
public AbsTinyOptionMenuView createView(Context context) {
return new TinyOptionMenuView(context);
)
});
}
}
只需要初始化一次就可以，直接在 IntCallback 的 PostInt 函数中初始化，一切都准备就绪，可以开始运行程序了。
打开小程序，可以看到现在的 title 已经是我们自定义过的，随便点击一个视图，上面的按钮就是arrow.back中自定义的按钮，Icon 就是他的标题也是自行设置的，胶囊区域也是自行绘制的，分别是更多和关闭的意思。
对应的事件可以自定义进行设置，这就是小程序整个 title 的设置，当然更多接口的返回值可以参考自定义导航栏这个文档，返回标题栏要实现 getTitle，设置主标题文本需要 setTitle，可以借助提供的接口函数做对应的实现。
