Android下拉列表选项框及指示箭头动画
程序员文章站
2022-03-24 18:16:57
android原生的spinner提供了下拉列表选项框,但在一些流行的app中,原生的spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框:
初始化状态:...
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:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。