feat:add Navbar plugin for Android

Android/doric/src/main/AndroidManifest.xml

@@ -4,7 +4,9 @@
     <uses-permission android:name="android.permission.CAMERA" />
 
     <application>
-        <activity android:name="pub.doric.DoricActivity">
+        <activity
+            android:name="pub.doric.DoricActivity"
+            android:theme="@style/Theme.Design.Light.NoActionBar">
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
 

Android/doric/src/main/java/pub/doric/DoricContext.java

@@ -26,6 +26,7 @@ import java.util.HashMap;
 import java.util.Map;
 
 import pub.doric.async.AsyncResult;
+import pub.doric.navbar.IDoricNavBar;
 import pub.doric.navigator.IDoricNavigator;
 import pub.doric.plugin.DoricJavaPlugin;
 import pub.doric.shader.RootNode;
@@ -159,4 +160,14 @@ public class DoricContext {
     public IDoricNavigator getDoricNavigator() {
         return this.doricNavigator;
     }
+
+    private IDoricNavBar doricNavBar;
+
+    public void setDoricNavBar(IDoricNavBar navBar) {
+        this.doricNavBar = navBar;
+    }
+
+    public IDoricNavBar getDoricNavBar() {
+        return this.doricNavBar;
+    }
 }

Android/doric/src/main/java/pub/doric/DoricPanelFragment.java

@@ -26,6 +26,7 @@ import androidx.fragment.app.Fragment;
 
 import pub.doric.async.AsyncResult;
 import pub.doric.loader.DoricJSLoaderManager;
+import pub.doric.navbar.BaseDoricNavBar;
 import pub.doric.navigator.IDoricNavigator;
 import pub.doric.utils.DoricLog;
 
@@ -36,6 +37,7 @@ import pub.doric.utils.DoricLog;
  */
 public class DoricPanelFragment extends Fragment {
     private DoricPanel doricPanel;
+    private BaseDoricNavBar navBar;
 
     public static DoricPanelFragment newInstance(String scheme, String alias) {
         Bundle args = new Bundle();
@@ -48,14 +50,15 @@ public class DoricPanelFragment extends Fragment {
 
     @Override
     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
-        doricPanel = (DoricPanel) inflater.inflate(R.layout.doric_framgent_panel, container, false);
+        return inflater.inflate(R.layout.doric_framgent_panel, container, false);
-        return doricPanel;
     }
 
 
     @Override
     public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
         super.onViewCreated(view, savedInstanceState);
+        doricPanel = view.findViewById(R.id.doric_panel);
+        navBar = view.findViewById(R.id.doric_nav_bar);
         Bundle argument = getArguments();
         if (argument == null) {
             DoricLog.e("DoricPanelFragment argument is null");
@@ -72,6 +75,7 @@ public class DoricPanelFragment extends Fragment {
                 if (fragment instanceof IDoricNavigator) {
                     context.setDoricNavigator((IDoricNavigator) fragment);
                 }
+                context.setDoricNavBar(navBar);
             }
 
             @Override

Android/doric/src/main/java/pub/doric/DoricRegistry.java

@@ -20,6 +20,7 @@ import android.text.TextUtils;
 import pub.doric.loader.DoricAssetJSLoader;
 import pub.doric.loader.DoricHttpJSLoader;
 import pub.doric.loader.IDoricJSLoader;
+import pub.doric.plugin.NavBarPlugin;
 import pub.doric.plugin.NavigatorPlugin;
 import pub.doric.plugin.NetworkPlugin;
 import pub.doric.plugin.ShaderPlugin;
@@ -82,6 +83,8 @@ public class DoricRegistry {
         this.registerNativePlugin(NetworkPlugin.class);
         this.registerNativePlugin(StoragePlugin.class);
         this.registerNativePlugin(NavigatorPlugin.class);
+        this.registerNativePlugin(NavBarPlugin.class);
+
         this.registerViewNode(RootNode.class);
         this.registerViewNode(TextNode.class);
         this.registerViewNode(ImageNode.class);

Android/doric/src/main/java/pub/doric/navbar/BaseDoricNavBar.java

@@ -0,0 +1,105 @@
+package pub.doric.navbar;
+
+import android.app.Activity;
+import android.content.Context;
+import android.text.Layout;
+import android.text.StaticLayout;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.TextView;
+
+import androidx.annotation.AttrRes;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import pub.doric.R;
+
+/**
+ * @Description: pub.doric.navbar
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+public class BaseDoricNavBar extends FrameLayout implements IDoricNavBar {
+    private ViewGroup mTitleContainer;
+    private ViewGroup mRightContainer;
+    private ViewGroup mLeftContainer;
+    private TextView mTvTitle;
+
+    public BaseDoricNavBar(@NonNull Context context) {
+        this(context, null);
+    }
+
+    public BaseDoricNavBar(@NonNull Context context, @Nullable AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public BaseDoricNavBar(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        setup();
+    }
+
+    private void setup() {
+        LayoutInflater.from(getContext()).inflate(R.layout.doric_navigator, this);
+        mTitleContainer = findViewById(R.id.container_title);
+        mLeftContainer = findViewById(R.id.container_left);
+        mRightContainer = findViewById(R.id.container_right);
+        mTvTitle = findViewById(R.id.tv_title);
+        findViewById(R.id.tv_back).setOnClickListener(new OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                if (getContext() instanceof Activity) {
+                    ((Activity) getContext()).finish();
+                }
+            }
+        });
+    }
+
+    @Override
+    public boolean isHidden() {
+        return getVisibility() != VISIBLE;
+    }
+
+    @Override
+    public void setHidden(boolean b) {
+        setVisibility(b ? GONE : VISIBLE);
+    }
+
+    @Override
+    public void setTitle(String title) {
+        mTvTitle.setText(title);
+    }
+
+    private void updateTitleMargins() {
+        try {
+            int width = mRightContainer.getRight() - mLeftContainer.getLeft();
+            int leftWidth = mLeftContainer.getWidth();
+            int rightWidth = mRightContainer.getWidth();
+            int margin = Math.max(leftWidth, rightWidth);
+            if (leftWidth + rightWidth > width) {
+                mTitleContainer.setVisibility(GONE);
+            } else {
+                mTitleContainer.setVisibility(VISIBLE);
+                StaticLayout staticLayout = new StaticLayout(mTvTitle.getText(),
+                        mTvTitle.getPaint(), Integer.MAX_VALUE, Layout.Alignment.ALIGN_NORMAL,
+                        1.0f, 0.0f, false);
+                float textWidth = (staticLayout.getLineCount() > 0 ? staticLayout.getLineWidth(0) : 0.0f);
+                if (width - 2 * margin >= textWidth) {
+                    mTitleContainer.setPadding(margin, 0, margin, 0);
+                } else {
+                    mTitleContainer.setPadding(leftWidth, 0, rightWidth, 0);
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        super.onLayout(changed, left, top, right, bottom);
+        updateTitleMargins();
+    }
+}

Android/doric/src/main/java/pub/doric/navbar/IDoricNavBar.java

@@ -0,0 +1,31 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package pub.doric.navbar;
+
+/**
+ * @Description: pub.doric.navbar
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+public interface IDoricNavBar {
+    boolean isHidden();
+
+    void setHidden(boolean hidden);
+
+    void setTitle(String title);
+
+    void setBackgroundColor(int color);
+}

Android/doric/src/main/java/pub/doric/plugin/NavBarPlugin.java

@@ -0,0 +1,115 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package pub.doric.plugin;
+
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.github.pengfeizhou.jscore.ArchiveException;
+import com.github.pengfeizhou.jscore.JSDecoder;
+import com.github.pengfeizhou.jscore.JSObject;
+import com.github.pengfeizhou.jscore.JavaValue;
+
+import pub.doric.DoricContext;
+import pub.doric.extension.bridge.DoricMethod;
+import pub.doric.extension.bridge.DoricPlugin;
+import pub.doric.extension.bridge.DoricPromise;
+import pub.doric.navbar.IDoricNavBar;
+import pub.doric.utils.DoricUtils;
+import pub.doric.utils.ThreadMode;
+
+/**
+ * @Description: pub.doric.plugin
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+@DoricPlugin(name = "navbar")
+public class NavBarPlugin extends DoricJavaPlugin {
+    public NavBarPlugin(DoricContext doricContext) {
+        super(doricContext);
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void isHidden(DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            promise.resolve(new JavaValue(navBar.isHidden()));
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setHidden(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                boolean hidden = jsObject.getProperty("hidden").asBoolean().value();
+                navBar.setHidden(hidden);
+                View v = getDoricContext().getRootNode().getDoricLayer();
+                ViewGroup.LayoutParams params = v.getLayoutParams();
+                if (params instanceof ViewGroup.MarginLayoutParams) {
+                    ((ViewGroup.MarginLayoutParams) params).topMargin =
+                            hidden ? 0
+                                    : ((View) navBar).getMeasuredHeight();
+                }
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setTitle(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                String title = jsObject.getProperty("title").asString().value();
+                navBar.setTitle(title);
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setBgColor(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                int color = jsObject.getProperty("color").asNumber().toInt();
+                navBar.setBackgroundColor(color);
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+}

Android/doric/src/main/res/layout/doric_framgent_panel.xml

@@ -1,5 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<pub.doric.DoricPanel xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="match_parent">
-    android:background="#ffffff" />
+
+    <pub.doric.DoricPanel
+        android:id="@+id/doric_panel"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="#ffffff"
+        android:layout_marginTop="44dp" />
+
+    <pub.doric.navbar.BaseDoricNavBar
+        android:id="@+id/doric_nav_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
+
+</FrameLayout>

Android/doric/src/main/res/layout/doric_navigator.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <FrameLayout
+        android:id="@+id/nav_layout"
+        android:layout_width="match_parent"
+        android:layout_height="44dp"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:paddingLeft="15dp"
+        android:paddingRight="15dp">
+
+        <FrameLayout
+            android:id="@+id/container_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:gravity="center">
+
+            <TextView
+                android:id="@+id/tv_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:ellipsize="end"
+                android:singleLine="true"
+                android:textSize="16sp">
+
+            </TextView>
+        </FrameLayout>
+
+        <LinearLayout
+            android:id="@+id/container_left"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_gravity="center_vertical|left"
+            android:gravity="center"
+            android:orientation="horizontal">
+
+            <TextView
+                android:id="@+id/tv_back"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:drawableLeft="@drawable/doric_icon_back"
+                android:minWidth="30dp"
+                android:textColor="#000"
+                android:textSize="16sp" />
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/container_right"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_gravity="center_vertical|right"
+            android:gravity="center"
+            android:orientation="horizontal" />
+
+    </FrameLayout>
+
+</merge>

demo/index.ts

@@ -11,4 +11,5 @@ export default [
     'src/NetworkDemo',
     'src/StorageDemo',
     'src/NavigatorDemo',
+    'src/NavbarDemo',
 ]

demo/src/NavbarDemo.ts

@@ -0,0 +1,73 @@
+import { Group, Panel, navbar, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
+import { title, label, colors } from "./utils";
+
+@Entry
+class NavbarDemo extends Panel {
+    build(rootView: Group): void {
+        scroller(vlayout([
+            title("Navbar Demo"),
+            label('isHidden').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
+                        modal(context).alert(e)
+                    })
+                }
+            } as IText),
+            label('setHidden').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).isHidden()
+                        .then(e => navbar(context).setHidden(!e))
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+            label('setTitle').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).setTitle('Setted Title')
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+            label('setBgColor').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).setBgColor(Color.YELLOW)
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+        ]).apply({
+            layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
+            gravity: gravity().center(),
+            space: 10,
+        } as IVLayout)).apply({
+            layoutConfig: layoutConfig().atmost(),
+        }).in(rootView)
+    }
+}

demo/src/NavigatorDemo.ts

@@ -13,7 +13,9 @@ class NaivgatorDemo extends Panel {
                 textAlignment: gravity().center(),
                 height: 50,
             }),
-            ...['Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
+            ...[
+                'NavbarDemo',
+                'Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
                 'ListDemo', 'ModalDemo', 'NavigatorDemo',
                 'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
                     label(e).apply({

js-framework/src/util/nativeModules.ts

@@ -15,6 +15,8 @@
  */
 import { BridgeContext } from "../runtime/global";
 import { Gravity } from "./gravity";
+import { Panel } from "../ui/panel";
+import { Color } from "./color";
 
 export function modal(context: BridgeContext) {
     return {
@@ -182,16 +184,30 @@ export function navigator(context: BridgeContext) {
 }
 
 export function navbar(context: BridgeContext) {
+    const entity = context.entity
+    let panel: Panel | undefined = undefined
+    if (entity instanceof Panel) {
+        panel = entity
+    }
+
     return {
+        isHidden: () => {
+            return context.navbar.isHidden() as Promise<boolean>
+        },
         setHidden: (hidden: boolean) => {
-            return context.navbar.push({
+            return context.navbar.setHidden({
                 hidden,
             })
         },
         setTitle: (title: string) => {
-            return context.navbar.push({
+            return context.navbar.setTitle({
                 title,
             })
         },
+        setBgColor: (color: Color) => {
+            return context.navbar.setBgColor({
+                color: color.toModel(),
+            })
+        },
     }
 }