Material Slider的默认布局高度(dp)是48dp。
基于最新的 com.google.android.material:material:1.4.0-alpha01。...显示高度可以通过 app:behavior_peekHeight 设置（默认是0） bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED...BottomSheetBehavior.gif 6.BottomSheetDialog IOS的很多菜单都是从底部弹出的，这种展示方式还是很好看的，而丑爆的Android默认弹框一直都是大家一定要摒弃的...Chip 就是布局中的每个item。...Slider 加强版的SeekBar.先上测试代码 <com.google.android.material.slider.Slider android:id="@+id/slider
三、使用讯飞SDK 使用前要先修改一下activity_main.xml的布局代码。如下图所示，我在原来的星期的后面加了两个控件，一个用于触发播放方法，一个用于显示播放状态。 ?...演示视频地址 四、语音播报设置 现在你还都只是默认的播报人这样当然不符合用户的使用习惯，但是讯飞SDK的免费发音人也是有限的，只有五个，因此我也是要利用起来，而且回顾之前的设置页面页面只有一个孤零零的每日弹窗设置...textColor="#000" android:textSize="16sp" /> <com.google.android.material.slider.Slider...textColor="#000" android:textSize="16sp" /> <com.google.android.material.slider.Slider...textColor="#000" android:textSize="16sp" /> <com.google.android.material.slider.Slider
默认的图片,可以看到，高度占满了，没有占满宽度。 ? fitXY 图片等比缩放到完全填充控件，图片宽高比和控件宽高比一致，则不变形；不一致，则会变形。 ...使用了fitCenter，效果等同于你默认的效果。 ?...使用了center，效果如下，控件的重心和图片重心重合，看起来像是放大了，实际上是高度比控件要高，所以重新定位了重心所以左右的留白会比默认的小。 ?...，图片宽度大于或等于控件的宽度，如果原图比例小于控件比例，则按照控件宽/图片宽进行等比例缩放，这样就能保证图片高度在进行同等比例缩放的时候，图片高度大于或等于控件的高度。 ...然后来看它的布局。 然后修改布局的代码：为了方便对比我用了一个滚动条，里面包裹一个线性布局，布局里面就是用来演示的效果图，布局代码如下： <?
包中，很显然它是 Material Design 风格的，可以将它理解为一个容器，我们可以设置容器的高度（带阴影效果）、Shape形状、Background背景等。...这可以确保一个 Surface 的叠加高度永远不会比它的祖先低，因为它是所有先前 Surface 的高度总和。...不得不说，Google 的工程师真的很了解建筑学，连起名都借用了建筑学的概念，这个 Scaffold 组件的功能就跟它的翻译一样，用于构建一个基本的 Material Design 布局框架。...50% 的地方，这里由于 ConstraintLayout 默认尺寸是 wrap_content，所以父布局的宽度会设置为 text 的两倍的宽度，这样就满足了 text 起始位置在父布局的中间，根据图中的布局分界线也可以看出...而 guideline2 是在竖直方向上距离屏幕高度三分之一的位置，需要把父布局的高度设置为屏幕高度才可以实现。
所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。...，表面不要有图案 不能透视、弯曲 ** 小图标 ** 优先使用material design默认图标。...2.8 布局 所有可操作元素最小点击区域尺寸：48dp X 48dp。 栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。...以下是一些常见的尺寸与距离： 顶部状态栏高度：24dp Appbar最小高度：56dp 底部导航栏高度：48dp 悬浮按钮尺寸：56x56dp/40x40dp 用户头像尺寸：64x64dp/40x40dp...编辑 **卡片集**是**卡片**的一个平面布局 编辑 即使在同一个列表中，卡片的内容和布局方式也可以不一样。 编辑 卡片统一带有2dp的圆角。
在前一篇 Android 样式系统文章 中，我们介绍了主题背景与样式的区别，以及如何编写灵活的样式与布局代码用于抽离可变化部分。...attr/listPreferredItemHeight 列表项的标准高度 (最小值)； ?attr/actionBarSize 工具栏的高度。 Drawables ?...attr/shapeAppearanceSmallComponent 默认圆角为 4dp，用于 Buttons、Chips、TextFields 等； ?...attr/shapeAppearanceMediumComponent 默认圆角为 4dp，用于 Cards、Dialogs、Date Pickers 等； ?...attr/shapeAppearanceLargeComponent 默认圆角为 0dp (其实是方形)，用于 Bottom Sheets 等。
) bottomSheet.getLayoutParams(); layoutParams.height = getPeekHeight(); //修改弹窗的最大高度，不允许上滑（默认可以上滑） bottomSheet.setLayoutParams...，默认为屏幕高度的四分之三 * 子类可重写该方法返回peekHeight * * @return height */ protected int getPeekHeight() { int peekHeight...).setBackgroundDrawable (new ColorDrawable (Color.TRANSPARENT)); 2.固定窗口的高度，窗口默认可以向上滑动直到铺满整个屏幕RecyclerView..." android:layout_marginBottom="8dp" / </LinearLayout 4.Fragment布局的圆角背景 <shape xmlns:android="http...-- 圆角 -- <corners android:radius="15dp" / </shape 5.RecyclerView的item布局 <?
这个置顶是滑动的置顶，不包括外层布局。 好了，效果图看到了，你有没有动力开始写代码呢？...//Google Material控件,以及迁移到AndroidX下一些控件的依赖 implementation 'com.google.android.material:material:1.0.0...private int screenHeight = 500;//屏幕高度 没有设置则默认500 public GoTopNestedScrollView(@NonNull Context...如果用户没有设置使用默认的 */ //当 当前的左上角距离顶点距离 大于某个值的时候就显现置顶按钮出来 如果小于某个值就隐藏 if (screenHeight...,不设置的话就会使用自定义View中的默认高度 DisplayMetrics metric = new DisplayMetrics();//获取屏幕高度 getWindowManager
下图是针对其设计思想的总结，具体的动画、样式、布局、组件、模式、可用性和资源设计规范本文不加赘述。 ? Material基础分为三个部分：环境、Material属性以及高度和阴影。...，每个Material 元素在 z 轴上占据一定的位置并且厚度默认只有1dp，厚度是其次，最重要的z轴是用来分层，进而实现更加有序或者更为复杂的交互设计。...二、Material 属性 Material即材料，被定义为一种有固定行为且特性不可变的实体，Material Design的设计构想亦是如此，材料的长宽随意变化，但是厚度保持均匀，即1dp。...材料能改变形状，能沿水平或者竖直方向拉长或者增高，能在环境中的任何地方自动产生或消失。 ? 三、高度 高度是针对Z轴上不同平面的相对深度或距离。高度的测量单位其实和XY轴相同，这里主要是DP。...因为所有的Material元素有一个厚度为1单位的DP，高度的度量是从一个平面到另一顶端的距离，并且子对象的高度与父对象高度相关。 ?
= ButtonDefaults.buttonElevation(),//阴影,默认、按下、不可用等状态下的阴影 border: BorderStroke?...MyDivider的高度，并随着MyDivider的高度进行填充，就需要用到IntrinsicSize IntrinsicSize表示允许父组件优先查询下子组件的高度，所以设置给父组件，这边给Row设置...) } } 预览效果： 五、标准布局 compose中的布局也不多，最基础的为Column、Row、Box，官方给出的定义如下图： 1.Row 上面我们使用过一个Row，它的作用域是RowScope...fun MyBox() { Box( modifier = Modifier .sizeIn(50.dp, 70.dp),//设置内容组件的最小宽度和高度为...50dp、70dp,配合propagateMinConstraint=true使用 propagateMinConstraints = true,//使内容组件最小宽度和高度生效
TextView的线性布局 TabItem：一种特殊的“视图”，在TabLayout中可以显式声明Tab 官方文档 功能拆解 Material Design 组件最新正式版依赖： implementation...5.去掉下划线indicator app:tabIndicatorHeight="0dp" 设置高度为0即可。...注意，单纯设置tabIndicatorColor为透明，其实不准确，默认还是有2dp的，根本瞒不过射鸡师的眼睛。...，两个字用这个默认宽度就会有多余的间距，所以会出现间距不均等的情况，通过设置覆盖默认即可解决。...int resId) 我们先编写一个自定义的布局文件，布局文件比较简单，一个LottieAnimationView和TextView。
ImageView 在 XML 布局文件中使用自定义的 RoundedImageView： <com.example.yourpackage.RoundedImageView android:...方法二：ShapeableImageView 另一个常用的方法是使用 ShapeableImageView 以及 material 库提供的功能，它提供了一些方便的属性来实现圆角效果。...:material:1.9.0' // 确保使用最新版本 } 在布局文件中使用 ShapeableImageView 在 XML 布局文件中使用 ShapeableImageView 并设置圆角属性：...完整实现 将这两个部分结合起来： 1、 在 build.gradle 中添加 Material 依赖。 2、 在布局文件中使用 ShapeableImageView 并设置初始的圆角样式。...这样，你可以获得一个易于管理且高度可控的圆角 ImageView，同时也利用了 Material Design 的强大功能。
它与现有的UI工具包也是完全兼容的，因此你可以混合原来的View和现在新的View，并且从一开始就使用Material和动画进行设计。...Text("Android技术杂货铺") Text("依然范特西") } } 效果如下： 可以看到，前面重叠的布局，现在已经垂直排列了，但是，默认情况下，从左上角开始，一个接一个的排列...Text("Android技术杂货铺") Text("依然范特西") } } image.png expanded : 指定Container的大小，默认是false（Container...height : 设置Container容器的高度，height属性的优先级高于expanded,因此会覆盖expanded，如上面的例子，设置height为180dp,也就是容器宽为父控件宽度，高为180dp...Text("依然范特西") } } } 如上面的代码，添加了MaterialTheme后，重新运行，效果没有任何变化，文本现在使用了MaterialTheme的默认文本样式
简单写一篇文章捕获一下焦点 Material Design风格的顶部和底部导航栏 Compose中Material Design风格的设计我们的做法如下： 1、使用Scafoold作为页面的顶级，Scafoold...2、调用WindowCompat.setDecorFitsSystemWindows(window, false)方法让我们的布局超出状态栏和底部导航栏的位置 3、使用ProvideWindowInsets...包裹布局，使我们可以获取到状态栏和底部导航栏的高度（不包裹无法获取状态栏和底部导航栏高度） 4、手动处理顶部和底部导航栏让页面适应屏幕 界面设计 TopBar设计 实现方式 因为使用WindowCompat.setDecorFitsSystemWindows...(window, false)设置后页面布局顶到了状态栏的上面，因为我们需要用一个Spacer来填充状态栏，让我们的布局看起来正常点 代码 如下是封装的状态栏方法 @Composable fun TopBarView...状态 处理前： 处理后： 结论是经过我们的处理后解决了状态栏的遮挡 BottomBar设计 实现方式 因为使用ProvideWindowInsets包裹后底部导航栏顶到了底部，所以需要填充一个底部导航栏高度的
`widthDp: Int`: 在Compose中渲染的最大宽度，单位为dp。 8. `heightDp: Int`: 在Compose中渲染的最大高度，单位为dp。...Modifier.width(2.dp) // 设置宽度 Modifier.height(3.dp) // 设置高度 Modifier.size(4.dp, 5.dp) // 设置高度和宽度...Modifier.widthIn(2.dp) // 设置最大宽度 Modifier.heightIn(3.dp) // 设置最大高度 Modifier.sizeIn(4.dp, 5.dp, 6.dp..., 7.dp) // 设置最大最小的宽度和高度 Modifier.gravity(Alignment.CenterHorizontally) // 横向居中 Modifier.gravity(Alignment.Start...Android Jetpack Compose 最全上手指南 Jetpack Compose 环境准备和Hello World 布局 使用Material design 设计 Compose 布局实时预览
这里的代码展示了一个折叠工具栏，应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...如果在设计视图中查看这个布局，我们能看到布局所展示的工具栏处于展开的状态： ?...第一件事情就是作为背景的 ImageView 图片（ ID 为 toolbar_image ）高度值的改变，以及图片透明度值的改变。...通过改变图片的高度，这会导致 RecyclerView 的上边缘的移动，因为后者正是约束在图片的下边缘位置。...第一个就是高度 layout_height ，第二个则为名为 imageAlpha 的 CustomAttribute 。
取值有三个值: Alignment.CenterVertically 居中 Alignment.Top 靠顶部 Alignment.Bottom 靠底部 与上面一样,布局高度如果是自适应的,则不会有效果...} } Column 此布局和Row布局的参数一样,只是名字有所区别,使用方法和上面都一样 verticalArrangement 垂直方向排列 horizontalAlignmentment 水平方向对齐...Spacer Spacer,直接翻译的话,应该是空格,其主要就是充当margin的作用,一般使用modifier修饰符来设置宽高占位来达到margin效果 Card 官方封装好的Material Design...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...阴影高度 复制Card(modifier = Modifier.fillMaxWidth().padding(20.dp),elevation = 10.dp) { Text(text = "
”基本实现两个功能： 作为顶层布局 调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...AppBarLayout 是一个竖直排列的线性布局，它实现了很多Material Design风格app bar的设计概念，换句话说就是滚动手势。...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。...我在做这里的时候遇到一个问题，那就是CollapsingToolbarLayout里的Title的问题，一般默认是显示的，即使你不写，它也有会一个默认值一直显示在那里，等折叠收缩完的时候，停留在标题工具栏上...毫无疑问，TabLayout也是Material Design设计风格，当然也是5.0以后出来的。
在 Material Design 中，每个物体（也就是你的控件）都有 1 dp 的厚度。 然后这些控件还有海拔的概念，还有影子的概念，这些就体现出了 3 D的感觉。...这是 Android 使用默认的状态列表动画，更改 Z 属性。 按钮的动作效果，默认 FAB 有 6dp 的Elevation，当按下按钮时 translation Z 值开始增加。...海拔高度是两个表面在 Z 轴上的距离，单位也是使用的 dp，一个子元素的海拔是相对于父元素而言的。 海拔高度分为：静止状态海拔高度和动态海拔高度偏移。...动态海拔高度偏移是组件从静止海拔高度向目标海拔高度所移动的距离。所有组件在被按下时，默认所增加的海拔高度是一样的。一旦输入事件完成或取消，组件会回到原来静止的海拔高度。...因为 TextView 的默认海拔是0 ，就被 Cardview 给挡住了，因为 CardView 的默认海拔是 2dp，如果你将 TextView 的海拔设置为 3dp 这个时候 TextView 就可以显示了
整理效果就是页面上滑动时顶部标题、和底部的浮动按钮上滑隐藏，下滑则显示。这里其实我分了两部分做，第一步是上面的标题，这个可以通过布局来解决，那就是协调布局。...中的dependencies闭包下新增一个依赖库 api 'com.google.android.material:material:1.2.0'//更强 我之前的是1.1.0，那么你可以改成1.2.0...然后同步到你的项目中。你就可以是material专属的UI控件了，你可能会问为什么要用这个控件，普通的ImageView不行吗？..._16 可能你还注意到我这个item的高度是wrap_content，所以你看不到高度，那么为什么这样做呢？...因为我要使用瀑布流，哪种错落感，会给用户不一样的体验，因为不设置高度，是因为需要动态设置ImageView的高度，来实现这个错落感。OK，下面该写这个Adapter了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
