Question

我想知道我怎样才能做一个下拉按钮/菜单，就像我们在谷歌的设计规格和下面的图片中看到的那样，所以列表在按钮下方展开。我是否需要为其设置自定义布局而不是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 class from this post，因为我们需要回调来知道微调器何时打开关闭（用于样式目的）。

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

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

此外，我们需要上面使用的drawable：

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>

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

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

Answer 2

您可以使用PopUpMenu https://developer.android.com/reference/android/widget/PopupMenu.html

PopupMenu popup = new PopupMenu(context, view);

for (Element e: elementsList) {

    popup.getMenu().add(e.id).setTitle(e.title);
}

popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

     public boolean onMenuItemClick(MenuItem item) {

        return true;
     }
});

popup.show();

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

2 个答案: