下拉按钮/ Spinner就像Google的设计规格一样

Question

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

Answer 1

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

我尝试使用AppCompat,使用自定义drawable和视图的提升属性制作一个看起来类似于你发布的那个,因此它可能不适用于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这篇文章中的类,因为我们需要回调来知道微调器何时打开关闭(用于样式目的).

然后我们设置微调器:我们使用所选项目的自定义视图(下面定义的布局)来应用我们的样式和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" />

此外,我们需要上面使用的drawables:

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>

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

如果我们想要使用带有图像的微调器,我们还必须定义自定义下拉项目视图.