Android 设置Padding和Margin(动态/静态)

news2025/7/19 3:48:07

一、什么是padding,什么是margin?

在Android界面开发时,为了布局更加合理好看,很多时候会用上Padding和Margin,

padding和margin是什么呢?即内边距和外边距;

某个View指定为padding是针对该View里面的子View距离该View距离而言的,或者是里面的内容距离容器的距离。

某个View指定为margin是针对该View本身距离别人或者父View而言的。

例如下图,输入框里面的文字内容,如果不设置内边距,那么就会紧挨左上角,这样看起来,就很不友好,合理的设置padding看起来会舒服很多。

如果,不设置外边距,会充满整个父布局,也不好看,这时候就需要margin属性(外边距)。

 类似于控件的基础属性,并且不会变化的,我们一般会直接在xml文件里直接设置,这是上图的布局代码

<androidx.appcompat.widget.AppCompatEditText
                android:id="@+id/chat_input_edit"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:paddingHorizontal="12dp"
                android:paddingVertical="10dp"
                android:textColor="@color/white"
                android:textColorHint="#94ffffff"
                android:textSize="14sp" />

 二、动态设置边距

那么怎么动态设置padding和margin呢?其实也很简单。

1.设置padding

view.setPadding(int left, int top, int right, int bottom)//view为你要设置的控件

例子:在我点击搜索框后,搜索框获取焦点,准备输入内容的时候,图标消失,文本内边距修改,实现代码如下

editText.setOnFocusChangeListener { view, b ->
            if (b) {//使用dp2px方法进行屏幕适配
                view.setPadding(DPUtils.dp2px(12f),DPUtils.dp2px(6f),DPUtils.dp2px(12f),DPUtils.dp2px(6f))
                searchIcon.visibility = View.GONE
            }
        }

实现效果:最开始文本里左边内边距32dp,点击后变成12dp

//这是dp转为px的方法
private fun dp2px(i: Int): Int {
    return (Resources.getSystem().displayMetrics.density * i + 0.5f).toInt()} 

为什么会有dp2px这个方法来转一下呢?

android中px与sp,dp之间的转换_跑快点的博客-CSDN博客_android px sp由于Android手机厂商很多,导致了不同设备屏幕大小和分辨率都不一样,然而我们开发者要保持在不同设备上显示同样的视觉效果,就需要做一些适配效果。 相关名词解释 屏幕大小:通常指的是屏幕对角线的长度,使用“寸”为单位来衡量。 分辨率:指手机屏幕的像素点个数,例如:720*1280,指的是宽有720个像素点,高有1280个像素点。 dpi:指的是每英寸像素,是由对角线上的像素点数除以屏幕大小所https://blog.csdn.net/qidingquan/article/details/53714603?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4-53714603-blog-91974773.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4-53714603-blog-91974773.pc_relevant_default&utm_relevant_index=92.动态设置margin

android的view中有setPadding,但是没有直接的setMargin方法。如果要在代码中设置该怎么做呢?可以通过设置view里面的 LayoutParams 设置,而这个LayoutParams是根据该view在不同的GroupView而不同的。这儿用的是RelativeLayout是因为在他的父布局是RelativeLayout哦,用成其他的会报错哦~~

val lp = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT)
lp.setMargins(0, 0, DPUtils.dp2px(7f), DPUtils.dp2px(7f))
//RelativeLayout可以通过LayoutParams的addRule来添加约束,其他的布局也有类似的一些方法
lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM)
lp.addRule(RelativeLayout.ALIGN_PARENT_END)
textView.layoutParams = lp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408666.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue制作一个好看的网页

1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息&#xff0c;最常用的就是端口转发 node_modules:这个目录存放项目的所有依赖&#xff0c;由npm install 下载来的文件 src:存放项目的源…

Vue设置浏览器小图标(ICON)

Vue设置浏览器小图标 当我们使用浏览器做开发时&#xff0c;我们能希望浏览器标签页能显示自己的logo小图标&#xff0c;这个是怎样设置的呢&#xff1f; 第一步&#xff1a;准备logo图片信息 找到自己的logo&#xff0c;通过图片在线转换格式&#xff0c;转换成32*32的ico为…

css关于文本溢出

处理思路 1&#xff09;给需要做溢出处理的文本元素设置width或者max-width 2&#xff09;超出部分省略 overflow:hidden 3) 文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如&#xff1a;“_” “.” 4) 设置文本不换行 white-space: nowrap 单行文本溢出 …

Rust开发WebAssembly在Html和Vue中的应用【后篇】

【建议先看】继上一篇【Rust开发WebAssembly在Html和Vue中的应用】遗留下来的问题 Rust开发WebAssembly在Html和Vue中的应用_一码超人的博客-CSDN博客 本文讲述Vue2与H5版uniapp如何引入rust webassembly的应用流程 在上一文中末尾&#xff0c;我说过vue2在引入胶水js后执行…

关于vue2与vue3

Vue组件之间通信方式有哪些 vue是组件化开发框架&#xff0c;所以对于vue应用来说组件间的数据通信非常重要。 1. 组件通信常用方式有以下8种: props $emit/$on $children/$parent $attrs/$listeners ref $root eventbus vuex 注意vue3中废弃的几个API 在vue3中废除$c…

前端实现tab栏切换,这么常见的案例你学会了吗?

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域新星创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

vue2 vue-router 不显示页面问题

目录 菜鸟入门&#xff0c;配置vue-router一直不显示。 排除过的问题点&#xff1a; 项目源码如下&#xff1a; 分析&#xff1a; 解决方案&#xff1a; 可能会遇到错误 这vue-router页面总算出来了&#xff1a; 菜鸟入门&#xff0c;配置vue-router一直不显示。 首先去…

el-cascader数据渲染及回显至页面(以及踩坑历程+解决)

第一次使用el-cascader就把坑踩了个遍&#xff0c;写个记录&#xff0c;也希望能够帮助到同为小猿的你们。 下面是我写的一个还原项目的例子 Bug1 首先是最小子集仍然有children&#xff0c;但是children为空数组&#xff0c;el-cascader渲染时&#xff0c;发现有children所…

【已解决】VUE3+webpack >5报错问题

问题截图&#xff1a; This is no longer the case. Verify if you need this module and configure a polyfill for it.If you want to include a polyfill, you need to:- add a fallback resolve.fallback: { "process": require.resolve("process/browser&q…

微信小程序父子组件之间传值

父子组件之间传值 组件之间传值有两种&#xff0c;一种是父向子传值&#xff0c;另外一种是子向父传值 先说一下大致的区别吧… 区别&#xff1a; 父向子传值使用的是属性绑定&#xff0c;子组件中 的 properties 对象 进行接收父组件传递过来的值子向父传值使用的是自定义…

wangEditor5在vue中的基本使用

目录 一、wangEditor5是什么 二、wangEditor5基本使用 &#xff08;一&#xff09;、安装 &#xff08;二&#xff09;、编译器引入 &#xff08;三&#xff09;、css及变量引入 三、wangEditor5工具栏配置 &#xff08;一&#xff09;、editor.getAllMenuKeys() &…

uniapp自定义tabbar(支持中间凸起,角标,动态隐藏tab,全端适用)

uniapp自定义tabbar&#xff08;支持中间凸起&#xff0c;角标&#xff0c;全端适用&#xff09;背景思路实现尾巴背景 在使用uniapp进行开发时&#xff0c;tabbar是我们使用的很频繁的一个组件&#xff0c;但是在特定的平台会有一些使用上的限制&#xff0c;无法通过一套代码…

box-sizing:border-box的理解和作用

盒子模型 盒子模型是指&#xff1a;外边距&#xff08;margin&#xff09; border&#xff08;边框&#xff09; 内边距&#xff08;padding&#xff09; content&#xff08;内容&#xff09; 可以把每一个容器&#xff0c;比如div&#xff0c;都看做是一个盒子模型 比如你给…

Vue实战【Vue开发中的的前端代码风格规范】

目录&#x1f31f;前言&#x1f31f;命名规范1.1 项目文件命名1.1.1 项目名1.1.2 目录名1.1.3 图像文件名1.1.4 HTML 文件名1.1.5 CSS 文件名1.1.6 JavaScript 文件名1.2 Vue 组件命名1.2.1 单文件组件名1.2.2 单例组件名1.2.3 基础组件名1.2.4 业务组件1.2.5 紧密耦合的组件名…

前端开发中常见的浏览器兼容性问题及解决方案

文章目录前言一、浏览器四大内核二、主流兼容问题&#xff08;一&#xff09;浏览器引擎&#xff08;二&#xff09;兼容问题的原因&#xff08;三&#xff09; 为什么浏览器会存在兼容性问题?&#xff08;四&#xff09;处理兼容问题的思路1. 要不要做&#xff1f;2. 做到什么…

vue3 | HighCharts实战自定义封装之径向条形图

1.前言 目前正在做vue3的数据可视化项目&#xff0c;vue3的组合式api写法十分方便&#xff0c;可以有各种玩法&#xff0c;有兴趣的同学可以看我个人主页的其他文章。难点是在网上找了一圈的有关径向条形图的示例都没有好的解决方案&#xff0c;决心亲自下手&#xff0c;在其中…

Vue(四)Vue脚手架——手把手教你安装和使用

一、什么是Vue脚手架 之前我们使用Vue框架&#xff0c;都是通过脚本的方式引入Vue脚本&#xff0c;在html中运行&#xff0c;但是这只是入门级的操作&#xff0c;下面我们介绍Vue脚手架。 脚手架&#xff1a;脚手架是一类软件的总称&#xff0c;此类软甲用于生成标准化的项目包…

Vue3中简单使用Mock.js

mock.js简介 官方链接&#xff1a;Mock.js (mockjs.com) 前端开发人员用来模拟虚拟数据&#xff0c;拦截ajax请求&#xff0c;方便模拟后端接口 安装 npm install mockjs 使用 本文主要介绍在Vue项目中使用mock.js&#xff0c;包括axios发送请求与请求简单封装 创建mock文件夹…

js+css+html制作简易留言板

jscsshtml制作简易留言板1 案例说明2 编写HTML代码3 编写css代码4 编写JavaScript代码5 全部代码1 案例说明 利用JavaScript、css以及html制作简易留言板&#xff0c;也可以看作是简易评论区。 要求在页面文本框中输入一些文字之后&#xff0c;点击“发布”按钮&#xff0c;就…

前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】

&#x1f680;作者简介 主页&#xff1a;水香木鱼的博客 专栏&#xff1a;后台管理系统 能量&#xff1a;&#x1f50b;容量已消耗1%&#xff0c;自动充电中… 笺言&#xff1a;用博客记录每一次成长&#xff0c;书写五彩人生。 &#x1f4d2;技术聊斋 &#xff08;1&#…