android - 下拉按钮/微调器，就像谷歌设计规范中的那些

Question

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

Answer 1

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

我尝试制作一个看起来与您发布的相似的作品，使用 AppCompat，使用自定义可绘制对象和 View 的高程属性，因此它可能不适用于 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 class from this post ，因为我们需要回调来了解微调器何时打开和关闭(出于样式目的)。

然后我们设置微调器:我们为所选项目(下面定义的布局)使用自定义 View 来应用我们的样式，以及 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 布局:

<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>

这给了我们这样的结果(左折叠，右打开):

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