Spinner的使用

1.最简单的Spinner

在布局文件中添加Spinner控件

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

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/languages"
          />
    </LinearLayout>

其中android:entries=”@array/languages”表示Spinner的数据集合是从资源数组languages中获取的,languages数组资源定义在values/arrays.xml中:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="languages">
        <item>c语言</item>
        <item>java </item>
        <item>php</item>
        <item>xml</item>
        <item>html</item>
    </string-array>
</resources>

运行结果:
运行结果:


2.设置Spinner的Adapter

上面使用Spinner数据源于xml数组,其实用的最多的还是通过adapter来跟Spinner绑定数据。

使用ArrayAdapter

// 初始化控件
Spinner spinner = (Spinner) findViewById(R.id.spinner1);
// 建立数据源
String[] mItems = getResources().getStringArray(R.array.languages);
// 建立Adapter并且绑定数据源
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, mItems);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
//绑定 Adapter到控件
spinner .setAdapter(adapter);
spinner.setOnItemSelectedListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> parent, View view, 
            int pos, long id) {

        String[] languages = getResources().getStringArray(R.array.languages);
        Toast.makeText(MainActivity.this, "你点击的是:"+languages[pos], 2000).show();
    }
    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback
    }
});
  • 这是Spinner的标准使用方法,其中,有两行代码可以决定Spinner的外观:
    ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, mItems);
    • 1 第二个参数是Spinner未展开菜单时Spinner的默认样式,android.R.layout.simple_spinner_item是系统自带的内置布局。
    • 2 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
      设置的是展开的时候下拉菜单的样式(注意和上面区别),同理android.R.layout.simple_spinner_dropdown_item也是内置布局。如果不设置
      adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)会怎样呢?会造成未展开的sipnner和展开的菜单都是一种布局样式。

3.使用自定义的BaseAdapter
这种情况适用于spinner比较复杂的情况,比如带有图标。
和listView里使用方式一致。


下面介绍Spinner的菜单显示方式
它有两种显示形式,一种是下拉菜单,一种是弹出框,菜单显示形式是spinnerMode属性决定的:

android:spinnerMode="dropdown"
android:spinnerMode="dialog"

Spinner的xml属性
1 entries: 直接在xml布局文件中绑定数据源(可以不设置,即可以在Activity中动态绑定)

2 spinnerMode: Spinner的显示形式

除此之外还有如下属性:

prompt:在Spinner弹出选择对话框的时候对话框的标题:
这里写图片描述
属性名称
3 android:dropDownHorizontalOffset
对应方法:

setDropDownHorizontalOffset(int)

spinnerMode=”dropdown”时,下拉的项目选择窗口在水平方向相对于Spinner窗口的偏移量。
它必须是一个带有单位的浮点型尺寸值,如:”14.5sp”。有效的单位包括:px(像素)、dp(密度无关的像素)、sp(基于引用字体的尺寸来缩放的像素)、in(英寸)、mm(毫米)。
属性名称
4 android:dropDownSelector
用于设定spinnerMode=”dropdown”时列表选择器的显示效果。
5.android:dropDownVerticalOffset
对应方法:

setDropDownVerticalOffset(int)

spinnerMode=”dropdown”时,下拉的项目选择窗口在垂直方向相对于Spinner窗口的偏移量。
6.android:dropDownWidth
对应方法:

setDropDownWidth(int)

在spinnerMode=”dropdown”时,设定下拉框的宽度。
7.android:gravity
对应方法:

setGravity(int)

这个属性用于设置当前选择的项目的对齐方式。
8.android:popupBackground
对应方法:

setPopupBackgroundResource(int)

在spinner=”dropdown”时,使用这个属性来设置下拉列表的背景。

<think>好的,用户现在问的是关于ElementUI的ElLoading组件中spinner使用。首先,我需要回顾之前用户的问题和我的回答。之前用户问的是如何在Vue2中全局挂载Loading服务,我给出了一个示例代码,其中用到了spinner配置项,比如'el-icon-loading'。现在用户具体针对spinner使用提问,可能需要更详细的解释和示例。 首先,我需要确认ElLoading的spinner属性支持哪些类型。根据ElementUI文档,spinner可以是字符串或者VNode。字符串的话,通常是类名,比如el-icon-loading,这时候会生成对应的图标。如果是VNode,用户可以自定义更复杂的图标,比如使用其他图标库或者SVG。 接下来,用户可能想知道如何自定义spinner,比如替换为自己的图标或者动画。这时候需要给出具体的代码示例,包括如何引入自定义图标,或者使用SVG作为spinner。同时,可能还要考虑不同情况下的使用方式,比如静态类名和动态生成的VNode的区别。 另外,用户可能在实际使用中遇到问题,比如自定义spinner的位置不对,或者样式问题。这时候需要提醒注意事项,比如样式引入、父容器的position属性,以及层级问题。可能还需要提到如何调整spinner的大小和颜色,通过CSS来实现。 然后,我需要组织回答的结构。首先说明spinner的两种类型,然后分别给出示例,包括使用ElementUI内置图标、自定义图标和SVG。然后是配置方式,比如全局和局部配置,以及注意事项。最后,根据用户之前的上下文,可能需要关联之前的全局Loading服务配置,说明如何在全局服务中使用自定义的spinner。 还要考虑用户可能的疑问点,比如如何确保自定义图标正确显示,是否需要额外安装图标库,或者如何在不同组件中复用自定义的spinner。此外,用户可能想知道spinner的动画效果如何控制,是否可以通过CSS调整动画速度或样式。 最后,生成相关问题时,要结合当前问题,提出进一步的扩展问题,比如动态切换spinner、结合动画库、全局配置默认图标、SVG的响应式处理以及性能优化等。这些相关问题能帮助用户更深入地理解和应用spinner的自定义功能。</think>在 ElementUI 的 `ElLoading` 中,`spinner` 属性用于自定义加载动画的图标或组件。以下是详细用法和示例: --- ### 1. **基础用法** ElementUI 默认提供内置图标 `el-icon-loading`,可直接通过字符串配置: ```javascript this.$loading({ spinner: 'el-icon-loading', // 默认值 text: '加载中...' }) ``` --- ### 2. **自定义图标** #### 方式一:使用其他 ElementUI 图标 ```javascript this.$loading({ spinner: 'el-icon-document' // 使用文档图标替代默认加载图标 }) ``` #### 方式二:使用自定义 SVG 或组件 通过传入 `VNode` 实现完全自定义: ```javascript import MyCustomSpinner from './MyCustomSpinner.vue' this.$loading({ spinner: this.$createElement(MyCustomSpinner) // 传入自定义组件 }) ``` #### 方式三:直接使用 SVG 字符串 ```javascript this.$loading({ spinner: ` <svg width="24" height="24" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" stroke="#409EFF" stroke-width="2" fill="none" /> </svg> ` }) ``` --- ### 3. **动态切换 Spinner** 可通过动态绑定 `spinner` 实现按需切换: ```vue <template> <el-button @click="showLoading">显示加载</el-button> </template> <script> export default { data() { return { spinnerType: 'default' } }, methods: { showLoading() { this.spinnerType = Math.random() > 0.5 ? 'custom' : 'default' this.$loading({ spinner: this.spinnerType === 'default' ? 'el-icon-loading' : this.$createElement('div', { style: { width: '24px', height: '24px', background: 'red' } }) }) } } } </script> ``` --- ### 4. **全局配置 Spinner** 在全局挂载的 Loading 服务中集成自定义 spinner: ```javascript // main.js Vue.prototype.$loadingService = { defaultOptions: { spinner: 'el-icon-refresh', // 全局默认使用刷新图标 background: 'rgba(255,255,255,0.9)' }, // ...其他配置 } ``` --- ### 5. **注意事项** - **样式隔离**:若使用自定义组件,需确保组件样式全局可用或通过 `scoped` 样式穿透。 - **父容器定位**:`ElLoading` 依赖父容器 `position: relative`,否则 `spinner` 位置可能异常。 - **层级问题**:通过 `zIndex` 调整加载层层级,避免被遮挡。 - **动画控制**:可通过 CSS 动画控制 spinner 的动态效果: ```css .my-spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值