Material Design 中自定义控件的制作教程-JavaScript中文网-JavaScript教程资源分享门户

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 是之后我们需要自定义的控件。

// javascriptcn.com 代码示例
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <androidx.cardview.widget.CardView
        android:id="@+id/my_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp"
        app:layout_constraintTop_toTopOf="parent"
        tools:contentDescription="My Card View"
        tools:title="My Card View" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤二：创建自定义控件类

我们需要创建一个继承自 CardView 的控件类。因为我们要实现能够展示和收缩内容的卡片，所以我们需要在这个类中添加一些自定义的属性、方法和变量。

// javascriptcn.com 代码示例
public class ExpandableCardView extends CardView {

    private boolean isExpanded = false;
    private TextView titleTextView, contentTextView;

    public ExpandableCardView(Context context) {
        super(context);
        init();
    }

    public ExpandableCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ExpandableCardView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.expandable_card_view, this, true);

        titleTextView = findViewById(R.id.title_text_view);
        contentTextView = findViewById(R.id.content_text_view);

        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                toggle();
            }
        });
    }

    private void toggle() {
        if (isExpanded) {
            contentTextView.setVisibility(GONE);
        } else {
            contentTextView.setVisibility(VISIBLE);
        }

        isExpanded = !isExpanded;
    }

    public void setTitle(String title) {
        titleTextView.setText(title);
    }

    public void setContent(String content) {
        contentTextView.setText(content);
    }

}

在这个类中，我们添加了三个构造函数，并在 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 中设置这些属性。

// javascriptcn.com 代码示例
public class ExpandableCardView extends CardView {

    // ...

    public ExpandableCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ExpandableCardView);
        setTitle(a.getString(R.styleable.ExpandableCardView_title));
        setContent(a.getString(R.styleable.ExpandableCardView_content));
        a.recycle();
    }

}

在这里，我们使用 TypedArray 对象获取在 XML 中设置的自定义属性，并用它们来设置卡片的标题和内容。

步骤五：创建卡片布局

我们还需要创建一个布局文件，包含一个标题文本框和一个内容文本框。这个布局文件将被用于我们自定义的控件中。

// javascriptcn.com 代码示例
<?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:orientation="vertical">

    <TextView
        android:id="@+id/title_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/content_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

在这个布局文件中，我们使用了 LinearLayout 和两个 TextView 控件。这个布局文件会被用于我们自定义的控件中，以展示卡片的标题和内容。

步骤六：使用自定义控件

最后，我们可以使用我们自定义的控件了。在我们的主活动中，我们需要将 CardView 替换为 ExpandableCardView。

// javascriptcn.com 代码示例
<com.example.customview.ExpandableCardView
    android:id="@+id/my_expandable_card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp"
    app:content="This is the content of my expandable card view."
    app:title="My Expandable Card View" />

在这个布局文件中，我们使用了 com.example.customview.ExpandableCardView 来代替之前的 androidx.cardview.widget.CardView。还可以在 XML 中设置 ExpandableCardView 的标题和内容。最后编译运行，即可看到我们自定义的卡片控件了。

总结

本文介绍了如何在 Material Design 的规范下自定义控件。我们以展示和收缩内容的卡片为例，演示了自定义控件的整个过程，涉及到了自定义属性、自定义控件类、卡片布局等多个方面。希望这篇文章有助于大家理解 Material Design 的基本原理，并能够自己实现一些自定义控件。感谢您的阅读！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65428b6d7d4982a6ebc39e1b