Kevin Learn QMUI--＞QMUIRoundButton

Posted 2022-03-28 Kevin_小飞象

简介

对 Button 提供圆角功能，支持以下特性：

• 指定圆角的大小。
• 分别指定不同方向的圆角大小。
• 指定圆角的大小为高度的一半，并跟随高度变化自适应圆角大小。
• 支持分别指定背景色和边框色，指定颜色时支持使用 color 或 ColorStateList。

开始使用

qmui

1. 引入库
   请确保配置了 JCenter 仓库源，然后直接引用:
   implementation "com.qmuiteam:qmui:2.0.0-alpha10"
   至此，QMUI 已被引入项目中。

2. 配置主题
   把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。
   <style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>

效果图

核心代码

1. 布局文件

<?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"
    android:orientation="vertical"
    tools:context=".ui.QDButtonActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:qmui_topbar_title_bold="true"
        app:qmui_topbar_title_color="@color/white"
        android:background="@color/app_color_theme_8"/>

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="10dp"
        android:text="一半圆角"
        android:layout_margin="20dp"
        app:qmui_isRadiusAdjustBounds="true"
        android:layout_gravity="center"/>

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:gravity="center"
        android:padding="10dp"
        android:layout_margin="20dp"
        android:text="指定圆角大小"
        app:qmui_radius="4dp"/>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_gravity="center">

        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:text="东"
            app:qmui_radiusTopLeft="8dp"/>

        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="64dp"
            android:gravity="center"
            android:text="西"
            app:qmui_radiusTopRight="8dp"/>

        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="64dp"
            android:gravity="center"
            android:text="邪"
            app:qmui_radiusBottomLeft="8dp"/>

        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="64dp"
            android:layout_marginTop="64dp"
            android:gravity="center"
            android:text="毒"
            app:qmui_radiusBottomRight="8dp"/>

    </FrameLayout>

</LinearLayout>