Android spinner使用、带图片下拉框、自定义下拉框

移动开发 2023-04-10 05:31:45 阅读次数: 0

    项目中有时会用到下拉框，今天就给大家整理一下 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="http://schemas.android.com/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="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="210dp"
    android:layout_height="wrap_content"
    android:background="@color/white"
    app:cardElevation="1dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/topSpinner"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:orientation="horizontal">

            <ImageView
                android: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>

            <TextView
                android: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>

            <ImageView
                android: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>

        <LinearLayout
            android:id="@+id/show"
            android:layout_width="210dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="gone">

            <View
                android:layout_width="180dp"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="@color/gray"></View>

            <LinearLayout
                android:id="@+id/kms_fdj"
                android:layout_width="match_parent"
                android:layout_height="54dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="60dp"
                    android:layout_height="38dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:background="@mipmap/logo_kms"></ImageView>

                <TextView
                    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>

            </LinearLayout>

            <View
                android:layout_width="180dp"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="@color/gray"></View>

            <LinearLayout
                android:id="@+id/wsl_fdj"
                android:layout_width="match_parent"
                android:layout_height="54dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="60dp"
                    android:layout_height="38dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:background="@mipmap/logo_wsl"></ImageView>

                <TextView
                    android: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;
    }

    @Override
    public 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.SpinnerView
    android: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();

上面就是给大家介绍的三种下拉框实现方式，欢迎大家借鉴补充指正。

猜你喜欢

转载自blog.csdn.net/weixin_54723630/article/details/126906064
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022