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

初始化状态:


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



选中后:


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


附:
1,《Android第三方开源下拉框:NiceSpinner》链接:http://blog.csdn.net/zhangphil/article/details/51554001

评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!