标签: material-components

我试图让底部导航有点棘手。事实上我想要这种底部导航： 每个选项卡在被选中时都有不同的颜色。例如，选择时度量将呈红色（图标和标题），选择时配置文件将呈绿色...
所以我尝试为每个项目使用选择器（在我的菜单中），
但未应用颜色。图标更改成功（我尝试在选择某个项目时放置一个完全不同的图标），但选项卡标题的颜色没有更改。
我尝试从底部导航中删除 2 个属性：

app:itemTextColor="@color/black"
app:itemIconTint="@color/black"

但情况变得更糟，因为选择选项卡时应用了我的主题应用程序（主要）的颜色。

我的底部导航：

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:menu="@menu/main_bottom_navigation"
                style="@style/BottomNavigationView"
                app:labelVisibilityMode="labeled"
                android:layout_alignParentBottom="true" />

我的选择器之一（逻辑应用于所有项目）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Pressed state -->
    <item android:drawable="@drawable/bottom_bar_journal_on"
            android:color="@color/red_FF623E"
            android:state_checked="true"/>
    <!-- Default state -->
    <item android:drawable="@drawable/bottom_bar_journal_off"
            android:color="@color/background_yellow"
            android:state_checkable="false"/>

</selector>

和我的菜单（我应用所有选择器的地方）：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
            android:id="@+id/action_journal"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_journal"
            android:title="@string/main_menu_journal"
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_measure"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_measure_off"
            android:title="@string/main_menu_measure"
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_add"
            android:enabled="false"
            android:title=""
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_treatment"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_treatment_off"
            android:title="@string/main_menu_treatment" />

    <item
            android:id="@+id/action_profile"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_profile"
            android:title="@string/main_menu_profile"
            app:showAsAction="withText" />
</menu>

我正在尝试创建具有自定义形状的自定义 FAB。我尝试过将android: background与shapeAppearanceOverlay和shapeAppearance属性一起设置，但仍然没有运气。

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/edit_score_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:shapeAppearance="@drawable/edit_score_fab"
            app:shapeAppearanceOverlay="@drawable/edit_score_fab"
            android:background="@drawable/edit_score_fab"/>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <size
        android:height="5dp"
        android:width="10dp"/>
    <corners android:bottomLeftRadius="4dp" />
    <solid android:color="@color/color_primary"/>
</shape>

我的结果

我想要的是

我想根据android:theme值更改材质工具栏中的溢出菜单图标颜色。

在此示例中，我的搜索图标通过与属性实现相关的一些魔法而受到工具栏主题的影响app:actionViewClass，但我的信息图标则不然。

我的工具栏：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:liftOnScroll="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        app:title="@string/app_name"
        app:menu="@menu/menu_main"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>

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

我的菜单：

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

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_24dp"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        android:title="TODO" />

    <item android:id="@+id/action_info"
        android:icon="@drawable/ic_info_24dp"
        app:showAsAction="always"
        android:title="TODO" />

</menu>

是否存在简单的解决方案？

我从 gitHub 克隆了一个 Material-dashboard 存储库来练习 Material UI 库。当我查看代码时，我发现了ownerState道具，我很困惑它是自定义道具还是由Material UI库提供的我对它进行了研究，我认为它是包含我们可以通过任何MUI传递的所有道具的对象组件，但我不太确定到底是什么？

这是我的自定义组件...

我们将对象传递给ownerState

这里使用了 prop

我正在尝试使用材料下拉选择，但出现此错误：

EXCEPTION: No provider found for DomPopupSourceFactory.

将 materialDirectives 添加到指令列表中，html 调用很简单：

<material-dropdown-select></material-dropdown-select>

我尝试了 angular_components_example 并且效果很好。问题出在我的项目上。我已经尝试清理 .packages 并执行 pub get。没有任何效果。我尝试了一些其他材料组件，它们奏效了。

将Web材料组件用于Web CDN以进行前端设计的示例没有用处.

我发现了这个模态抽屉的演示,但它似乎没有使用已发布的CSS和JavaScript CDN. 演示:模态抽屉演示

如何使用Material Components的CDN实现模态抽屉？

当TextInputLayout处于聚焦模式时，有没有办法删除浮动标签（提示）？

当我尝试在app:hintEnabled="false"inside 中设置和提示时TextInputeEditText，TextInputLayout通过隐藏顶部笔画表现得很奇怪。

<com.google.android.material.textfield.TextInputLayout
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Text">

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

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

重要的是我在版本中使用材料组件 1.1.0-alpha01.

编辑

这是它的样子（当输入未聚焦时）：

顶部行程被切断。

我想以编程方式更改 TextInputLayout 的轮廓，但我似乎无法让它工作。有一个选项可以通过 XML 完成（其他 SO 用户使用 XML 提出的问题），但这对我来说无法使用，因为我需要动态着色。我目前有以下布局：

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:id="@+id/color_outline"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/color"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Choose color"/>

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

我试图通过查看 TextInputLayout 的各种框方法来应用着色，但它没有任何效果。

internal fun String.toIntColor() = Integer.parseInt(this.replaceFirst("#", ""), 16)


val colorOutline: TextInputLayout = view.findViewById(R.id.color_outline)
colorOutline.boxStrokeColor = "#006699".toIntColor()

如何动态着色，如下图所示？

现在的情况：

期望的情况：（photoshopped）

类似的问题，但专注于 XML

迁移到最新版本的 Material Components ( 1.1.0-alpha09) 后，我注意到TextInputLayout有一些填充水平填充。我的目标是实现没有背景或轮廓框的旧样式文本字段。所以我扩展了其中一种样式，即Widget.MaterialComponents.TextInputLayout.FilledBox并将背景颜色设置为透明。

<style name="Widget.MyApp.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="boxBackgroundColor">@color/transparent</item>
</style>

现在的问题是，这个输入字段在我的应用程序中看起来很奇怪，具有这种水平填充（对于填充框或轮廓框是必需的）。

所以我的问题是，我怎样才能删除这个填充？

我想使选项卡的背景平滑地动画到所选位置（就像tabIndicator选项卡之间的默认动画一样）。

这是我的TabLayout样子

<android.support.design.widget.TabLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabBackground="@drawable/tab_selector"
        app:tabTextColor="@color/white"
        android:background="@drawable/tab_layout_bg"         
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabIndicator="@null"
        app:tabRippleColor="@null">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab1"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab2"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab3"/>

    </android.support.design.widget.TabLayout>

在这里，Tab 3被选中。如果我选择Tab 1的背景应该从动画Tab 3到Tab 1。

我正在使用选择器更改选项卡的背景。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/tab_layout_fg"/>
    <item
        android:drawable="@drawable/tab_layout_bg"/>
</selector>

在这里，我将附加示例动画。仅查看选项卡栏。

我遵循的方法是否可以实现这种动画？如果没有，请建议我另一种方式。我已经从两天开始从事这项工作。仍然无法弄清楚。

提前致谢。