Android笔记:在Flutter中嵌入原生View
2019-06-27 21:39
706 查看
在之前的一篇文章中,介绍了在原生项目中引入Flutter。
在这个基础上,记录一下在Flutter中引入原生View。(建议先看看上面的文章)
最终的结果就是,在原生项目中,以一个View的方式引入Flutter,再在这个Flutter的View中使用一个原生的View。
效果图如下:
整个界面分成了两部分,上面是Flutter的View,里面有个原生的ImageView。下面是原生的WebView。
开始
首先是MainActivity的布局文件,上面一个
FrameLayout用于承载Flutter。
[code]<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" tools:context=".MainActivity"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintHeight_percent="0.5" app:layout_constraintTop_toTopOf="parent"></FrameLayout> <WebView android:id="@+id/web" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/content"/> </android.support.constraint.ConstraintLayout>
Flutter以一个View的方式被装载。
[code]class MainActivity : AppCompatActivity() { @RequiresApi(Build.VERSION_CODES.LOLLIPOP) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableSlowWholeDocumentDraw() setContentView(R.layout.activity_main) val flutterView = Flutter.createView(this@MainActivity,lifecycle,"route1") ViewRegistrant().registerWith(flutterView.pluginRegistry) val layout = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT) content.addView(flutterView, layout) initWebView() } @SuppressLint("SetJavaScriptEnabled") private fun initWebView() { var webSettings = web.settings webSettings.javaScriptEnabled = true webSettings.setSupportZoom(false) web.requestFocusFromTouch() web.isVerticalScrollBarEnabled = false web.isHorizontalScrollBarEnabled = false web.loadUrl("https://www.baidu.com") } }
使用
val flutterView = Flutter.createView(this@MainActivity,lifecycle,"route1")生成一个FlutterView,然后Add到布局中。“route1”会被传入到Flutter中。
第一步
继承
PlatformViewFactory在它的
create()方法中返回一个在Flutter中要用的原生View。
这里我返回了一个
ImageView
[code]class NativeImageView(createArgsCodec: MessageCodec<Any>) : PlatformViewFactory(createArgsCodec) { override fun create(context: Context, i: Int, o: Any?): PlatformView { var imageView = ImageView(context) imageView.layoutParams = ViewGroup.LayoutParams(100, 100) imageView.background = context.resources.getDrawable(R.mipmap.ic_launcher) return object : PlatformView { override fun getView(): View { return imageView } override fun dispose() { } } } }
第二步
写一个桥接器,把上面写好的View传进去。
[code]class ViewRegistrant : PluginRegistry.PluginRegistrantCallback { override fun registerWith(registry: PluginRegistry) { val key = ViewRegistrant::class.java.canonicalName if (registry.hasPlugin(key)) return val registrar = registry.registrarFor(key) registrar.platformViewRegistry().registerViewFactory("imageView", NativeImageView(StandardMessageCodec())) } }
这里的
"imageView",会在Flutter中用到。
第三步
装载桥接器,把桥接器和我们已经创建好的FlutterView进行绑定。
ViewRegistrant().registerWith(flutterView.pluginRegistry)
技术交流qun:185873940
最后
在Flutter中引用即可。
[code]@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: Container( color: Color(0xff0000ff), child: SizedBox( width: size, height: size, child: AndroidView( viewType: 'imageView', ), ), ), floatingActionButton: new FloatingActionButton( onPressed: _changeSize, child: new Icon(Icons.add), ), );
注:此方法需要Android API 20以上,
最后
如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。
相关文章推荐
- react native 学习笔记----将react native嵌入到Android原生应用
- Android原生软件里嵌入一个基于cordova的网页页面(webview)
- Android使用WebView嵌入网页,网页内点击跳转到另一个网页后,返回问题解决
- Android菜鸟的成长笔记(27)——ViewPager的使用
- Android开发学习笔记:浅谈WebView
- Android笔记-View中的dispatchTouchEvent和onTouchEvent源码解析
- 学习笔记-Android webview和JS交互
- android应用开发揭秘例4-3笔记(TextView的使用)
- Android之WebView与原生js之间的相互调用
- BUG笔记:Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错
- 【COCOS2DX-ANDROID-游戏开发之二三】 界面中嵌入Android的WebView
- android viewpager显示三个item(横屏使用)-笔记
- Android开发笔记之自定义view篇(入门一简单的TextView)
- android笔记之ViewFlipper的使用
- Android笔记---- Android应用的界面开发(1)View和布局管理器
- IOS 与 Android WebView 中 JS 调用原生代码
- Android笔记——AutoCompleteTextView
- Android Camera之SurfaceView学习笔记
- ANDROID笔记:圆形ImageView
- Android 笔记 RecyclerView的简单使用