安卓实战开发Day03 2020.7.31

最新推荐文章于 2023-11-29 12:12:42 发布

独饮敌敌畏丶

最新推荐文章于 2023-11-29 12:12:42 发布

阅读量240

点赞数

分类专栏：早期安卓学习笔记文章标签：安卓

本文链接：https://blog.csdn.net/afdafvdaa/article/details/107708651

版权

早期安卓学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

内容

1.在Activity中使用线性布局
2.在Activity中使用相对布局
3.在Activity中使用约束布局
4.结论

一.在Activity中使用线性布局

1.层级关系

2.具体代码

package com.example.yongdaimagoujianyemian

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import androidx.core.view.marginTop

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)

        addLinearLayoutKotlin()
    }

    //添加线性布局(Kotlin)
    fun addLinearLayoutKotlin(){
        val container = LinearLayout(this).apply {
            //设置宽高
            layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT
            )

            //设置布局方向
            orientation = LinearLayout.VERTICAL

            //为方便观察，设置背景颜色
            background = getDrawable(R.color.colorPrimary)
        }.also {
            setContentView(it)
        }

        //创建第一个子控件，为横向布局的LinearLayout
        LinearLayout(this).apply {
            //设置宽高
            //默认情况下，在代码中写的尺寸都是pix，也就是像素，当代码中写 100时就相当于100px
            //但是运行起来在手机上显示的也是100px，但是手机有不同的分辨率Density
            //密度/分辨率就是 1个dp有多少个px
            //比如某个手机分辨率/密度为1，则对应的像素就是100dp = 100px
            //如果某个手机分辨率为2，则对应的值就是50dp        = 100px/2
            //若密度为4，则对应的值就是25dp，也就是分辨率*dp = px
            layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    dpTopx(100)
            )

            //设置布局方向
            orientation = LinearLayout.HORIZONTAL

            //为方便观察，设置背景颜色
            background = getDrawable(R.color.colorPrimaryDark)
        }.also {
            //将当前子控件添加到父容器中
            container.addView(it)
        }.apply {
            //添加图片
            ImageView(this@MainActivity).apply {
                layoutParams = LinearLayout.LayoutParams(
                        dpTopx(100),
                        LinearLayout.LayoutParams.MATCH_PARENT
                )

                //设置是哪一张图片
                setImageResource(R.drawable.ic_launcher_foreground)

                //将图片添加到控件中
                addView(this)
            }

            //添加标题
            TextView(this@MainActivity).apply {

                layoutParams = LinearLayout.LayoutParams(
                        0,
                        LinearLayout.LayoutParams.MATCH_PARENT
                ).apply {
                    weight = 1f
                    setMargins(dpTopx(30),dpTopx(20),dpTopx(30),dpTopx(20))
                }

                text = "what are you 弄啥嘞"

                //设置字体颜色
                setTextColor(getColor(R.color.colorWhite))
                textSize = 20f
                addView(this)
            }
        }

        //创建第二个子控件TextView
        TextView(this).apply {

            layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT
            ).apply {
                setMargins(dpTopx(30),dpTopx(20),dpTopx(30),dpTopx(20))
            }

            text = "这里是文件的内容"

            //设置字体颜色
            setTextColor(getColor(R.color.colorWhite))
            textSize = 20f

            background = getDrawable(R.color.colorPrimary)

            container.addView(this)
        }



    }
    //添加线性布局(Java)
    fun addLinearLayoutJava(){
        //1.创建线性布局
        val linearlayout = LinearLayout(this)//上下文写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)

    }

    //写一个能将dp转换为px的方法
    fun dpTopx(dp: Int): Int{
        return (resources.displayMetrics.density).toInt() * dp
    }
}

3.效果

二.在Activity中使用相对布局

1.总览图

2.效果图

3.具体代码

掌握addRule

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)

        addRelativeLayoutKotlin()
    }

    //添加相对布局
    fun addRelativeLayoutKotlin(){
         //创建RelativeLayout容器
        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.colorPrimaryDark)

            //将此容器添加到Activity
            setContentView(this)
        }

        //添加图像
        ImageView(this).apply {
            //为了后面调整相对位置的方便，在这里加上ID
            id = R.id.mHeader

            //设置宽和高
            layoutParams = RelativeLayout.LayoutParams(dpTopx(120),dpTopx(100)).apply {
                //设置它与父容器的位置关系
                //这里只用了margin，并没有用到 “相对”
                setMargins(dpTopx(10),dpTopx(15),0,0)//右边和下边根本不用设置
            }

            //设置图片来源
            setImageResource(R.drawable.ic_launcher_background)

            //设置图片上下不会出现空白，而是占满整个控件区域的
            scaleType = ImageView.ScaleType.CENTER_CROP

            //添加到容器中，也就是那个相对布局中
            relativeLayout.addView(this)
        }

        //添加标题
        TextView(this).apply {
            //加上id
            id = R.id.mTitle

            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 = dpTopx(20)
                marginEnd = dpTopx(20)
            }
            //为方便观察，设置背景颜色
            //background = getDrawable(R.color.colorPrimaryDark)

            text = "这里是标题"
            setTextColor(getColor(R.color.colorWhite))
            textSize = 30f
            //把此标题加入到容器中
            relativeLayout.addView(this)
        }

        //添加文本内容
        TextView(this).apply {
            layoutParams = RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.MATCH_PARENT,0
            ).apply {
                //顶部对齐图片的底部
                addRule(RelativeLayout.BELOW,R.id.mHeader)
                //底部对齐父容器的地步
                addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,R.id.mContainer)
                //左边对齐图片的左边
                addRule(RelativeLayout.ALIGN_START,R.id.mHeader)
                //右边对齐标题控件的右边
                addRule(RelativeLayout.ALIGN_END,R.id.mTitle)
            }

            text = "这里是内容"
            textSize = 50f
            setTextColor(getColor(R.color.colorPrimary))

            //为方便观察，换个背景颜色
            background = getDrawable(R.color.colorWhite)

            //把此标题加入到容器中
            relativeLayout.addView(this)
        }
    }


    //写一个能将dp转换为px的方法
    fun dpTopx(dp: Int): Int{
        return (resources.displayMetrics.density).toInt() * dp
    }
}

三.在Activity中使用约束布局

1.具体代码

package com.example.yongdaimagoujianyemian

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.view.marginBottom
import androidx.core.view.marginTop
import java.lang.invoke.ConstantCallSite

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)

        addConstraintLayoutKotlin()
    }

    //添加约束布局
    fun addConstraintLayoutKotlin(){
        val constraintLayout = ConstraintLayout(this).apply {
            id = R.id.mContainer

            layoutParams = ConstraintLayout.LayoutParams(
                    ConstraintLayout.LayoutParams.MATCH_PARENT,
                    ConstraintLayout.LayoutParams.MATCH_PARENT
            )

            //设置背景颜色
            background = getDrawable(R.color.colorWhite)

            //添加到activity
            setContentView(this)
        }
        //创建图片
        ImageView(this).apply {
            id = R.id.mHeader

            layoutParams = ConstraintLayout.LayoutParams(
                    dpTopx(120),
                    dpTopx(90)
            ).apply {
                //设置约束
                topToTop = R.id.mContainer
                leftToLeft = R.id.mContainer

                setMargins(dpTopx(10),dpTopx(10),0,0)
            }

            //设置图片来源
            setImageResource(R.drawable.ic_launcher_background)

            //将此控件添加到容器中
            constraintLayout.addView(this)
        }

        //创建标题
        TextView(this).apply {
            id = R.id.mTitle

            layoutParams = ConstraintLayout.LayoutParams(
                  ConstraintLayout.LayoutParams.WRAP_CONTENT,
                  ConstraintLayout.LayoutParams.WRAP_CONTENT
            ).apply {
                //设置约束
                leftToRight = R.id.mHeader
                topToTop = R.id.mContainer
                rightToRight = R.id.mContainer
                bottomToBottom = R.id.mHeader

                //设置距离
                setMargins(dpTopx(10),0,dpTopx(10),0)
            }

            text = "这是标题"
            textSize = 30f

            constraintLayout.addView(this)
        }

        //创建内容
        TextView(this).apply {
            layoutParams = ConstraintLayout.LayoutParams(
                    ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
                    ConstraintLayout.LayoutParams.MATCH_CONSTRAINT
            ).apply {
                leftToLeft = R.id.mContainer
                rightToRight = R.id.mTitle
                topToBottom = R.id.mHeader
                bottomToBottom = R.id.mContainer

                setMargins(0,dpTopx(10),0,0)
            }

            text = "这里是内容"
            textSize = 50f

            constraintLayout.addView(this)
        }
    }

    //写一个能将dp转换为px的方法
    fun dpTopx(dp: Int): Int{
        return (resources.displayMetrics.density).toInt() * dp
    }
}