Skip to content

QMUI round widgets

chanthuang edited this page Feb 25, 2019 · 1 revision

QMUI round widgets 是一套提供了圆角功能的控件,包括:

xml 属性

这些 widgets 都支持圆角功能,其内部是通过将 QMUIRoundButtonDrawable 作为 background 来实现,支持的 xml 属性见 QMUIRoundButtonDrawable。各个属性的默认样式配置见 qmui_style_widget.xml

在 Java 中修改按钮样式

因为这些 widgets 的圆角功能是通过将 QMUIRoundButtonDrawable 作为 background 来实现,所以修改样式时需要获取到其 background 来做修改。 例:

QMUIRoundButton button = new QMUIRoundButton(getContext());
QMUIRoundButtonDrawable roundButtonDrawable = (QMUIRoundButtonDrawable) button.getBackground();
// 再对 roundButtonDrawable 设置样式

具体支持的方法见 QMUIRoundButtonDrawable

注意

因为该控件的圆角采用 View 的 background 实现,所以与原生的 android:background 有冲突。

使其他 View 支持圆角功能

通过简单的方式,可以使任何 View 支持圆角功能,参考 QMUIRoundButtonDrawable

QMUIRoundButton 全局配置组件样式的示例

QMUIRoundButton 作为最常用的 round widget,可在主题中配置它的样式,就能全局生效。

<!-- 在 App 的 theme 中添加 -->
<item name="QMUIButtonStyle">@style/YourStyle</item>

<!-- 并添加自己的 style -->
<style name="YourStyle" parent="QMUI.RoundButton">
    <item name="qmui_backgroundColor">@color/your_color_or_colorstatelist</item>
</style>

<!-- 使用的地方无需指定样式即可生效 -->
<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- 当然,如果使用的地方指定了样式,将覆盖 theme 中的样式 -->
<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:qmui_backgroundColor="@color/app_color_theme_2" />

相关类