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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    数组对象---数据存储
    运行vue项目时,无法自动打开页面怎么办?
    数组扁平化
    数组去重
    CSS-----------text-transform
    CSS3-----width:max-content,min-content和fit_content属性
    可迭代对象
    bit和byte的 区别?
    前端常见跨域问题?
    HackerRank "Lucky Numbers"
  • 原文地址:https://www.cnblogs.com/it-tsz/p/11069128.html
Copyright © 2011-2022 走看看