Android弹出选项框及指示箭头动画选择

绝地灬酷狼 2023-10-17 08:56 113阅读 0赞

**Android弹出选项框及指示箭头动画选择**

Android原生的Spinner提供了下拉列表选项框，但在一些流行的APP中，原生的Spinner似乎不太受待见，而通常会有下图所示的下拉列表选项框：  
初始化状态：

![Center][]

点击弹出下拉选择选项框：

![Center 1][]

选中后：

![Center 2][]

注意那个指示箭头，如果把这个控件写的比较精细的话，在下拉-选择-复位过程中箭头是应该有动画旋转效果的。  
这种样式的选择框实现方案很多，并且常见、常用，我自己写了一个，我写的这个例子的代码运行结果就是上图所示。  
首先是MainActivity.java：

package zhangphil.app;
    
    import android.content.Context;
    import android.graphics.Color;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.support.v7.widget.ListPopupWindow;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.PopupWindow;
    import android.widget.TextView;
    import android.widget.Toast;
    
    
    public class MainActivity extends AppCompatActivity {
    
        private ListPopupWindow listPopupWindow = null;
    
        private ImageView arrowImageView;
        private TextView chooseText;
        private LinearLayout linearLayout;
        private SortAadapter adapter = null;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            linearLayout= (LinearLayout) findViewById(R.id.linearLayout);
    
            arrowImageView = (ImageView)findViewById(R.id.arrow);
            chooseText= (TextView) findViewById(R.id.chooseText);
    
            linearLayout.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    showListPopupWindow(linearLayout);
                }
            });
        }
    
        private class SortAadapter extends ArrayAdapter {
    
            private String[] strs = {"最新", "推荐", "全部", "最热"};
            private LayoutInflater inflater;
            private int res;
    
            public SortAadapter(Context context, int resource) {
                super(context, resource);
                inflater = LayoutInflater.from(context);
                res = resource;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                if (convertView == null)
                    convertView = inflater.inflate(res, null);
    
                TextView text = (TextView) convertView.findViewById(android.R.id.text1);
                text.setText(getItem(position));
                text.setTextColor(Color.WHITE);
                text.setTextSize(10);
    
                convertView.setBackgroundColor(Color.RED);
    
                return convertView;
            }
    
            @Override
            public String getItem(int position) {
                return strs[position];
            }
    
            @Override
            public int getCount() {
                return strs.length;
            }
        }
    
    
        public void showListPopupWindow(View view) {
            if (listPopupWindow == null)
                listPopupWindow = new ListPopupWindow(this);
    
            if (adapter == null) {
                adapter = new SortAadapter(this, android.R.layout.simple_list_item_1);
    
                // ListView适配器
                listPopupWindow.setAdapter(adapter);
    
                // 选择item的监听事件
                listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
                        Toast.makeText(getApplicationContext(), adapter.getItem(pos), Toast.LENGTH_SHORT).show();
                        chooseText.setText(adapter.getItem(pos));
    
                        listPopupWindow.dismiss();
                    }
                });
    
                listPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        //旋转0度是复位ImageView
                        arrowImageView.animate().setDuration(500).rotation(0).start();
                    }
                });
            }
    
    
            // ListPopupWindow的锚,弹出框的位置是相对当前View的位置
            listPopupWindow.setAnchorView(view);
    
            listPopupWindow.setVerticalOffset(dip2px(this,5));
    
            // 对话框的宽高
            listPopupWindow.setWidth(view.getWidth());
    
            listPopupWindow.setModal(true);
    
            listPopupWindow.show();
            arrowImageView.animate().setDuration(500).rotation(180).start();
        }
    
    
        public static int dip2px(Context context, float dipValue) {
            float sDensity = context.getResources().getDisplayMetrics().density;
            final float scale = sDensity;
            return (int) (dipValue * scale + 0.5f);
        }
    }

布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="24dp"
            android:background="@drawable/round_corner_line_radius_3dp"
            android:orientation="horizontal"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:layout_centerInParent="true">
    
            <TextView
                android:id="@+id/chooseText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="分类"
                android:textColor="@android:color/holo_orange_dark"
                android:textSize="12dp" />
    
            <ImageView
                android:id="@+id/arrow"
                android:layout_width="14dp"
                android:layout_height="14dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="8dp"
                android:src="@drawable/icon" />
    
        </LinearLayout>
    
    </RelativeLayout>

LinearLayout的背景需要一个圆角背景res/drawable/round\_corner\_line\_radius\_3dp.xml：

<?xml version="1.0" encoding="UTF-8"?>  
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape= "rectangle">
    
        <stroke android:color="@android:color/holo_orange_dark"
            android:width="2px"/>
    
        <solid  android:color="@android:color/transparent"/>
        <corners android:radius="3dp" />
    
    </shape>

箭头icon.png：

![Center 3][]

附：  
1，《Android第三方开源下拉框：NiceSpinner》链接：[http://blog.csdn.net/zhangphil/article/details/51554001][http_blog.csdn.net_zhangphil_article_details_51554001]

[Center]: https://img-blog.csdn.net/20161008145354484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20161008145453282?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20161008145522235?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20161008145710952?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_51554001]: http://blog.csdn.net/zhangphil/article/details/51554001