📌  相关文章
📜  以示例为主题在Android中设置浮动操作按钮

📅  最后修改于: 2021-05-13 16:15:25             🧑  作者: Mango

先决条件:

  • 带有示例的Android中的浮动操作按钮(FAB)
  • Android中的扩展浮动动作按钮示例

Android应用程序开发人员希望通过自定义和主题化android应用程序小部件来吸引用户的注意,并且仅通过应用程序的设计就可以保持更多的客户流量。在本文中,已经讨论了最重要的UI元素之一是浮动动作按钮(已扩展以及正常)。以下是主题浮动操作按钮的一些示例图像。

以示例为主题在Android中设置浮动操作按钮

创建主题浮动操作按钮的步骤

第1步:创建一个空的活动Android Studio项目

  • 创建一个空活动的Android Studio项目。您可以参考“如何在Android Studio中创建/启动新项目”。

步骤2:将依存关系添加到应用程序级别Gradle文件。

  • 在这里,我们使用由Google Material Design Team设计和开发的Floating action按钮。
  • 将依赖项添加到build.gradle(app)文件中,如下所示:
  • 确保将依赖项添加到应用程序级别的Gradle文件中。添加依赖项后,您需要单击Android Studio IDE右上角显示的“立即同步”按钮。
  • 当您单击立即同步按钮时,请确保您已连接到网络,以便它可以下载所需的文件。
  • 如果您无法获得上述步骤或找不到应用程序级别的Gradle文件,请参考下图:

摇篮文件

步骤3:在styles.xml文件中更改基本应用程序主题

  • 由于ExtendedFloating操作按钮是Google Material Design按钮的子类,因此需要更改主题。因此,需要将MaterialComponent主题应用于应用程序的Base主题。否则,一旦启动应用程序,该应用程序将立即崩溃。
  • 您可以参考本文:带示例的Android中的材料设计按钮,作为ExtendedMaterial设计按钮,是材料设计按钮的子类。文章说,具有“材料设计”按钮的优点以及为什么需要更改主题。
  • 转到app-> src-> main-> res-> values-> styles.xml并更改基本应用程序主题。 MaterialComponents包含各种操作栏主题样式,除了AppCompat样式,可以调用任何MaterialComponents操作栏主题样式。以下是styles.xml文件的代码。
XML
 
    
     


XML


  
    
    
    
  
    
    
    
  


XML

  
    
    
  
    
  


XML

  
    
    
    
  
    
    
    
  
    
    
    
    
  
    
    
  
    
    
    
    
    
  
    
    
    
  
    
    
    
    
  
    
  
    
    
  


XML


  


XML


  


XML


  


XML


  


XML


  


如果您无法在上述步骤中得到所有信息,则可以参考此图像。

步骤4:在drawable文件夹中导入一些矢量图标

  • 在这种情况下,将导入简单的添加矢量,添加警报,矢量,添加人矢量图标,以供演示之用。
  • 要在项目中导入任何矢量,需要右键单击可绘制文件夹->新建->矢量资产。
  • 将打开一个新的弹出窗口,并通过单击“剪贴画”按钮选择所需的任何矢量。
  • 您可以参考下图,了解如何打开矢量资产选择器。

矢量资产

  • 您可以参考下图,了解如何找到“剪贴画”按钮并选择向量。

剪贴画

步骤5:使用activity_main.xml文件

  • 现在,在activity_main.xml文件中,添加一个普通的浮动动作按钮和一个扩展的浮动动作按钮。确保使用ConstraintLayout。
  • 调用两个Floating Action Button,以便可以看到在操纵styles.xml文件后这两个按钮的变化。
  • 调用以下代码以添加两个浮动操作按钮:

XML格式



  
    
    
    
  
    
    
    
  

调用代码后,将产生以下UI:

输出界面

  • 要更改两个FAB的背景颜色,请在activity_main.xml文件中定义这两个FAB时调用以下属性(手动添加backgroundTint ,因为所有FAB都将应用默认的SmallComponent主题)。

现在,让我们讨论如何在单个代码中更改两个“浮动”操作按钮的主题:

  • 要更改两个FAB的主题,我们需要覆盖styles.xml文件中的默认主题SmallComponent主题:

XML格式


  
    
    
  
    
  

输出:在Emulator上运行(对styles.xml进行更改之后):

  • 可以看到,在上面的代码中,“ cornerFamily”属性被作为“ cut”值调用。因此,让我们从SmallComponent主题中覆盖角落家庭。
  • cornerFamily”属性包含“ cut”和“ rounded”两个值。有关这些的更多信息,请继续阅读有关如何借助“ cornerSize”属性更改边角尺寸的文章。
  • 因此,无论主题是扩展FAB还是普通FAB,这种更改主题的方法都会影响所有FAB类型。
  • 如果应用程序中实现了,即使它也会更改Google Material Design按钮的形状和主题。请参考:带有示例的Android中的Material Design按钮。

现在让我们讨论如何分别更改两种类型的FAB的主题:

  • 现在,在相同的styles.xml文件中,我们需要进行一些小的更改。
  • 在前一种情况下,我们在AppTheme样式内调用了“ shapeAppearanceSmallComponent”项。
  • 现在,我们需要为扩展FAB添加项目“ extendedFloatingActionButtonStyle” ,为常规FAB添加项目“ floatingActionButtonStyle” ,以区分两者的主题。
  • 请参考以下代码以了解如何完成:

XML格式


  
    
    
    
  
    
    
    
  
    
    
    
    
  
    
    
  
    
    
    
    
    
  
    
    
    
  
    
    
    
    
  
    
  
    
    
  

更改styles.xml文件后,将产生以下UI:

输出界面

  • 现在,分别为普通FAB和扩展FAB建立了不同的主题。

试用customNormalFAB和customExtendedFAB

  • 现在,继续使用子级“ customNormalFAB ”和“ customExtendedFAB ”(其余其他内容保持不变)进行实验,以更改两个FAB的形状。
  • 还可以尝试使用“ cornerSizeTopRight”,“ cornerSizeTopLeft”,“ cornerSizeBottomRight”和“ cornerSizeBottomLeft”。
  • 现在,对两个孩子进行如下更改:

范例1:

XML格式



  


输出用户界面将为:

以示例为主题在Android中设置浮动操作按钮

范例2:

XML格式



  


输出用户界面将为:

以示例为主题在Android中设置浮动操作按钮

范例3:

XML格式



  


输出用户界面将为:

以示例为主题在Android中设置浮动操作按钮

范例4:

XML格式



  


输出用户界面将为:

以示例为主题在Android中设置浮动操作按钮

范例5:

XML格式



  


输出用户界面将为:

以示例为主题在Android中设置浮动操作按钮

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处前往由我们的专家精心策划的指南,以使您立即做好行业准备!