`

(转)How to preview DSL layouts made using Anko layouts

阅读更多

 转自: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功能更快刷新

 

 

 

 

  • 大小: 12 KB
  • 大小: 270.4 KB
分享到:
评论

相关推荐

    Data Manipulation with R(PACKT,2ed,2015)

    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

    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: ...

    Android代码-Anko的口号是让android开发者更高,更快,更强

    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

    Modern Auto Layout.zip

    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, 2nd Edition

    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 ...

    Pro JavaFX 9: A Definitive Guide to Building Desktop, Mobile, and Embedded Java

    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 ...

    Practical D3.js(Apress,2016)

    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 ...

    anko:令人愉快的Android应用程序开发

    :warning_selector: Anko已弃用。 请参阅以获取更多信息。 Anko是库,可以使Android应用程序的开发变得更快,更轻松... Anko Layouts是用于编写动态Android布局的DSL。 这是用Anko DSL编写的简单UI: verticalLayout

    Expert.Android

    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 ...

    Mastering Xamarin UI Development

    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 ...

    Practical D3.js [2016]

    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 ...

    Mastering.Xamarin.UI.Development.1786462001.epub

    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 ...

    Mastering.Xamarin.UI.Development.epub

    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 ...

    Mastering Xamarin UI Development pdf

    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开发中,窗口布局(layouts)是构建用户界面的核心元素。它们决定了应用程序屏幕上元素的排列方式和相互关系。本篇文章将深入探讨Android布局中的三种主要控件:RelativeLayout、GridLayout和LinearLayout...

    Hands-On Data Visualization with Bokeh pdf

    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 ...

    The Essential Guide to Flex 2 with ActionScript 3.0 源代码

    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...

Global site tag (gtag.js) - Google Analytics