下拉按钮/微调器类似于 Google 设计规范中的按钮

我想知道如何制作一个下拉按钮/菜单，就像我们在 Google 的设计规范和下图中看到的那样，因此列表在按钮下方展开。我是否需要为其设置自定义布局而不是R.layout.support_simple_spinner_dropdown_item?

从技术上讲，它只是一个具有自定义视图和样式的 Spinner。

我尝试制作一个看起来与您发布的类似的产品，使用 AppCompat、使用自定义可绘制对象和视图的高程属性，因此它可能无法完全适用于 5.0 之前的 Android 版本。

首先让我们定义我们的Spinner及其下拉属性：

<your.package.CustomSpinner
    android:id="@+id/spinner"
    style="@style/Widget.AppCompat.Spinner"
    android:layout_margin="10dp"
    android:layout_width="200dp"
    android:dropDownWidth="200dp"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:dropDownVerticalOffset="?attr/dropdownListPreferredItemHeight"
    android:background="@drawable/spinner_bg"
    android:popupBackground="@android:color/white"
    android:paddingRight="14dp"
    android:stateListAnimator="@drawable/spinner_sla"
    android:popupElevation="3dp" />

重要提示：我们使用CustomSpinner这篇文章中的课程 https://stackoverflow.com/a/27692614/559745，因为我们需要回调来知道微调器何时打开和关闭（出于样式目的）。

然后我们设置微调器：我们使用所选项目的自定义视图（下面定义的布局）来应用我们的样式，以及 AppCompat 的默认值R.layout.support_simple_spinner_dropdown_item，但我们可以使用其他布局来进一步调整样式。

String[] data = {"Arial", "Calibri", "Helvetica", "Roboto", "Veranda"};

ArrayAdapter adapter = new ArrayAdapter<>(getContext(), R.layout.spinner_item_selected, data);
adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item);

final CustomSpinner spinner = (CustomSpinner) view.findViewById(R.id.spinner);
spinner.setAdapter(adapter);
spinner.setSpinnerEventsListener(new CustomSpinner.OnSpinnerEventsListener() {
    public void onSpinnerOpened() {
        spinner.setSelected(true);
    }
    public void onSpinnerClosed() {
        spinner.setSelected(false);
    }
});

这里的spinner_item_selected.xml layout:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="?attr/spinnerDropDownItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:background="@drawable/abc_spinner_mtrl_am_alpha"
    android:ellipsize="marquee" />

此外，我们还需要上面使用的绘图：

spinner_bg.xml作为旋转器的背景：

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:state_pressed="true" android:drawable="@android:color/white" />
    <item android:state_selected="true" android:drawable="@android:color/white" />
    <item>
        <inset android:insetLeft="-1dp" android:insetRight="-1dp">
            <shape android:shape="rectangle">
                <stroke android:width="1dp" android:color="#cccccc" />
                <solid android:color="#f0f0f0" />
            </shape>
        </inset>
    </item>
</selector>

spinner_sla.xml为旋转器的高度设置动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_mediumAnimTime"
                android:propertyName="translationZ"
                android:valueTo="3dp" />
        </set>
    </item>
    <item android:state_selected="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="3dp" />
        </set>
    </item>
    <item>
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0" />
        </set>
    </item>
</selector>

这给了我们这样的结果（左折叠，右打开）：

如果我们想使用带有图像的微调器，我们还必须定义一个自定义下拉项视图。