Android开发的UI设计——Material Design
前言
Material Design 是用于指导用户在各种平台和设备上进行视觉、动作和互动设计的全面指南。如需在您的 Android 应用中使用 Material Design,请遵循 Material Design 规范中定义的准则,并使用 Material Design 支持库中提供的新组件和样式。
正篇
安卓中的Material Design
作为Google旗下的一员——安卓,则是将其一些最具代表性一些控件和效果封装在Material库,这就让我们开发者可以在不了解Material Design的情况下,也很容易将自己的应用Material化,当然现在在AndroidX库中的一些组件也可以实现一些Material Design的效果。
BottomSheetDialogFragment组件
介绍
这个组件在Material Design中分属Bottom Sheets:
BottomSheetDialogFragment 继承自 AppCompatDialogFragment,官方解释为模态底部表,是 DialogFragment 的一个版本,它使用的是 BottomSheetDialog,而不是浮动对话框。
优势
1、拥有自己的生命周期;
2、可对整个页面进行折叠、展开和销毁;
3、可灵活使用自定义样式。
使用方法
implementation 'com.google.android.material:material:1.7.0'
添加好后Sync Gradle成功后,我们就可以在项目中添加BottomSheetDialogFragment了,很简单,和正常写继承DialogFragment的Dialog一样,因为在上述中我们看到了其继承关系,BottomSheetDialogFragment是继承自AppCompatDialogFragment,而
AppCompatDialogFragment又是继承自DialogFragment。如此一来,由于BottomSheetDialogFragment是DialogFragment的子类,故它具有DialogFragment的所有特性。
实现需求
Dialog部分的实现代码:
class DialogMore : BottomSheetDialogFragment() {private var height : Int = 0fun newInstance(): DialogMore {return DialogMore()}fun setDialogHeight(height: Int): DialogMore {this.height = heightreturn this}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setStyle(STYLE_NORMAL, R.style.StyleBottomSheetDialogBg)}override fun onStart() {super.onStart()//拿到系统的 bottom_sheetval bottomSheetDialog = (dialog as BottomSheetDialog?)!!val view =bottomSheetDialog.delegate.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)!!val behavior = BottomSheetBehavior.from(view)//设置弹出高度behavior.peekHeight = heightview.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENTbehavior.isHideable = false}override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {val dialog = super.onCreateDialog(savedInstanceState)val view = LayoutInflater.from(context).inflate(R.layout.layout_item_dialog_more, null)dialog.setContentView(view)view.vDownClose.setOnClickListener {dismiss()}return dialog}}
可以看到,这部分实现代码和我们平时写底部弹窗方法差不多,不过我们在onStar()方法可以使用BottomSheetBehavior去控制弹窗本身的行为,比如高度控制和一些弹窗的属性设置
在onCreateDialog方法中我们把弹窗布局加进去,使用setContentView()方法获取到布局,一定要写该方法,不然我们在获取BottomSheetBehavior的时候* val behavior = BottomSheetBehavior.from(view)*这句会报空
而我们的弹窗需要顶部圆角,且去除背景阴影,所以增加了样式:
<!--实现BottomSheetDialog圆角效果 且无背景阴影-->
<style name="StyleBottomSheetDialogBg" parent="Theme.Design.Light.BottomSheetDialog"><item name="bottomSheetStyle">@style/StyleBottomSheetStyleWrapper</item><item name="android:backgroundDimEnabled">false</item>
</style>
<style name="StyleBottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal"><item name="android:background">@android:color/transparent</item>
</style>
该地方样式在Dialog实现代码处调用,在onCreate方法中使用setStyle()方法。
此外,我们还需要在自己的布局中添加圆角:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><cornersandroid:topLeftRadius="15dp"android:topRightRadius="15dp" /><solid android:color="@color/white" />
</shape>
样式可以添加在我们定义的弹窗布局最外层布局
Dialog样例布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/shape_sheet_dialog_bg"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:paddingTop="10dp"android:paddingStart="16dp"android:paddingEnd="16dp"android:gravity="center"android:orientation="horizontal"><androidx.appcompat.widget.AppCompatImageViewandroid:id="@+id/vDownClose"android:layout_width="48dp"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_gravity="center"android:src="@drawable/vector_invite_comment_close" /><androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/vTitle"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="More Content"android:textColor="@color/black"android:textSize="16sp"android:textStyle="bold" /><androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/vPositionEdit"android:layout_width="48dp"android:layout_height="wrap_content"android:layout_marginEnd="16dp"android:text=""android:textColor="@color/black"android:textSize="16sp" /></LinearLayout><androidx.core.widget.NestedScrollViewandroid:id="@+id/vNsPosition"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:id="@+id/llPtz"android:layout_width="match_parent"android:layout_height="8dp"android:gravity="center"android:orientation="horizontal"></LinearLayout><LinearLayoutandroid:id="@+id/vLlPosition"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="match_parent"android:layout_height="300dp"android:src="@mipmap/ic_more_content"android:scaleType="fitCenter"/><androidx.appcompat.widget.AppCompatTextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:layout_marginStart="16dp"android:layout_marginEnd="16dp"android:text="1.可以弹出弹窗,且弹窗可以继续拉到顶部。"android:textSize="14dp"android:textColor="#FF666666"/><androidx.appcompat.widget.AppCompatTextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:layout_marginStart="16dp"android:layout_marginEnd="16dp"android:text="2.禁止下拉关闭弹窗,使下滑到固定位置后不会再动,关闭弹窗使用关闭按钮。"android:textSize="14sp"android:textColor="#FF666666"/></LinearLayout><LinearLayoutandroid:id="@+id/vLlNoPosition"android:layout_width="match_parent"android:layout_height="277dp"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:visibility="gone"><androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/vNoPositionText"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:text="无更多内容"android:textSize="14sp"android:textColor="#FF666666"/></LinearLayout></LinearLayout></androidx.core.widget.NestedScrollView></LinearLayout>
如果怕弹窗内部与外面的触控效果产生冲突,最简单的就是使用NestedScrollView控件,而不是普通的ScrollView布局
Activity的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="56dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="56dp"android:layout_height="56dp"android:orientation="horizontal"android:gravity="center"><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="16dp"android:layout_height="match_parent"android:src="@drawable/vector_arrow_back"android:scaleType="fitCenter"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="56dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><androidx.appcompat.widget.AppCompatTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textStyle="bold"android:text="弹窗样例"android:textColor="@color/black"android:textSize="16sp"app:autoSizeMaxTextSize="16sp"app:autoSizeMinTextSize="8dp"app:autoSizeTextType="uniform"android:maxLines="1"/></LinearLayout><LinearLayoutandroid:layout_width="56dp"android:layout_height="56dp" /></LinearLayout><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_play_demo"android:scaleType="center"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="56dp"android:orientation="horizontal"><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="0dp"android:layout_height="56dp"android:layout_weight="1"android:src="@mipmap/ic_top_up"android:scaleType= "fitCenter"/><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="0dp"android:layout_height="56dp"android:layout_weight="1"android:src="@mipmap/ic_transfer"android:scaleType= "fitCenter"/><androidx.appcompat.widget.AppCompatImageViewandroid:layout_width="0dp"android:layout_height="56dp"android:layout_weight="1"android:src="@mipmap/ic_withdraw"android:scaleType= "fitCenter"/><androidx.appcompat.widget.AppCompatImageViewandroid:id="@+id/vMore"android:layout_width="0dp"android:layout_height="56dp"android:layout_weight="1"android:src="@mipmap/ic_more"android:scaleType= "fitCenter"/></LinearLayout><LinearLayoutandroid:id="@+id/vllSize"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"android:orientation="vertical"/></LinearLayout>
还有在Activity实现调用的代码:
class MainActivity : AppCompatActivity() {private var dialogHeight : Int = 0override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)}override fun onWindowFocusChanged(hasFocus: Boolean) {super.onWindowFocusChanged(hasFocus)// 获取dialog的高度dialogHeight = vllSize.measuredHeight// 获取dialog的高度Log.d( "MainActivity" ,"height = $dialogHeight")}override fun onResume() {super.onResume()vMore.setOnClickListener {val dialog = DialogMore().newInstance().setDialogHeight(dialogHeight)val ft: FragmentTransaction =supportFragmentManager.beginTransaction()ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)dialog.show(ft, "DialogMore")}}
}
通过测量vllSize控件(剩余底部)的高度,我们可以将弹窗第一次弹窗的高度设置到这,当然高度可以由你任意设置,
在Dialog实现代码中:
override fun onStart() {super.onStart()//拿到系统的 bottom_sheetval bottomSheetDialog = (dialog as BottomSheetDialog?)!!val view =bottomSheetDialog.delegate.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)!!val behavior = BottomSheetBehavior.from(view)//设置弹出高度behavior.peekHeight = heightview.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENTbehavior.isHideable = false
}
view.layoutParams.height我们设置了第二次可把弹窗拉动到整个屏幕上
本文中实现的弹窗禁止了相信滑动关闭弹窗,所以不会滑到底部,代码是Dialog实现中的属性控制,不写默认为true向下滑动关闭弹窗,false表示禁止该方式关闭弹窗:
behavior.isHideable = false
最终效果:
Android开发的UI设计——Material Design相关推荐
- android抽屉风格,Android开发实战之拥有Material Design风格的抽屉式布局
在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件--DrawLayout,使用方式也 ...
- 软件开发全套视频教程汇总(javaSE,javaEE,linux,android开发,C# ,web前端,大数据云计算,数据挖掘,web前端,php开发,UI设计,C++开发,3D视频)
软件开发全套视频教程汇总(javaSE,javaEE,linux,android开发,C# ,web前端,大数据云计算,数据挖掘,web前端,php开发,UI设计,C++开发,3D视频) 这是我以前学 ...
- Windows phone 应用开发[3]-UI 设计
本篇来谈谈Windows phone UI设计.这个有点让我痛苦的话题. 其实谈到移动平台的设计.原来没有实际接触Windows phone 产品开发工作时对UI设计这个概念不是特别强烈. 并没有感到 ...
- ui设计和python哪个容易学_软件开发和ui设计那个容易学?
感谢邀请,以下是我的一些亲身经历,想和大家分享. 真心的!建议哪怕是念完一个普通高中,也比现在直接去学那些职业技能要好,学历高一点,你面对的选择.能做的选择也会更多一些,能够拓宽你未来的职业路. 初中 ...
- 总结Android手机应用UI设计的10个要点
总结Android手机应用UI设计的10个要点 (本文经游戏邦授权转载,原文链接http://gamerboom.com/archives/48018) 作者:Guenther Beyer 最近,许多 ...
- android的UI组件实验,实验一 Android Activity及UI设计.doc
天津理工大学 计算机与通讯工程学院 实验报告 2012 至 2013 学年 第 二 学期 实验一 Android Activity及UI设计 课程名称软件主流开发平台与工具学号学生姓名年级专业计算机科 ...
- 头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, 仅仅只有存粹的阅读, 不断完善中, 采用 MVP + RxJa
Toutiao 项目地址:iMeiji/Toutiao 简介:头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, ...
- Android开发自定义UI组件
Android开发自定义UI组件实现红色小球跟随手指移动 要写实现自定义UI组件,要创建一个BallView类,继承View类,在BallView类中创建画笔,然后重写OnDraw()方法和OnTou ...
- Android 材料设计Material Design 动画篇(一)
Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机.平板电脑.台式机和"其他平台"提供更一致.更广泛的&q ...
最新文章
- opencv处理dicom图像_图像处理|opencv| 利用opencv把照片变换成素描风格
- 【 C 】结构的自引用
- 图像标记工具Labelme和LabelImg
- 挂隐藏链接的4种代码
- FastStoneCapture屏幕截图软件
- 【重难点】【Java基础 04】值传递和引用传递、序列化和反序列化
- java中的DAO设计模式
- 阿里云科学家入选计算机顶会 HPCA 名人堂,他是什么来头?
- printk打印机别
- Redo丢失的4种情况及处理方法
- SpringSecurity半成品笔记
- MATLAB深度学习 2019
- 服务器与客户端的简单实现
- 淘宝中影响产品SEO权重的因素有哪些?
- IDEA部署Java项目时HTML,CSS等静态资源在网页上显示有问题的解决办法
- java使用谷歌api翻译读写Excel
- pthon缺陷检测(机器视觉)
- String 和 StringBuider
- WAF是什么?又有什么作用?
- 常用的webstore和vscode插件
热门文章
- 《设计模式》作者John Vlissides-UMLChina访谈录
- 解决Angular里面报错:error NG8002: Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘input‘.
- 计算机唤醒休眠蓝屏,win10睡眠唤醒蓝屏怎么解决_win10电脑待机后唤醒不久就会蓝屏如何修复...
- java数据写入word_将数据从Excel写入Word
- 从一道笔试题谈算法优化(上)
- python replace函数的使用
- Matlab关于图像的一些函数
- 计算机简历的荣誉奖项范文,简历中的荣誉与奖励怎么写
- c语言加法只能计算10以内的,一年级数学10以内加减法口算题(1000道).doc
- 用c语言统计注释数量,c语言代码统计器.doc