项目中有时会用到下拉框，今天就给大家整理一下 spinner基本使用，带图片下拉框实现方式 及自定义的下拉框实现方式
一、spinner基本使用
layout中的.xml文件
<Spinner android:id="@+id/spinner"
android:layout_marginTop="50dp"
android:layout_marginRight="80dp"
android:layout_gravity="top|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@arrays/ctype"> </Spinner>
value中定义arrays.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="ctype">
<item>康明斯发动机</item>
<item>五十铃发动机</item>
</string-array>
</resources>
也可以在Java文件中定义选择类型数组如String[] ctype = new String[]{"康明斯发动机","五十铃发动机"};
Java代码
spinner=(Spinner)findViewById(R.id.spinner);
ArrayAdapter<String> adpter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,ctype);
spinner.setOnItemSelectedListener(new Spinner.OnItemSelectedListener(){
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
String string = adpter.getItem(i).toString();
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
上面就是有文字列表下拉框实现方式，但是有时候我们需要插入图片 下面给大家介绍带图片实现方式
二 、带图片下拉框
先上效果：
折叠
展开
实现方式：
还是先在布局文件中引入控件
<Spinner android:id="@+id/spinner" android:layout_marginTop="50dp" android:layout_marginRight="80dp" android:layout_gravity="top|right" android:layout_width="wrap_content" android:layout_height="wrap_content"> </Spinner>
初始化控件
private Spinner spinner;
spinner = (Spinner) view.findViewById(R.id.spinner);
带图片和文本item
<LinearLayout
xmlns:android="/apk/res/android" android:layout_width="wrap_content"
android:layout_height="40dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="@+id/tx"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Java代码
SimpleAdapter simpleAdapter = new SimpleAdapter(getContext(), getDat(), R.layout.spinner_item, new String[]{"image", "text"}, new int[]{R.id.img, R.id.tx});
//控件与适配器绑定
spinner.setAdapter(simpleAdapter);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
//为TextView控件赋值！在适配器中获取一个值赋给tv
String string = simpleAdapter.getItem(i).toString();
Log.i("",string);
}
@Override
public void onNothingSelected(AdapterView<?> adapterView) {
}
});
//数据源
private List<Map<String, Object>> getDat() {
Map<String, Object> map1 = new HashMap<>();
map1.put("image", R.drawable.logo_cummins);
map1.put("text", "康明斯发动机");
data.add(map1);
Map<String, Object> map2 = new HashMap<>();
map2.put("image", R.drawable.logo_isuzu);
map2.put("text", "五十铃发动机");
data.add(map2); return data; }
上面就是带图片下拉框实现方式，但我们设计师总是有着更高要求，于是我便自定义了下拉框。
三、自定义下拉框
上效果图
主要思路就是默认展示带图片文本箭头的linearlayout，点击时候下面两个条目展示出来再点击隐藏。点击下面任意条目时候先把下面两条目隐藏再显示对应图片文本箭头发现。
这是我自定义封装控件
spinner_view.xml
<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:layout_width="210dp"android:layout_height="wrap_content"android:background="@color/white"app:cardElevation="1dp"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:id="@+id/topSpinner"android:layout_width="match_parent"android:layout_height="54dp"android:orientation="horizontal"><ImageViewandroid:id="@+id/fdjImage"android:layout_width="60dp"android:layout_height="38dp"android:layout_gravity="center_vertical"android:layout_marginLeft="8dp"android:background="@mipmap/logo_kms"></ImageView><TextViewandroid:id="@+id/fdjText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="20dp"android:text="@string/kmsfdj"android:textColor="@color/black"android:textSize="14sp"></TextView><ImageViewandroid:id="@+id/arrows"android:layout_width="12dp"android:layout_height="12dp"android:layout_marginLeft="14dp"android:layout_marginTop="23dp"android:background="@mipmap/rectangle_down"></ImageView></LinearLayout><LinearLayoutandroid:id="@+id/show"android:layout_width="210dp"android:layout_height="wrap_content"android:orientation="vertical"android:visibility="gone"><Viewandroid:layout_width="180dp"android:layout_height="1dp"android:layout_gravity="center"android:background="@color/gray"></View><LinearLayoutandroid:id="@+id/kms_fdj"android:layout_width="match_parent"android:layout_height="54dp"android:orientation="horizontal"><ImageViewandroid:layout_width="60dp"android:layout_height="38dp"android:layout_gravity="center_vertical"android:layout_marginLeft="8dp"android:background="@mipmap/logo_kms"></ImageView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="20dp"android:text="@string/kmsfdj"android:textColor="@color/black"android:textSize="14sp"></TextView></LinearLayout><Viewandroid:layout_width="180dp"android:layout_height="1dp"android:layout_gravity="center"android:background="@color/gray"></View><LinearLayoutandroid:id="@+id/wsl_fdj"android:layout_width="match_parent"android:layout_height="54dp"android:orientation="horizontal"><ImageViewandroid:layout_width="60dp"android:layout_height="38dp"android:layout_gravity="center_vertical"android:layout_marginLeft="8dp"android:background="@mipmap/logo_wsl"></ImageView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="20dp"android:text="@string/wslfdj"android:textColor="@color/black"android:textSize="14sp"></TextView></LinearLayout></LinearLayout></LinearLayout></androidx.cardview.widget.CardView>SpinnerView.java
package com.example.app;import android.app.Activity;import android.content.Context;import android.content.Intent;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import androidx.cardview.widget.CardView;public class SpinnerView extends CardView implements View.OnClickListener{private LinearLayout topSpinner;private ImageView fdjImage;private TextView fdjText;private ImageView arrows;private LinearLayout show;private LinearLayout kms_fdj;private LinearLayout wsl_fdj;private int topSpinnerOnclickTag = 0;private int fdjType = 1;public SpinnerView(Context context, AttributeSet attrs) {super(context, attrs);LayoutInflater.from(context).inflate(R.layout.spinner_view, this);init();}private void init() {topSpinner = findViewById(R.id.topSpinner);topSpinner.setOnClickListener(this);fdjImage = findViewById(R.id.fdjImage);fdjText = findViewById(R.id.fdjText);arrows = findViewById(R.id.arrows);show = findViewById(R.id.show);show.setOnClickListener(this);kms_fdj = findViewById(R.id.kms_fdj);kms_fdj.setOnClickListener(this);wsl_fdj = findViewById(R.id.wsl_fdj);wsl_fdj.setOnClickListener(this);}public int getFdjType() {return fdjType;}@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.topSpinner:if (topSpinnerOnclickTag == 0) {show.setVisibility(View.GONE);arrows.setBackgroundResource(R.mipmap.rectangle_down);topSpinnerOnclickTag = 1;} else {show.setVisibility(View.VISIBLE);arrows.setBackgroundResource(R.mipmap.rectangle_up);topSpinnerOnclickTag = 0;}break;case R.id.kms_fdj:arrows.setBackgroundResource(R.mipmap.rectangle_down);show.setVisibility(View.GONE);fdjImage.setBackgroundResource(R.mipmap.logo_kms);fdjText.setText(R.string.kmsfdj);fdjType = 1;break;case R.id.wsl_fdj:arrows.setBackgroundResource(R.mipmap.rectangle_down);show.setVisibility(View.GONE);fdjImage.setBackgroundResource(R.mipmap.logo_wsl);fdjText.setText(R.string.wslfdj);fdjType = 2;break;default:break;}}}
使用示例
在xml中引入
<com.example.recanapp.SpinnerViewandroid:id="@+id/spinner_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|right"android:layout_marginTop="16dp"android:layout_marginRight="30dp" />
在Java文件中初始化
private SpinnerView spinnerView;spinnerView = findViewById(R.id.spinner_view);spinnerView.getFdjType();
上面就是给大家介绍的三种下拉框实现方式，欢迎大家借鉴补充指正。
