Android
Добавление FuseView в проект Android
Поиск…
Вступление
Экспортируйте Fuse.View из fusetools и используйте его в существующем проекте Android.
Наша цель - экспортировать все приложение примера hikr и использовать его внутри Activity
.
Окончательная работа может быть найдена @ lucamtudor / hikr-fuse-view
hikr, просто еще один 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
- замените теги
<App>
на<Page>
- добавьте
ux:Class="HikrApp"
к открытию<Page>
- удалите
<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 Используйте вновь созданный HikrApp
компонент внутри MainView.ux
Замените содержимое файла MainView.ux
на:
<App>
<HikrApp/>
</App>
Наше приложение возвращается к нормальному поведению, но теперь мы извлекли его в отдельный компонент HikrApp
Шаг 4 Внутри MainView.ux
замените теги <App>
на <ExportedViews>
и добавьте ux:Template="HikrAppView"
в <HikrApp />
<ExportedViews>
<HikrApp ux:Template="HikrAppView" />
</ExportedViews>
Помните шаблон HikrAppView
, потому что нам понадобится его, чтобы получить ссылку на наш взгляд с Java.
Примечание . Из документов плавких предохранителей:
ExportedViews
будет вести себя какApp
при выполнении обычногоfuse preview
иuno build
Не правда. Вы получите эту ошибку при предварительном просмотре из Fuse Studio:
Ошибка: не удалось найти тег приложения в любом из включенных файлов UX. Вы забыли включить 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 library
- в терминале, в корневой папке проекта:
uno clean
- в терминале, в корневой папке проекта:
uno build -t=android -DLIBRARY
Шаг 7 Подготовьте свой проект Android
- скопируйте aar из
.../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar
.../androidRootProject/app/libs
.../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'
}
}
}
...
- add
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 : Покажите Fuse.View HikrAppView
в вашей Activity
- обратите внимание, что ваша
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 .