zoukankan      html  css  js  c++  java
  • Kotlin入门-Android的基础布局

    线性布局
    线性布局LinearLayout是最常用的布局,顾名思义,它下面的子视图像是用一根线串了起来,所以其内部视图的排列是有顺序的,要么从上到下垂直排列,要么从左到右水平排列。排列顺序只能指定一维方向的视图次序,可是手机屏幕是个二维的平面,这意味着还剩另一维方向需要指定视图的对齐方式。故而线性布局主要有以下两种属性设置方法:
    1. setOrientation: 设置内部视图的排列方向。LinearLayout.HORIZONTAL表示水平布局,LinearLayout.VERTICAL表示垂直布局。
    2. setGravity: 设置内部视图的对齐方式。Gravity.LEFT表示靠左对齐、Gravity.RIGHT表示靠右对齐、Gravity.TOP表示靠上对齐、Gravity.BOTTOM表示靠下对齐、Gravity.CENTER表示居中对齐。
    空白距离margin和间隔距离padding是另外两个常见的视图概念,margin指的当前视图与周围视图的距离,而padding指的是当前视图与内部视图的距离。这么说可能有些抽象,接下来还是做个实验,看看它们的显示效果到底有什么不同。下面是个实验用的布局文件内容,通过背景色观察每个视图的区域范围:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <!-- 外层布局的背景色是蓝色 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#00aaff" >
            <!-- 中间布局的背景色是黄色 -->
            <LinearLayout
                android:id="@+id/ll_margin"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffff99" >
                <!-- 内层视图的背景色是红色 -->
                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#ff0000" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    与上述布局文件对应的页面Kotlin代码如下,根据不同的按钮分别设置不同方向上的margin和padding数值:

    //该页面用于演示margin和padding的区别
    class LinearLayoutActivity : AppCompatActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_linear_layout)
            //设置ll_margin内部视图的排列方式为水平排列
            ll_margin.orientation = LinearLayout.HORIZONTAL
            //设置ll_margin内部视图的对齐方式为居中对齐
            ll_margin.gravity = Gravity.CENTER
            btn_margin_vertical.setOnClickListener {
                //Kotlin对变量进行类型转换的关键字是as
                val params = ll_margin.layoutParams as LinearLayout.LayoutParams
                //setMargins方法为设置该视图与外部视图的空白距离
                //此处设置左边和右边的margin空白距离为50dp
                params.setMargins(0, dip(50), 0, dip(50))
                ll_margin.layoutParams = params
            }
            btn_margin_horizontal.setOnClickListener {
                val params = ll_margin.layoutParams as LinearLayout.LayoutParams
                //此处设置顶部和底部的margin空白距离为50dp
                params.setMargins(dip(50), 0, dip(50), 0)
                ll_margin.layoutParams = params
            }
            //setPadding方法为设置该视图与内部视图的间隔距离
            btn_padding_vertical.setOnClickListener {
                //此处设置左边和右边的padding间隔距离为50dp
                ll_margin.setPadding(0, dip(50), 0, dip(50))
            }
            btn_padding_horizontal.setOnClickListener {
                //此处设置顶部和底部的padding间隔距离为50dp
                ll_margin.setPadding(dip(50), 0, dip(50), 0)
            }
        }
    }
    依据页面代码例子,Kotlin代码与Java代码的写法有以下三点区别:
    1. Kotlin允许对属性orientation直接赋值,从而取代了setOrientation方法;类似的还有属性gravity取代了setGravity方法;
    2. Kotlin使用关键字as进行变量的类型转换;
    3. Kolin支持调用dip方法将dip数值转换为px数值,倘若由Java编码则需开发者自己实现一个像素转换的工具类;
    因为dip方法来自于Kotlin扩展的Anko库,所以需要在Activity代码头部加上下面一行导入语句:

    import org.jetbrains.anko.dip
    既然用到了Anko库,自然要修改模块的build.gradle,在dependencies节点中补充下述的anko-common包编译配置:

        compile "org.jetbrains.anko:anko-common:$anko_version"
    Anko库除了提供dip方法,还提供了sp、px2dip、px2sp、dimen等像素单位的转换方法,具体的方法说明见下表。
    dip    将dip单位的数值转换为以px为单位的数值
    sp    将sp单位的数值转换为以px为单位的数值
    px2dip    将px单位的数值转换为以dip为单位的数值
    px2sp    将px单位的数值转换为以sp为单位的数值
    dimen    将dip单位的数值转换为以sp为单位的数值

    相对布局
    由于线性布局的视图排列方式比较固定,既不能重叠显示也不能灵活布局,因此复杂一些的界面往往用到相对布局RelativeLayout。相对布局内部的视图位置不依赖于排列规则,而依赖于指定的参照物,这个参照物可以是与该视图平级的视图,也可以是该视图的上级视图(上级视图即相对布局自身)。有了参照物之后,还得指定当前视图位于参照物的哪个方向,才能确定该视图的具体位置。
    在代码中指定参照物及其所处方位,调用的是布局参数对象的addRule方法,方法格式形如“addRule(方位类型, 参照物的资源ID)”。下面是个给相对布局添加下级视图的Kotlin代码例子:

        //根据参照物与方位类型添加下级视图
        private fun addNewView(align: Int, referId: Int) {
            var v = View(this)
            v.setBackgroundColor(Color.GREEN)
            val rl_params = RelativeLayout.LayoutParams(100, 100)
            rl_params.addRule(align, referId)
            v.layoutParams = rl_params
            v.setOnLongClickListener { vv -> rl_content.removeView(vv); true}
            rl_content.addView(v)
        }
    代码里的方位类型有多种取值,比如RelativeLayout.LEFT_OF表示位于指定视图的左边,RelativeLayout.ALIGN_RIGHT表示与指定视图右侧对齐,RelativeLayout.CENTER_IN_PARENT表示位于上级视图中央等等。举个例子,让某视图位于指定视图上方,且与上级视图的左侧对齐,则调用addRule方法的Kotlin代码如下所示:

        rl_params.addRule(RelativeLayout.ABOVE, 指定视图的资源ID)
        rl_params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, 上级视图的资源ID)
    由此可见,常规的addRule调用代码有点冗长,因此Kotlin利用Anko库将相对位置进行了简化,具体办法是引入扩展函数实现相对位置的设定,譬如above方法代表位于指定视图上方,alignParentLeft方法代表与上级视图的左侧对齐。于是原来的Kotlin代码简化如下:

        rl_params.above(指定视图的资源ID)
        rl_params.alignParentLeft()
    因为这几个新方法来自于Anko库,所以要在代码头部加上下面一行导入语句:

    import org.jetbrains.anko.*
    另外要修改模块的build.gradle,在dependencies节点中补充下述的anko-common包编译配置:

        compile "org.jetbrains.anko:anko-common:$anko_version"
    除了above和alignParentLeft之外,Anko也提供了所有的相对位置设定方法,具体的对应关系说明见下表。
    Anko库的相对位置    RelativeLayout类的相对位置
    leftOf    LEFT_OF
    sameTop    ALIGN_TOP
    above    ABOVE
    sameLeft    ALIGN_LEFT
    rightOf    RIGHT_OF    
    sameBottom    ALIGN_BOTTOM
    below    BELOW
    sameRight    ALIGN_RIGHT
    centerInParent    CENTER_IN_PARENT
    alignParentLeft    ALIGN_PARENT_LEFT
    centerVertically    CENTER_VERTICAL
    alignParentTop    ALIGN_PARENT_TOP
    centerHorizontally    CENTER_HORIZONTAL
    alignParentRight    ALIGN_PARENT_RIGHT
    alignParentBottom    ALIGN_PARENT_BOTTOM
     
    ---------------------
    作者:湖前琴亭
    来源:CSDN
    原文:https://blog.csdn.net/aqi00/article/details/82829481
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    HDU 1261 字串数(排列组合)
    Codeforces 488C Fight the Monster
    HDU 1237 简单计算器
    POJ 2240 Arbitrage
    POJ 3660 Cow Contest
    POJ 1052 MPI Maelstrom
    POJ 3259 Wormholes
    POJ 3268 Silver Cow Party
    Codesforces 485D Maximum Value
    POJ 2253 Frogger(最短路)
  • 原文地址:https://www.cnblogs.com/it-tsz/p/11069128.html
Copyright © 2011-2022 走看看