标签: material-components

我正在用这个

https://material.io/develop/web/components/tabs/tab-bar/

制作标签栏

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<div class="mdc-tab-bar" role="tablist">
    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">

                <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
                        <span class="mdc-tab__text-label">Name</span>
                    </span>
                    <span class="mdc-tab-indicator mdc-tab-indicator--active">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
                        <span class="mdc-tab__text-label">Tags</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span> …

我正在使用 Material 设计库制作圆形的 editText，我能够做到这一点，但现在我希望它看起来更小，我使用了密集的 textField 样式，但我仍然希望视图的高度更小比起那个来说。问题是浮动 Label 标签，我没有为 textField 设置提示，但 Label 标签仍然占用一些空白空间。

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:endIconMode="custom"
        app:endIconDrawable="@drawable/ic_speaker_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/topBar_view"
        app:layout_constraintEnd_toEndOf="@+id/topBar_view"
        app:layout_constraintStart_toEndOf="@+id/separater_line"
        app:layout_constraintTop_toTopOf="parent"
        app:boxCornerRadiusTopStart="20dp"
        app:boxCornerRadiusTopEnd="20dp"
        app:boxCornerRadiusBottomStart="20dp"
        app:boxCornerRadiusBottomEnd="20dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

我只希望 textField 看起来像 chrome url 搜索栏，苗条，键入时提示消失，而不是浮动标签。

编辑：我尝试了该app:hintEnabled="false"属性，但仍有一个空白空间

我正在尝试SwitchMaterial在 Android 项目中使用组件，但是 Android Studio 在设计时找不到它，并且将它包含在我的 xml 布局中会导致ClassNotFoundException在运行时出现问题。

• 最近的 Android Studio 项目已使用 AndroidX 进行设置
• 'com.google.android.material:material:1.0.0' 在我的依赖项中，gradle 同步没有错误
• 存在其他一些 Material 组件，例如我MaterialButton在同一个 XML/Activity 上使用
• 无法com.google.android.material.switchmaterial.SwitchMaterial在 xml 中找到
• com.google.android.material.switchmaterial.SwitchMaterial尝试添加到活动 java 单元时无法导入
• 构建设置：编译 SDK = 29 构建工具 = 29.0.2 最小 SDK = 19 目标 SDK = 29
• 没有设置proguard规则（完全）所以不应该弄乱它
• 花了一个小时的谷歌搜索答案 - 没有关于 SO 或 Android / Material Docs

SwitchMaterial即使有其他组件也找不到

应用程序构建.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "my.app.id"
        minSdkVersion 19 …

当我使按钮宽度与父级匹配时，可绘制的开始和文本距离太远，并且它们似乎不尊重android:drawablePadding设置。我也尝试过，android:gravity="center"但android:textAlignment="center"没有成功。设置一些paddingStart/End会间接影响它们之间的距离。请参阅下面的结果：

按钮的代码：

<Button
            style="@style/ActionButton.Primary.Light.Large"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:drawableLeft="@drawable/ic_filter_and_sort_white"
            android:drawablePadding="0dp"
            android:textAlignment="center"
            android:text="Apply filters"
            app:layout_constraintBottom_toTopOf="@id/someViewBelow"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/someViewAbove" />

样式定义了background, textColor, margins, minDimensions, paddings, radiuses, textSize, textAllCaps, radiuses, stateListAnimator, fontPath- 所以没有什么会影响我正在寻找的内容。

我无法在 MaterialCardView 的中心设置自定义图标。这是我的 xml 布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/cardPaymentContainer"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:layout_margin="@dimen/default_margin"
    android:layout_marginStart="@dimen/button_margin"
    android:layout_marginEnd="@dimen/button_margin"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolBarContainer">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardPaymentCardView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:checkable="true"
        android:clickable="true"
        android:focusable="true"
        app:cardCornerRadius="@dimen/card_view_cornder_radius"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

处理点击活动：

dataBinding =
            DataBindingUtil.setContentView<PaymentActivityBinding>(this, R.layout.payment_activity)
        dataBinding.setHandler(this)
        dataBinding.cardPaymentCardView.setOnClickListener({
            Debug.d(TAG, "cardPaymentCardView: onClick")
            dataBinding.cardPaymentCardView.isChecked = !dataBinding.cardPaymentCardView.isChecked
        })

这里的结果：

未点击：

并点击：

但我需要将我的自定义图标放在 CardView 的中心。像这样：

我将 SVG 转换为 xml（通过 Android Studio）

我试试这个，但图标没有显示，也没有显示在cardView的中心：

 <com.google.android.material.card.MaterialCardView
                android:id="@+id/cardPaymentCardView"
                style="@style/cardViewStyle"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                app:cardCornerRadius="@dimen/card_view_cornder_radius"
                app:checkedIcon="@drawable/ic_credit_card_outline_select"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

            </com.google.android.material.card.MaterialCardView>

目前我正在使用材料组件和材料主题：

  <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
   ...
   ...
   <item name="materialButtonStyle">@style/Button</item>
  </style>

我能够使用 materialButtonStyle 为每个按钮定义样式，我想知道是否可以为工具栏实现相同的样式。

这真的很重要：这个想法是为了避免在应用程序栏或工具栏组件中定义样式/主题，而只是使用它来获取应用程序主题定义的样式。

我想避免这种情况：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:theme="@style/ToolbarTheme">

    <com.google.android.material.appbar.MaterialToolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:titleTextAppearance="@style/ToolbarTextAppearance"
      tools:title="Title" />

</com.google.android.material.appbar.AppBarLayout>

在主题中，我希望能够指定字体样式和文本外观。

这些是我的风格：

  <style name="ToolbarTheme" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
  </style>

  <style name="ToolbarTextAppearance" parent="TextAppearance.AppCompat.Title">
    <item name="android:fontFamily">@font/nunito_bold</item>
  </style>

使用之前定义的代码，我能够获得这些更改。但正如我所提到的，我想将其定义为我的应用程序主题的一部分，例如材质按钮。

我尝试使用它，但没有成功：

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="appBarLayoutStyle">@style/ToolbarTheme</item>
    <item name="toolbarStyle">@style/ToolbarTheme</item>
</style>

我目前在我的弹出菜单中使用这种样式：

<style name="mainActivityTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorBlack</item>
    <item name="colorPrimaryDark">@color/colorBlack</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

它如何导致弹出菜单在顶部和底部有额外的空间：

我如何做到这一点，所以没有多余的空间？是否有某种样式可以包装其内容？

编辑：我忘了提到我以编程方式膨胀视图，所以这可能是一个问题

private void inflateMoreMenu(View view){
        PopupMenu popupMenu = new PopupMenu(mContext, view);
        popupMenu.inflate(R.menu.popup_menu);
        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {

                switch (item.getItemId()){
                    case R.id.popup_menu_report:
                        //Inflate a layout

                        break;
                    case R.id.popup_menu_block:
                        //Inflate a layout

                        break;

                }
                return false;
            }
        });

        @SuppressLint("RestrictedApi")
        MenuPopupHelper menuHelper = new MenuPopupHelper(mContext, (MenuBuilder) popupMenu.getMenu(), view);
        menuHelper.setForceShowIcon(true);
        menuHelper.show();
    }

popup_menu 的 XML：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/popup_menu_report"
        android:title="Report"
        android:icon="@drawable/icon_messages_report"/>

    <item
        android:id="@+id/popup_menu_block"
        android:title="Block" …

我第一次尝试在材料 TabItem 上使用徽章通知图标。我的目标是在 RecyclerView 中显示带有项目总数的徽章。我正在阅读此文档Tab Layout - Material Components for Android并尝试相应地实现该功能，但在这一行BadgeDrawable badge = tablayout.getTab(0).getOrCreateBadge();我收到了BadgeDrawable该类未找到的错误。

谁能帮我这个？

谢谢

我使用的MaterialButtonToggleGroup是单选（一次只选中一个按钮）。如何检查是否没有选中任何按钮？

        toggleGroup?.addOnButtonCheckedListener { group, checkedId, isChecked ->
        if (isChecked) {
            when (checkedId) {
                R.id.first_materialButton -> {
                    // do something when selected
                }

                R.id.second_materialButton -> {
                    // do something when selected
                }
            }
        }
    }

阅读MaterialComponents 主题警报对话框按钮和https://medium.com/@lcdsmao/material-design-custom-alert-dialog-5a9cab3ade11我设置AlertDialog了新材料主题的按钮和文本颜色。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- AlertDialog -->
    <item name="materialAlertDialogBodyTextStyle">@style/MaterialAlertDialogTextTheme</item>
    <item name="materialAlertDialogTheme">@style/MaterialAlertDialogButtonsTheme</item>
</style>

<!-- AlertDialog text -->
<style name="MaterialAlertDialogTextTheme" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:colorAccent">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorPrimaryitem>
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">bold</item>
</style>

<!-- AlertDialog buttons -->
<style name="MaterialAlertDialogButtonsTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarPositiveButtonStyle">@style/AlertDialog.Button</item>
    ...

创建AlertDialogFragment使用后

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    super.onCreateDialog(savedInstanceState)

    return MaterialAlertDialogBuilder(context!!).apply {
        ...
    }.create()
} …