수색…


소개

fusetools에서 Fuse.View를 내보내고 기존 안드로이드 프로젝트 내부에서 사용하십시오.

우리의 목표는 전체 hikr 샘플 앱 을 내보내고 Activity 내에서 사용하는 것입니다.

최종 작업은 @ lucamtudor / hikr-fuse-view 에서 찾을 수 있습니다.

hikr 앱, 또 다른 android.view.View

선결 요건

1 단계

git clone https://github.com/fusetools/hikr

2 단계 : Fuse.Views 패키지 참조 추가

프로젝트 루트 폴더에서 hikr.unoproj 파일을 찾아 "Packages" 배열에 "Fuse.Views" 를 추가하십시오.

{
  "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 MainView.ux 에서 새로 생성 된 HikrApp 구성 요소 사용

MainView.ux 파일의 내용을 다음으로 대체하십시오 :

<App>
    <HikrApp/>
</App>

우리의 앱은 정상적인 동작으로 되돌아 왔지만 이제는 HikrApp 라는 별도의 구성 요소로 압축을 풀었습니다.

4 단계 MainView.ux 에서 <App> 태그를 <ExportedViews> 대체하고 ux:Template="HikrAppView"<HikrApp />

<ExportedViews>
    <HikrApp ux:Template="HikrAppView" />
</ExportedViews>

템플릿 HikrAppView 기억하십시오. Java에서 뷰에 대한 참조를 얻기 위해 필요하기 때문입니다.


참고 . 퓨즈 문서에서 :

ExportedViews 는 정상적인 fuse previewuno build 수행 할 때 App 작동합니다.

사실이 아니다. Fuse Studio에서 미리 볼 때이 오류가 발생합니다.

오류 : 포함 된 UX 파일에서 App 태그를 찾을 수 없습니다. app 태그가 포함 된 UX 파일을 포함하는 것을 잊었습니까?



5 단계 <GraphicsView> 에서 SplashPage.ux<DockPanel> SplashPage.ux

<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 단계 안드로이드 프로젝트 준비

  • .../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar 에서 .../androidRootProject/app/libs
  • flatDir { dirs 'libs' } 를 루트 build.gradle 파일에 build.gradle 하십시오.
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript { ... }

...

allprojects {
    repositories {
        jcenter()
        flatDir {
            dirs 'libs'
        }
    }
}

...
  • app/build.gradle 종속성에 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 보기

  • ActivityFuseViewsActivity 를 상속해야 함을주의하십시오.
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>

노트
안드로이드에서 뒤로 버튼을 누르면 응용 프로그램이 충돌합니다. 퓨즈 포럼 에서 문제를 확인할 수 있습니다.

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 에서 짧은 클립을 찾을 수도 있습니다.

hikr 퓨즈 샘플을 Android보기로 사용



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow