转自:https://blog.mindorks.com/how-to-preview-dsl-layouts-made-using-anko-layouts-f885c6bf67b3
This one is quickie about how to preview the layouts we make in DSL using Anko layouts. Before getting started it is probably wise to quickly go through what Anko, Anko layouts and DSL is for those who haven’t enjoyed them yet.
So Anko is a Kotlin library that helps make Android app development a pleasant experience by making development faster and code simple and concise to read. Anko layouts help us write dynamic layouts for our Android apps.
Here is a simple example activity, in which we use DSL layout instead of XML layout.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
verticalLayout {
gravity = Gravity.CENTER
padding = dip(20)
textView {
gravity = Gravity.CENTER
text = "Enter your request"
textColor = Color.BLACK
textSize = 24f
}.lparams(width = matchParent) {
margin = dip(20)
}
val name = editText {
hint = "What is your name?"
}
editText {
hint = "What is your message?"
lines = 3
}
button("Enter") {
onClick {
toast( "Hey ${name.text}! Thank you for contacting us. We will get in touch with you soon.")
}
}.lparams(dip(280), sp(80))
}
}
}
Run this activity and checkout the layout. It looks like below:Now let us move to getting or preview of DSL layout, which is very important when working on complicated layouts. Another thing to note before moving on is that preview only works if we define our layout in an external class that implements AnkoComponent
interface. Below is how we will modify our activity to define our view in a separate class:
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) MainActivityUI().setContentView(this) } class MainActivityUI : AnkoComponent<MainActivity> { override fun createView(ui: AnkoContext<MainActivity>) = with(ui) { verticalLayout { gravity = Gravity.CENTER padding = dip(20) textView { gravity = Gravity.CENTER text = "Enter your request" textColor = Color.BLACK textSize = 24f }.lparams(width = matchParent) { margin = dip(20) } val name = editText { hint = "What is your name?" } editText { hint = "What is your message?" lines = 3 } button("Enter") { onClick { toast( "Hey ${name.text}! Thank you for contacting us. We will get in touch with you soon.") } }.lparams(dip(280), sp(80)) } } } }
Now we need to install Anko support plugin. Go to plugins from Android Studio settings and search for Anko Support plugin and add it. Now put your cursor somewhere in the MainActivityUI
declaration and then open the Anko Layout Preview tool window by going to View > Tool Windows > Anko Layout Preview and then pressing Refresh.
Now this might not work in the first go as we need to rebuild the project for the layout to render properly.
Below is how our screen finally looks like, with Anko Layout Preview tool window open
*注意,anko layout preview并不会实时刷新,所以需要rebuild project才能显示更新。但是可以通过build----------make project功能更快刷新
相关推荐
You will not only learn about group-wise data manipulation, but also learn how to efficiently handle date, string, and factor variables along with different layouts of datasets using the reshape2 ...
Thymeleaf Examples: Layouts This is an example project containing code used in the "Thymeleaf Layouts" tutorial. The project was created using Spring MVC 4 Quickstart Maven archetype: ...
Anko is a Kotlin library ...Anko Layouts: a fast and type-safe way to write dynamic Android layouts; Anko SQLite: a query DSL and parser collection for Android SQLite; Anko Coroutines: utilities based on
How to build programmatic layouts without storyboards What is Auto Layout? What is a constraint? Who owns a constraint? How many constraints do I need? The many ways to create and edit a constraint ...
CSS Master is tailor-made for the web designer or front-end devleoper who’s really serious about taking their skills to the next level. Discover how to keep ahead of the game by adhering to best ...
Use the JavaFX platform to create rich-client Java applications and discover how you can use this powerful Java-based UI platform, which is capable of handling large-scale data-driven business ...
In Part Two, you will learn how to use D3.js to create the best charts and layouts. Uniquely, this book intertwines the technical details of D3.js with practical topics such as data journalism and ...
:warning_selector: Anko已弃用。 请参阅以获取更多信息。 Anko是库,可以使Android应用程序的开发变得更快,更轻松... Anko Layouts是用于编写动态Android布局的DSL。 这是用Anko DSL编写的简单UI: verticalLayout
How to create Custom Views, Controls, and Layouts How to create 3D experience with OpenGL ES 2.0 How to achieve speed to market through JSON, Form processing, and Parse How to eliminate memory leaks ...
You will learn how to implement UI structures and layouts, create customized elements, and write C# scripts to customize layouts. You will create UI layouts from scratch so that you can tweak and ...
In Part Two, you will learn how to use D3.js to create the best charts and layouts. Uniquely, this book intertwines the technical details of D3.js with practical topics such as data journalism and ...
You will learn how to implement UI structures and layouts, create customized elements, and write C# scripts to customize layouts. You will create UI layouts from scratch so that you can tweak and ...
You will learn how to implement UI structures and layouts, create customized elements, and write C# scripts to customize layouts. You will create UI layouts from scratch so that you can tweak and ...
You will learn how to implement UI structures and layouts, create customized elements, and write C# scripts to customize layouts. You will create UI layouts from scratch so that you can tweak and ...
在Android开发中,窗口布局(layouts)是构建用户界面的核心元素。它们决定了应用程序屏幕上元素的排列方式和相互关系。本篇文章将深入探讨Android布局中的三种主要控件:RelativeLayout、GridLayout和LinearLayout...
Learn how to create interactive and visually aesthetic plots using the Bokeh package in Python Key Features A step by step approach to creating interactive plots with Bokeh Go from nstallation all ...
This book will show you how to create powerful, rich Internet applications using Flex 2 and ActionScript 3.0. After learning how to install and becoming familiar with the basics of the Flex Builder 2...