hikr app 只是另一個 android.view.View
先決條件
- 你應該安裝保險絲( https://www.fusetools.com/downloads)
- 你應該完成介紹教程
- 在終端:
fuse install android
- 在終端:
uno install Fuse.Views
步驟 1
git clone https://github.com/fusetools/hikr
第 2 步 :新增對 Fuse.Views
的包引用
在專案根資料夾中找到 hikr.unoproj
檔案,並將 Fuse.Views
新增到 Packages
陣列中。
{
"RootNamespace":"",
"Packages": [
"Fuse",
"FuseJS",
"Fuse.Views"
],
"Includes": [
"*",
"Modules/*.js:Bundle"
]
}
第 3 步 :使 HikrApp
元件保持整個應用程式
3.1 在專案根資料夾中建立一個名為 HikrApp.ux
的新檔案並貼上 MainView.ux
的內容。
HikrApp.ux
<App Background="#022328">
<iOS.StatusBarConfig Style="Light" />
<Android.StatusBarConfig Color="#022328" />
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="splash">
<SplashPage ux:Template="splash" router="router" />
<HomePage ux:Template="home" router="router" />
<EditHikePage ux:Template="editHike" router="router" />
</Navigator>
</ClientPanel>
</App>
3.2 在 HikrApp.ux
- 用
<Page>
替換<App>
標籤 - 將
ux:Class="HikrApp"
新增到開放時間 14 - 刪除
<ClientPanel>
,我們不必再擔心狀態列或底部導航按鈕
HikrApp.ux
<Page ux:Class="HikrApp" Background="#022328">
<iOS.StatusBarConfig Style="Light" />
<Android.StatusBarConfig Color="#022328" />
<Router ux:Name="router" />
<Navigator DefaultPath="splash">
<SplashPage ux:Template="splash" router="router" />
<HomePage ux:Template="home" router="router" />
<EditHikePage ux:Template="editHike" router="router" />
</Navigator>
</Page>
3.3 在 MainView.ux
中使用新建立的 HikrApp
元件
將 MainView.ux
檔案的內容替換為:
<App>
<HikrApp/>
</App>
我們的應用程式恢復了正常行為,但我們現在已將其提取到名為 HikrApp
的單獨元件中
步驟 4 在 MainView.ux
內用 <ExportedViews>
替換 <App>
標籤,並將 ux:Template="HikrAppView"
新增到 <HikrApp />
<ExportedViews>
<HikrApp ux:Template="HikrAppView" />
</ExportedViews>
記住模板 HikrAppView
,因為我們需要它來從 Java 獲取對我們檢視的引用。
注意。從保險絲文件:
當做正常的
fuse preview
和uno build
時,ExportedViews
將表現為App
不對。從 Fuse Studio 預覽時會出現此錯誤:
錯誤:無法在任何包含的 UX 檔案中找到 App 標記。你是否忘記包含包含 app 標籤的 UX 檔案?
步驟 5 將 SplashPage.ux
的 <DockPanel>
包裹在 <GraphicsView>
中
<Page ux:Class="SplashPage">
<Router ux:Dependency="router" />
<JavaScript File="SplashPage.js" />
<GraphicsView>
<DockPanel ClipToBounds="true">
<Video Layer="Background" File="../Assets/nature.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" Opacity="0.5">
<Blur Radius="4.75" />
</Video>
<hikr.Text Dock="Bottom" Margin="10" Opacity=".5" TextAlignment="Center" FontSize="12">original video by Graham Uhelski</hikr.Text>
<Grid RowCount="2">
<StackPanel Alignment="VerticalCenter">
<hikr.Text Alignment="HorizontalCenter" FontSize="70">hikr</hikr.Text>
<hikr.Text Alignment="HorizontalCenter" Opacity=".5">get out there</hikr.Text>
</StackPanel>
<hikr.Button Text="Get Started" FontSize="18" Margin="50,0" Alignment="VerticalCenter" Clicked="{goToHomePage}" />
</Grid>
</DockPanel>
</GraphicsView>
</Page>
步驟 6 將保險絲專案匯出為 aar 庫
- 在終端中,在根專案資料夾中:
uno clean
- 在終端中,在根專案資料夾中:
uno build -t=android -DLIBRARY
步驟 7 準備你的 android 專案
- 將 ti 從
.../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar
複製到.../androidRootProject/app/libs
- 將
flatDir { dirs 'libs' }
新增到 rootbuild.gradle
檔案中
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript { ... }
...
allprojects {
repositories {
jcenter()
flatDir {
dirs 'libs'
}
}
}
...
- 將
compile(name: 'app-debug', ext: 'aar')
新增到app/build.gradle
中的依賴項
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.2"
defaultConfig {
applicationId "com.shiftstudio.fuseviewtest"
minSdkVersion 16
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile(name: 'app-debug', ext: 'aar')
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
testCompile 'junit:junit:4.12'
}
- 將以下屬性新增到
AndroidManifest.xml
內的活動
android:launchMode="singleTask"
android:taskAffinity=""
android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize"
你的 AndroidManifest.xml
將如下所示:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.shiftstudio.fuseviewtest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:launchMode="singleTask"
android:taskAffinity=""
android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
第 8 步 :在你的 Activity
中顯示 Fuse.View HikrAppView
- 請注意,你的
Activity
需要繼承FuseViewsActivity
public class MainActivity extends FuseViewsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ViewHandle fuseHandle = ExportedViews.instantiate("HikrAppView");
final FrameLayout root = (FrameLayout) findViewById(R.id.fuse_root);
final View fuseApp = fuseHandle.getView();
root.addView(fuseApp);
}
}
activity_main.xml 中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.shiftstudio.fuseviewtest.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"
android:layout_height="wrap_content"
android:text="Hello World, from Kotlin" />
<FrameLayout
android:id="@+id/fuse_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:text="THIS IS FROM NATIVE.\nBEHIND FUSE VIEW"
android:layout_gravity="center"
android:textStyle="bold"
android:textSize="30sp"
android:background="@color/colorAccent"
android:textAlignment="center"
android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
注意
按下後退按鈕,在 Android 上,應用程式崩潰。你可以在保險絲論壇上關注這個問題。
A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0xdeadcab1 in tid 18026 (io.fuseviewtest)
[ 05-25 11:52:33.658 16567:16567 W/ ]
debuggerd: handling request: pid=18026 uid=10236 gid=10236 tid=18026
最後的結果是這樣的。你也可以在 github 上找到一個短片。