将MainActivity与操作栏/工具栏和浮动按钮转换为Anko

我正在学习如何使用Kotlin / Anko。

我已经通过这里的例子,也克隆了模板项目,可以理解如何做一些基本的东西,但作为一个练习,我想转换这个简单的活动(从Android Studio中的空白活动生成并转换为Kotlin)使用安科也是如此。 Anko没有太多的例子,大多数只是上面引用的github页面的副本。

有人可以演示如何去将以下内容转换为Anko DSL?

MainActivity.kt

import android.os.Bundle import android.support.design.widget.FloatingActionButton import android.support.design.widget.Snackbar import android.support.v7.app.AppCompatActivity import android.support.v7.widget.Toolbar import android.view.Menu import android.view.MenuItem class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val toolBar = findViewById(R.id.toolbar) as Toolbar setSupportActionBar(toolBar) val fab = findViewById(R.id.fab) as FloatingActionButton fab.setOnClickListener { view -> Snackbar.make(view, "Replace this with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show() } } override fun onCreateOptionsMenu(menu: Menu): Boolean { menuInflater.inflate(R.menu.menu_main, menu) return true } override fun onOptionsItemSelected(item: MenuItem): Boolean { val id = item.itemId if (id == R.id.action_settings) { println("settings clicked on ") return true } return super.onOptionsItemSelected(item) } } 

main_activity.xml

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout> 

content_main.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.gmail.npnster.mykotlinfirstproject.MainActivity" tools:showIn="@layout/activity_main"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:id="@+id/hello" /> </RelativeLayout> 

menu_main.xml

 <menu 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" tools:context="com.gmail.npnster.mykotlinfirstproject.MainActivity"> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> </menu> 

您可以使用ankoView方法在DSL上下文中不使用DSL方法创建View

例如,创建一个可以使用的NavigationView

 ankoView({ NavigationView(it) }) { lparams(width = wrapContent, height = matchParent, gravity = Gravity.START) // more initialization follows } 

这样你可以实例化FloatingActionButtonAppBarLayout ,只需在ankoView的第一个参数函数中调用它们的构造函数即可。 为了您的方便,您可以像使用手册一样使自己像DSL一样的功能:

 fun floatingActionButton(init: FloatingActionButton.() -> Unit) = ankoView({ FloatingActionButton(it) }, init) 

创建Toolbar更加简单: org.jetbrains.anko.appcompat.v7有一个DSL toolbar方法。


在使用Anko DSL时,为了包含另一个布局,就像对content_main所做的那样,可以使用Anko include函数,也可以只写一个填充ViewGroup的函数。 你可以使用这个模板:

 fun ViewGroup.myLayout() { textView("123") // more DSL code here } 

然后在一些ViewGroup初始化器中调用myLayout()

我知道这有点晚,但我希望它能帮助别人。 我这样做了布局(当然一些样式仍然是需要的):

 class MainUI(val adapter: MainUIAdapter) : AnkoComponent<MainActivity> { override fun createView(ui: AnkoContext<MainActivity>): View = with(ui) { coordinatorLayout { fitsSystemWindows = true appBarLayout { toolbar { setTitleTextColor(Color.WHITE) // so far still needed id = R.id.toolbar }.lparams(width = matchParent, height = matchParent) }.lparams(width = matchParent) relativeLayout { id = R.id.container recyclerView { // just an example id = R.id.recycler_view adapter = this@MainUI.adapter layoutManager = LinearLayoutManager(ctx) } }.lparams(width = matchParent, height = matchParent) { behavior = ScrollingViewBehavior() } floatingActionButton { onClick { doSomething() } imageResource = R.drawable.ic_add_white_24dp // the plus sign }.lparams { gravity = Gravity.BOTTOM or Gravity.END margin = dip(16) } } } } 

并在MainActivity中使用:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) MainUI(MainUIAdapter(people)).setContentView(this) toolbar = find<Toolbar>(R.id.toolbar) setSupportActionBar(toolbar) }