【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” 指的是滚动条 单词意思拆开来理解
商业开发中,一般不希望显示这个滚动条,