当前位置: 首页 > news >正文

【Android】卡片式布局 滚动容器ScrollView

在这里插入图片描述
三三要成为安卓糕手

一:卡片式布局

先用,上手一遍,然后在一点点剖析

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="16dp"app:cardCornerRadius="24dp"app:cardElevation="30dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:padding="12dp"><ImageViewandroid:id="@+id/iv_avatar"android:layout_width="60dp"android:layout_height="60dp"android:src="@drawable/icon_logo"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="6dp"android:text="老孙发来1条消息"android:textSize="20sp"app:layout_constraintStart_toEndOf="@id/iv_avatar"app:layout_constraintTop_toTopOf="@id/iv_avatar" /><TextViewandroid:id="@+id/tv_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="16:41"android:textSize="18sp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginLeft="6dp"android:ellipsize="end"android:maxLines="1"android:text="落魄谷中寒风吹,春秋蝉鸣少年归,荡魂山处石人泪,定仙游走魔向北"android:textSize="16sp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@id/iv_avatar"app:layout_constraintTop_toBottomOf="@id/tv_title" /></androidx.constraintlayout.widget.ConstraintLayout></androidx.cardview.widget.CardView></androidx.constraintlayout.widget.ConstraintLayout>

效果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里为了对子控件更好的进行管理,我们内嵌套一个子布局Constrainlayout

1:elevation-卡片阴影高度

elevation [ˌelɪˈveɪʃn]

  • elevation:常见意思是 “海拔;高度;提升”

  • “cardElevation” 卡片阴影高度 一般数值在阴影部分10dp左右

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们可以添加一个边距,让card的阴影部分露出来

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2:Corner-角

Corner [ˈkɔːnə®] 角

方框四个尖尖设置成圆角,一般数值在10~16dp之间

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3:优化边距

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4:宽度掌控权

宽度设置为0dp后,才会被交给我们的ConstraintLayout去管理,实际开发过程中需要去注意的!!吃过好几次亏了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ellipsis跟maxLines搭配使用 [ɪˈlɪpsɪs] 省略 ellipsize 后缀 -ize 常用于将名词 / 形容词转化为动词, 可理解为 “使(文本)以省略号形式呈现”

二:源码分析

1:来源

我们的CardVIew是androidx中提供的,一些老的工程没有导入androidx依赖的话,需要我们手动添加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

material 材料

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个material里就会给我们提供非常丰富的样式,比如我们的CardView

2:类所处位置

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

三:ScrollView滚动布局

1:问题引入

字太多,占据很多高度——如下左图;

或者一行显示不满,超了,如下右图;于是引出滚动布局ScrollView耶

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2:竖直、水平滚动

应用起来非常的简单,需要注意的一点是在LinearLayout父布局下使用时注意orientation(方向)的设置


<!--    竖直滚动--><ScrollViewandroid:layout_width="match_parent"android:layout_height="100dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="50dp"android:text="As some countries expand operations in Antarctica, the United States maintains three year-round stations on the continent with more than 1,000 people during the southern hemisphere's summer, including those at the Amundsen-Scott station, built in 1956 at an elevation of 9,301 feet on a plateau at the South Pole."android:textSize="42sp"/></ScrollView>
<!--    水平滚动--><HorizontalScrollViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20dp"android:text="AADSODIAOSNOSAINOISAOBsadasdsadsadsadsadsaVAIUVBAOAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIUBVODABVOIDABVOI"android:textSize="60sp" /></HorizontalScrollView>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3:只能有一个子下级

scrollview只允许有一个子下级 很重要!!!

内部嵌套一个线性布局即可。不同的TextView,用背景色或者文字颜色区分即可

    <ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:scrollbars="none"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20dp"android:text="AADSODVAIUVBAOUBVODINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIUBVODABVOIDABVOI"android:textSize="60sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20dp"android:text="AADSODVBAOAADSOOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIUBVODABVOIDABVOI"android:textColor="@color/my_blue"android:textSize="60sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20dp"android:text="AADSODAADSODIBVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIAADSODIAOSNOSAINOISAOBVAIUVBAOUBVODABVOIDABVOIUBVODABVOIDABVOI"android:textColor="@color/purple"android:textSize="60sp" /></LinearLayout></ScrollView>

4:scrollbars

“scrollbars” 指的是滚动条 单词意思拆开来理解

商业开发中,一般不希望显示这个滚动条,

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

http://www.dtcms.com/a/301892.html

相关文章:

  • Go语法入门:变量、函数与基础数据类型
  • 飞算科技重磅出品:飞算 JavaAI 重构 Java 开发效率新标杆
  • JAVA后端开发——用 Spring Boot 实现定时任务
  • 【Spring】Spring Boot启动过程源码解析
  • 鸿蒙打包签名
  • HarmonyOS 6 云开发-用户头像上传云存储
  • 前端工程化常见问题总结
  • Windows|CUDA和cuDNN下载和安装,默认安装在C盘和不安装在C盘的两种方法
  • AI技术革命:产业重塑与未来工作范式转型。
  • 深入解析MIPI C-PHY (四)C-PHY物理层对应的上层协议的深度解析
  • 齐护Ebook科技与艺术Steam教育套件 可图形化micropython Arduino编程ESP32纸电路手工
  • 湖南(源点咨询)市场调研 如何在行业研究中快速有效介入 起头篇
  • Triton编译
  • 【n8n教程笔记——工作流Workflow】文本课程(第一阶段)——5.5 计算预订订单数量和总金额 (Calculating booked orders)
  • Rouge:面向摘要自动评估的召回导向型指标——原理、演进与应用全景
  • 分表分库与分区表
  • Android启动时间优化大全
  • 蛋白质反向折叠模型-ProteinMPNN安装教程
  • 学习日志20 python
  • 【unitrix】 6.18 二进制小数特质(t_decimal.rs)
  • EPOLLET 边缘触发模式深度解析
  • 抗辐照芯片在低轨卫星星座CAN总线通讯及供电系统的应用探讨
  • vue3的一些浅显用法
  • Day06–哈希表–242. 有效的字母异位词,349. 两个数组的交集,202. 快乐数,1. 两数之和
  • 浙大公开课—基于深度学习的特征匹配与姿态估计
  • (补题)拼图游戏
  • EPOLLIN事件的详细解析
  • 【时时三省】(C语言基础)指针数组和多重指针
  • MySQL 8.4 Windows 版安装记录与步骤参考
  • 【C语言网络编程基础】DNS 协议与请求详解