android局部,Android开发(4)——手动实现界面局部

本节内容

1.添加容器

2.修改代码为kotlin风格

3.屏幕密度和像素的转换

4.为LinearLayout添加子控件

5.使用RelativeLayout实现布局

6.使用ConstraintLayout实现布局

在之前，我们都是直接在xml中布局，但是我们也可以不用xml，直接在MainActivity中用代码布局。本节内容就主要为用代码布局。

一、添加容器

1.先添加一个容器

val linearLayout = LinearLayout(this)

2.给容器设置宽高

linearLayout.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT)

3.设置布局方向，为了显示明显一点，还可以添加一个背景颜色

linearLayout.orientation = LinearLayout.VERTICAL

linearLayout.background = getDrawable(R.color.colorAccent)

4.添加容器到Activity上

setContentView(linearLayout)

二、修改代码为kotlin风格

1.可以直接使用apply函数，然后在里面设置相应的属性，这样就不需要用到临时变量了。

2.在添加容器到Activity上的时候，可以再用also函数，传入的参数就为it。

//创建容器

val container = LinearLayout(this).apply {

layoutParams = LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT

)

orientation = LinearLayout.VERTICAL

background = getDrawable(R.color.colorAccent)

}.also {

setContentView(it)

}

三、屏幕密度和像素的转换

1.默认情况下，在代码中写的尺寸都是px，像素。如果在代码中写的100 = 100px，但是在手机上运行起来后显示的也是100px。但是手机有不同的分辨率density。

2.如果density = 1，则对应的像素就是100px.如果density= 2，则对应的值为50dp。

3.根据密度值不同，显示出来的dp值也不同。

4.写一个函数，将dp转换为px

fun dp2px(dp:Int):Int{

return (resources.displayMetrics.density*dp).toInt()

}

四、为LinearLayout添加子控件

1.创建第一个子控件

//创建第一个子控件，为横向布局的LinearLayout

LinearLayout(this).apply {

layoutParams = LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,dp2px(100)

)

orientation = LinearLayout.HORIZONTAL

background = getDrawable(R.color.colorPrimaryDark)

//将当前子控件添加到父容器中

container.addView(this)

}

2.创建第二个子控件TextView

//创建第二个人子控件

TextView(this).apply {

layoutParams = LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT

)

background = getDrawable(R.color.colorPrimary)

container.addView(this)

}

3.为第一个子控件再添加几个控件，直接在后面.apply即可

.apply {

ImageView(this@MainActivity).apply {

layoutParams = LinearLayout.LayoutParams(

dp2px(120),

LinearLayout.LayoutParams.MATCH_PARENT

)

//设置图片资源

setImageResource(R.drawable.hm)

//设置填充模式

scaleType = ImageView.ScaleType.CENTER_CROP

//添加到容器中

addView(this)

}

}

4.再添加一个TextView在这个.apply里面

TextView(this@MainActivity).apply {

layoutParams = LinearLayout.LayoutParams(

0 ,

LinearLayout.LayoutParams.MATCH_PARENT

).apply {

weight = 1f

setMargins(dp2px(10),dp2px(10),dp2px(10),dp2px(10))

}

text = "加油，干饭人！！"

setTextColor(getColor(R.color.ColorWhite))

textSize = 20f

addView(this)

}

5.给第二个子控件再添加一些内容

TextView(this).apply {

layoutParams = LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT

).apply {

weight = 1f

setMargins(dp2px(10), dp2px(10), dp2px(10), dp2px(10))

}

text = "干饭人，起来干饭了！！！"

setTextColor(getColor(R.color.ColorWhite))

textSize = 20f

container.addView(this)

}

五、使用RelativeLayout实现布局

1.大部分和前面基本相似，首先创建一个容器

//创建Relative容器

val relativeLayout = RelativeLayout(this).apply {

//添加id

id = R.id.mContainer

//宽高

layoutParams = RelativeLayout.LayoutParams(

RelativeLayout.LayoutParams.MATCH_PARENT,

RelativeLayout.LayoutParams.MATCH_PARENT

)

//设置背景颜色

background = getDrawable(R.color.colorAccent)

//将这个视图添加到Activity对应的容器界面中

setContentView(this)

}

2.添加一张图片

//添加图片

ImageView(this).apply {

//给控件添加id

id = R.id.mHeader

//宽高

layoutParams = RelativeLayout.LayoutParams(dp2px(120),dp2px(90)).apply {

setMargins(dp2px(10),dp2px(10),0,0)

}

setImageResource(R.drawable.hm)

scaleType = ImageView.ScaleType.CENTER_CROP

relativeLayout.addView(this)

}

3.添加一个标题,addRule()函数有两个参数，一个是关系，一个是另外一个控件或容器的id。

//添加标题

TextView(this).apply {

layoutParams = RelativeLayout.LayoutParams(0,0).apply {

//设置和其他控件的相对关系

//和头像的相对关系

addRule(RelativeLayout.RIGHT_OF,R.id.mHeader)

//和父容器右边对齐

addRule(RelativeLayout.ALIGN_PARENT_END,R.id.mContainer)

//和头像顶部对齐

addRule(RelativeLayout.ALIGN_TOP,R.id.mHeader)

//和头像的底部对齐

addRule(RelativeLayout.ALIGN_BOTTOM,R.id.mHeader)

marginStart = dp2px(10)

}

text="有哪一些别人认为是神颜你却get不到的明星？"

setTextColor(getColor(R.color.colorPrimary))

textSize = 20f

relativeLayout.addView(this)

}

4.为图片和文本设置id，在resource资源里面的values里再添加一个ids.xml，并在里面存放我们所有的id值，什么样的name对应什么样的值。

六、使用ConstraintLayout实现布局

1.先添加一个容器

val constraintLayout = ConstraintLayout(this).apply {

id = R.id.mContainer

layoutParams = ConstraintLayout.LayoutParams(

ConstraintLayout.LayoutParams.MATCH_PARENT,

ConstraintLayout.LayoutParams.MATCH_PARENT

)

setContentView(this)

background = getDrawable(R.color.colorPrimaryDark)

}

2.添加一张图片

ImageView(this).apply {

id =R.id.mHeader

layoutParams = ConstraintLayout.LayoutParams(

dp2px(120), dp2px(90)

).apply {

//左边和父容器对齐

leftToLeft = R.id.mContainer

//顶部和父容器对齐

topToTop = R.id.mContainer

setMargins(dp2px(10),dp2px(10),0,0)

}

setImageResource(R.drawable.hm)

scaleType = ImageView.ScaleType.CENTER_CROP

constraintLayout.addView(this)

}

3.添加一个TextView

TextView(this).apply {

id = R.id.mTitle

layoutParams = ConstraintLayout.LayoutParams(

ConstraintLayout.LayoutParams.MATCH_PARENT,

ConstraintLayout.LayoutParams.MATCH_PARENT

).apply {

leftToRight = R.id.mHeader

rightToRight = R.id.mContainer

topToTop = R.id.mHeader

bottomToBottom=R.id.mHeader

setMargins(dp2px(10),dp2px(10),dp2px(10),0)

}

text= "有哪些比较冷门用完却真香的宝藏国货？"

setTextColor(getColor(R.color.colorAccent))

textSize= 20f

constraintLayout.addView(this)

}

4.再添加一个TextView

TextView(this).apply {

layoutParams = ConstraintLayout.LayoutParams(

ConstraintLayout.LayoutParams.MATCH_PARENT,

ConstraintLayout.LayoutParams.MATCH_PARENT

).apply {

leftToLeft = R.id.mContainer

rightToRight = R.id.mContainer

topToBottom = R.id.mHeader

bottomToBottom=R.id.mContainer

setMargins(0,dp2px(10),0,0)

}

text= "你穿到一个修仙文变成了一个试图勾引男主的恶毒女配怎么办"

setTextColor(getColor(R.color.colorPrimary))

textSize= 20f

constraintLayout.addView(this)

}

以上就是今天的全部内容了，再见！！