OwaNEXTHanGee 先進 UI 研究組

OwaNEXT開發先進的 UI 框架及工具

讓不懂程式技術的設計師

可以短時間內快速打造出高品質的 UI

-- OwaNEXT

Even so

僅管如此

基礎知識

你還是必需要懂一點點

基礎知識

QML

基礎知識

JavaScript

Anyway

總之

Simple is enough

簡單理解已足夠

你的第一支 App

直接動手做

import QtQuick 2.0import QtQuick.Controls 1.0

ApplicationWindow { visible: true;

Rectangle { anchors.fill: parent; color: ‘white’; }}

Rectangle { x: 100; y: 100; width: 200; height: 200; radius: 5; opacity: 0.5; gradient: Gradient { GradientStop { position: 0.0; color: ‘#000000’ } GradientStop { position: 1.0; color: ‘#ffffff’ } }}

Image { x: 100; y: 100; width: 200; height: 200; source: ‘example.jpg’;}

Text { font.bold: true; font.family: ‘Droid Sans’; font.italic: true; font.underline: true; font.strikeout: true; font.pointSize: 16; lineHeight: 2; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; text: ‘Hello World!’;}

可拖曳的清單

ListView

ListView { anchors.fill: parent; orientation: ListView.Vertical; delegate: Rectangle { width: parent.width; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore }}

ListModel { ListElement { bgcolor: ‘red’ } ListElement { bgcolor: ‘yellow’ } ListElement { bgcolor: ‘white’ } ListElement { bgcolor: ‘blue’ } ListElement { bgcolor: ‘green’ } ListElement { bgcolor: ‘orange’ } ListElement { bgcolor: ‘black’ } ListElement { bgcolor: ‘gray’ }}

網格狀的排版

GridView

GridView { anchors.fill: parent; delegate: Rectangle { width: 50; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore }}

拼裝自己的元件

Assembly

Item { width: 100; height: 100;

Rectangle { anchors.fill: parent; color: ‘black’; }}

Item { width: 100; height: 100;

Rectangle { … } Image { id: icon; anchors.fill: parent; anchors.margins: 10; anchors.bottomMargin: 20; source: ‘hangee.jpg’; }}

Item { width: 100; height: 100;

Rectangle { … } Image { … } Text { anchors.top: icon.bottom; anchors.horizontalCenter: icon.horizontalCenter; text: ‘HanGee’; color: ‘white’; }}

怎麼做？

App Launcher

使用自己的元件替換即可

App Launcher

振奮人心的動畫

Animation

SequentialAnimation { running: true; loops: Animation.Infinite;

NumberAnimation { target: image; properties: 'opacity'; from: 0; to: 1; duration: 1000; easing.type: Easing.OutQuad; }}

SequentialAnimation { running: true; loops: Animation.Infinite;

NumberAnimation { ... } NumberAnimation { target: image; properties: 'opacity'; from: 1; to: 0; duration: 1000; easing.type: Easing.OutQuad; }}

控制手機功能

OwaNEXT APIs

Launcher 會用到的 API

HanGee.PackageManager

getApps() 和 startApp()

HanGee.PackageManager

● 取得應該顯示在 Launcher 介面上的 App 清單

HanGee.packageManager.getApps([ 'LAUNCHER' ]);

return: [ app1, app2, app3, … ]

● 執行指定 App

HanGee.packageManager.startApps(app);

https://github.com/HanGee/OwaNEXT

More About OwaNEXT

Need Your feedback

需要你的意見回饋

To Improve Our Training

幫助我們把課程做的更好

To Make People Be Able To Make App

讓更多人能開發 App 和設計 UI

han-gee.com

HanGee 國民機運動