https://github.com/tanpuer/skiaui2
Android UI based on Skia and Yoga
https://github.com/tanpuer/skiaui2
android javascript skia ui
Last synced: about 1 month ago
JSON representation
Android UI based on Skia and Yoga
- Host: GitHub
- URL: https://github.com/tanpuer/skiaui2
- Owner: tanpuer
- Created: 2024-02-04T10:29:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-24T01:47:38.000Z (7 months ago)
- Last Synced: 2024-10-24T15:42:17.099Z (7 months ago)
- Topics: android, javascript, skia, ui
- Language: C++
- Homepage:
- Size: 123 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SkiaUI
Using Skia, Yoga, SurfaceView/TextureView to build a simple Flexbox-UI framework for Android.
steps：
1. Compile skia https://skia.org/docs/user/build/ ，or **unzip arm64-v8a.zip and x86-64.zip files in jniLibs.**
2. Using Skia GL context.
3. Two threads: ui-thread & render-thread.
4. Only support FlexboxLayout. Measure/Layout/Draw are triggered by Vsync.
5. TouchEvents: dispatchTouchEvent/interceptTouchEvent/onTouchEvent.
6. Animations support scale/rotate/translate，and will be performed before measure.
support easing functions: https://easings.net/en
7. Dirty-Render: markDirty if next draw is necessary.
8. **Supported Widgets**:
View, ImageView, TextView, Icon, ProgressBar, SVGView, ShaderView, Lottie, VideoView,
YUVVideoView, ScrollView, MovingArea, RecyclerView, Swiper, Loading, Switch, Radio, Picker,
LyricView, InputView, FlexboxLayout, Page...
9. **PlatformView**:
render Android-Views such as WebView/EditText by SurfaceTexture/SkImage, just like Flutter.
render 3D View by Filament(other engines can also supported)/SurfaceTexture/SkImage.
render Video(ExoPlayer)/Camera by SurfaceTexture/SkImage.
...
10. **Development**:
| | | |
|--------|--------------------------------------|-------------------------------------------------------------------------|
| C++ | `` | See ExamplePage.cpp.
| js | `Import v8 to evaluate javascript` | See test.js in assets. Support **debug in chrome**.
| Kotlin | `Import kotlin`
`Compose-runtime` | Support **Live-Edit**, save code then ui will refresh. See HYComposeExamplePage.kt in java. | |
| React | `Import react/react-reconciler` | demo: https://github.com/tanpuer/skia-ui-react |
| Vue | `Import @vue/runtime-core` | demo: https://github.com/tanpuer/skia-ui-vue. Need import CSS-Selector(TODO). |
11. **Cross Platform**
ios: https://github.com/tanpuer/HYSkiaUI-iOS
12. Performance Problems:
Skia: Shader Compilation jank, cache kSKSL
