Material Design 风格下最好用的四种圆角控件

阅读时长 5 分钟读完

Material Design 是 Google 推出的一套设计风格,其主要特点包括扁平化设计、鲜艳的颜色、简洁的图标和大量使用圆角。在前端开发中,圆角控件是 Material Design 风格中不可或缺的一部分。本文将介绍四种最好用的圆角控件,并提供示例代码,帮助大家在实际项目中应用这些控件。

1. CardView

CardView 是 Material Design 中非常常见的控件,它可以用来呈现类似于卡片的效果。CardView 可以包含文字、图片、按钮等元素,既可以作为列表项,也可以独立使用。CardView 具有以下特点:

  • 四个圆角
  • 阴影效果
  • 可设置背景颜色或图片

下面是一个简单的 CardView 示例代码:

-- -------------------- ---- -------
-----------------------------------
    -----------------------------------
    ------------------------------------
    --------------------------
    -----------------------
    ----------------------------------

    ---- -------- ------ ---

-------------------------------------

2. FloatingActionButton

FloatingActionButton 是一个浮动按钮控件,常用于 Material Design 中的悬浮按钮。它通常用于呈现主要操作,如添加、新建、搜索等。FloatingActionButton 具有以下特点:

  • 圆形形状
  • 可设置背景颜色或图标
  • 悬浮在其他内容之上,以便于用户发现和点击

下面是一个简单的 FloatingActionButton 示例代码:

-- -------------------- ---- -------
---------------------------------------------------
    ---------------------
    -----------------------------------
    ------------------------------------
    ---------------------------------------
    ------------------------------------
    ----------------------------
    ------------------------------
    ----------------------------------------
    ------------------- --

3. BottomSheetDialog

BottomSheetDialog 是一个底部弹出框控件,常用于呈现与当前内容相关的可选操作。与普通的 Dialog 不同的是,BottomSheetDialog 是从屏幕底部弹出来的。BottomSheetDialog 具有以下特点:

  • 底部弹出
  • 可设置最大高度
  • 可设置圆角半径和背景颜色或图片

下面是一个简单的 BottomSheetDialog 示例代码:

其中,bottom_sheet_dialog.xml 为自定义的底部弹出框布局文件。

4. TextInputLayout

TextInputLayout 是一个扩展了 EditText 的布局控件,常用于实现输入框与标签的联动效果。通常情况下,InputLabel 会显示在输入框上方,并向上显示一个圆角边框。当用户聚焦到输入框时,InputLabel 会以动画的形式转移到输入框上方,并变为较小的字号。TextInputLayout 具有以下特点:

  • 可设置输入框提示语
  • 可设置输入框及其提示语的颜色
  • 可设置圆角半径和底部边框的颜色和粗细

下面是一个简单的 TextInputLayout 示例代码:

-- -------------------- ---- -------
----------------------------------------------
    -----------------------------------
    ------------------------------------
    ----------------------------
    ---------------------
    -------------------------------
    -------------------------------
    ------------------------
    ----------------------------------------
    ------------------------
    ---------------------------------

    ------------------------------------------------
        -----------------------------------
        ------------------------------------
        ------------------------ --

------------------------------------------------

结语

通过本文的介绍,相信读者对 Material Design 风格下最好用的四种圆角控件有了初步的了解,并能够熟练应用到实际开发中。当然,掌握这些控件的使用只是前端开发的一部分,想要成为优秀的前端工程师,我们还需要不断学习和实践,不断拓宽自己的技能和视野。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67973820504e4ea9bde46cf6

纠错
反馈