Kotlin笔记(33) — RelativeLayout布局的

前言

上节我们介绍了线性布局LinearLayout的使用，今天让我们来了解下行对布局RelativeLayout`的使用。

今天涉及知识点：

1. RelativeLayout 使用示例
2. 运行效果图
3. anko库中布局位置对应表

先来波运行效果图

image.png

一. RelativeLayout 使用示例

作为相对布局，在Android开发中使用也是十分频繁的，一般我们都是在布局文件中使用RelativeLayout，那么下面让我们来通过一个例子了解下其在代码中布局的使用。
下面贴出MainActivity中使用代码：

open class MainActivity : AppCompatActivity(),View.OnClickListener{

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test)

        init()
        initData()
        setListener()
    }

    private fun init(){
        //开启调试
        LogUtil.setDebug(true)
    }

    private fun initData(){
        //相对布局中添加一个View
        addView(RelativeLayout.ABOVE,rl_layout)
        //相对布局中添加一个Button 
        addButton()
    }

    private fun setListener(){

    }

    override fun onClick(v: View) {

    }

    /**相对布局中添加一个View**/
    private fun addView(locationId:Int,rLayout:RelativeLayout){
        var view=View(this@MainActivity)
        view.setBackgroundColor(Color.RED)
        var rlLayoutParmas=RelativeLayout.LayoutParams(dip(100),dip(100))
        rlLayoutParmas.addRule(locationId,rLayout.id)
        view.layoutParams=rlLayoutParmas
        rLayout.addView(view)
    }

    /**相对布局中添加一个View**/
    private fun addButton(){
        var button=Button(this@MainActivity)
        var parmas=RelativeLayout.LayoutParams(dip(60),dip(40))
        parmas.addRule(RelativeLayout.ALIGN_PARENT_END,rl_layout.id)
        button.layoutParams=parmas
        rl_layout.addView(button)

        button.setOnClickListener {
            toast("====我是按钮=====")
        }
    }
}

MainActivity的布局文件activity_test.xml十分简单：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/rl_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</RelativeLayout>

这里我们可以知道RelativeLayout设置控件位置视图的方法是：addRule.以让某个视图位于指定视图上方，并且与上级视图的左侧对齐为例，则调用如下：

      rlLayoutParmas.addRule(RelativeLayout.ABOVE,指定视图资源id)
      rlLayoutParmas.addRule(RelativeLayout.ALIGN_PARENT_END,指定上级视图资源id)

结合anko库的使用后，使得调用方便起来，则以上代码可写为：

        rlLayoutParmas.above(指定视图资源id)
        rlLayoutParmas.alignParentLeft()

二. 运行效果图

以上代码运行后，效果图如下：

image.png

三. anko库中布局位置对应表

anko库的添加使得布局的位置控制变得简洁多了，下面列出anko库中位置方法和RelativeLayou对应位置关系

相对位置说明	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_VERTICALLY
与上级视图顶部对齐	alignParentTop	ALIGN_PARENT_TOP
位于上级视图水平方向的中部	centerHorizontally	CENTER_HORIZONTALLY
与上级视图右侧对齐	alignParentRight	ALIGN_PARENT_RIGHRT
与上级视图底部对齐	alignParentBottom	ALIGN_PARENT_Bottom

ok，今天的内容就介绍到这里了，谢谢大家。