欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android下拉列表选项框及指示箭头动画

程序员文章站 2022-08-08 10:23:05
android原生的spinner提供了下拉列表选项框,但在一些流行的app中,原生的spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框: 初始化状态:...

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

初始化状态:

Android下拉列表选项框及指示箭头动画

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

Android下拉列表选项框及指示箭头动画

选中后:

Android下拉列表选项框及指示箭头动画

注意那个指示箭头,如果把这个控件写的比较精细的话,在下拉-选择-复位过程中箭头是应该有动画旋转效果的。

这种样式的选择框实现方案很多,并且常见、常用,我自己写了一个,我写的这个例子的代码运行结果就是上图所示。

首先是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:

Android下拉列表选项框及指示箭头动画

附:android第三方开源下拉框nicespinner

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。