Material Design 是 Google 推出的一套设计规范，让移动端和 Web 端的设计更加统一、美观。随着移动互联网的普及，Material Design 已经成为前端开发中不可或缺的一部分。然而，有时候我们需要自定义一些特殊的控件以适应项目的需求。本文将介绍如何在 Material Design 的规范下自定义控件。
准备工作
在开始编写自己的控件之前，我们需要先准备好相应的开发环境和工具。
工具和版本说明
- Android Studio 3.0.1
- Material Components for Android 1.1.0-alpha03
- Gradle version 4.1
Material Components for Android
Material Components for Android 是 Google 推出的一套 Material Design 风格的 UI 库。它封装了许多 Material Design 的效果和控件，包括按钮、文本框、卡片、面板等等，使用这个库可以快速搭建出 Material Design 风格的应用。本文将基于这个库进行控件的开发。
自定义控件的步骤
接下来，我们将学习自定义一个 Material Design 风格的控件的步骤。在这个过程中，我们将自定义一个可以展示和收缩内容的卡片。
步骤一：新建项目
首先，在 Android Studio 中新建一个项目。在建立项目的时候，选择 EmptyActivity，并在 MainActivity 文件的布局文件中添加一个 CardView。这个 CardView 是之后我们需要自定义的控件。
-- -------------------- ---- ------- ----- ------------- ------------------ -------------------------------------------------- ---------------------------------------------------------- --------------------------------------------------- ---------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------ ---------------------------------- ------------------------------ ----------------------------------- ------------------------------------ ---------------------------- --------------------------- ----------------------- ----------------------------------------- ---------------------------- ---- ----- --------------- ---- ----- -- ----------------------------------------------------展开代码
步骤二：创建自定义控件类
我们需要创建一个继承自 CardView 的控件类。因为我们要实现能够展示和收缩内容的卡片，所以我们需要在这个类中添加一些自定义的属性、方法和变量。
-- -------------------- ---- ------- ------ ----- ------------------ ------- -------- - ------- ------- ---------- - ------ ------- -------- -------------- ---------------- ------ -------------------------- -------- - --------------- ------- - ------ -------------------------- -------- ------------ ------ - -------------- ------- ------- - ------ -------------------------- -------- ------------ ------ --- --------- - -------------- ------ ---------- ------- - ------- ---- ------ - -------------- -------- - ---------------- --------------------------------------------------------------- ----------------------------------------------- ----- ------ ------------- - ----------------------------------- --------------- - ------------------------------------- ---------------------- ----------------- - --------- ------ ---- ------------ -- - --------- - --- - ------- ---- -------- - -- ------------ - ------------------------------------ - ---- - --------------------------------------- - ---------- - ------------ - ------ ---- --------------- ------ - ----------------------------- - ------ ---- ----------------- -------- - --------------------------------- - -展开代码
在这个类中，我们添加了三个构造函数，并在 init() 方法里初始化了两个文本框。在 toggle() 方法里，我们将内容文本框的可见性设置为 GONE 或 VISIBLE，以实现展开和收缩的效果。而 setTitle() 和 setContent() 方法则用于设置卡片的标题和内容。
步骤三：创建自定义属性
我们需要在 attrs.xml 文件中定义自定义属性，以便可以在 XML 文件中使用这些自定义属性。
<declare-styleable name="ExpandableCardView"> <attr name="title" format="string" /> <attr name="content" format="string" /> </declare-styleable>
在这里，我们定义了 title 和 content 两个属性。这些属性可以在 XML 中使用，并在代码中使用它们来设置卡片的标题和内容。
步骤四：实现自定义属性
我们需要在控件类中实现自定义属性，以便可以在 XML 中设置这些属性。
-- -------------------- ---- ------- ------ ----- ------------------ ------- -------- - -- --- ------ -------------------------- -------- ------------ ------ - -------------- ------- ------- ---------- - - ------------------------------------- -------------------------------- ------------------------------------------------------------ ---------------------------------------------------------------- ------------ - -展开代码
在这里，我们使用 TypedArray 对象获取在 XML 中设置的自定义属性，并用它们来设置卡片的标题和内容。
步骤五：创建卡片布局
我们还需要创建一个布局文件，包含一个标题文本框和一个内容文本框。这个布局文件将被用于我们自定义的控件中。
-- -------------------- ---- ------- ----- ------------- ------------------ ------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------- --------- --------------------------------- ----------------------------------- ------------------------------------ ----------------------- -- --------- ----------------------------------- ----------------------------------- ------------------------------------ -- ---------------展开代码
在这个布局文件中，我们使用了 LinearLayout 和两个 TextView 控件。这个布局文件会被用于我们自定义的控件中，以展示卡片的标题和内容。
步骤六：使用自定义控件
最后，我们可以使用我们自定义的控件了。在我们的主活动中，我们需要将 CardView 替换为 ExpandableCardView。
-- -------------------- ---- ------- ------------------------------------------ ----------------------------------------- ----------------------------------- ------------------------------------ ---------------------------- --------------------------- ----------------------- ----------------- -- --- ------- -- -- ---------- ---- ------ ------------- ---------- ---- ----- --展开代码
在这个布局文件中，我们使用了 com.example.customview.ExpandableCardView 来代替之前的 androidx.cardview.widget.CardView。还可以在 XML 中设置 ExpandableCardView 的标题和内容。最后编译运行，即可看到我们自定义的卡片控件了。
总结
本文介绍了如何在 Material Design 的规范下自定义控件。我们以展示和收缩内容的卡片为例，演示了自定义控件的整个过程，涉及到了自定义属性、自定义控件类、卡片布局等多个方面。希望这篇文章有助于大家理解 Material Design 的基本原理，并能够自己实现一些自定义控件。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65428b6d7d4982a6ebc39e1b
