Color State List Resource

本文介绍了Android中ColorStateList的概念及应用。ColorStateList允许开发者定义一个颜色列表,根据UI组件的不同状态显示不同的颜色。文章详细解释了如何在XML文件中定义状态列表,并展示了具体的示例代码。

Color State List Resource

@(Android)

API Guides

A ColorStateList is an object you can define in XML that you can apply as a color, but will actually change colors, depending on the state of the View object to which it is applied. For example, a Button widget can exist in one of several different states (pressed, focused, or neither) and, using a color state list, you can provide a different color during each state.

You can describe the state list in an XML file. Each color is defined in an <item> element inside a single <selector> element. Each <item> uses various attributes to describe the state in which it should be used.

During each state change, the state list is traversed top to bottom and the first item that matches the current state will be used—the selection is not based on the “best match,” but simply the first item that meets the minimum criteria of the state.

ColorStateList 是在 XML 中顶一顶 color 对象,但它会根据 View 对象的状态改变颜色。比如,Button 可以存在不同的状态(pressed, focused, or neither),使用color state list 就可以让 Button 在不同状态下显示不同的颜色。

在状态变化期间,从上到下遍历 state list ,使用和当前状态匹配的第一个 item ,该选择并非基于“best match”,而仅仅是一个满足该状态的最低标准的第一个 item。


概述

FILE LOCATION:

res/color/filename.xml
The filename will be used as the resource ID.

COMPILED RESOURCE DATATYPE:

Resource pointer to a ColorStateList.

RESOURCE REFERENCE:

In Java: R.color.filename
In XML: @[package:]color/filename

语法

SYNTAX:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

<selector>

Required. This must be the root element. Contains one or more <item>elements.

<item>

Defines a color to use during certain states, as described by its attributes. Must be a child of a <selector> element.

android:color:颜色

Hexadeximal color. Required. The color is specified with an RGB value and optional alpha channel.
The value always begins with a pound (#) character and then followed by the Alpha-Red-Green-Blue information in one of the following formats:#RGB#ARGB#RRGGBB#AARRGGBB

android:state_pressed:是否按下

android:state_focused: 是否获得焦点

android:state_selected: 是否被选中

android:state_checkable: 是否能被勾选

android:state_checked: 是否被勾选

android:state_enabled: 是否可用

android:state_window_focused: 是否在前台


示例

EXAMPLE:
XML file saved at res/color/button_text.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:color="#ffff0000"/> <!-- pressed -->
    <item android:state_focused="true"
          android:color="#ff0000ff"/> <!-- focused -->
    <item android:color="#ff000000"/> <!-- default -->
</selector>

This layout XML will apply the color list to a View:

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:textColor="@color/button_text" />
<template> <div class="resource-list"> <div v-if="resources.length > 0" class="resource-container"> <!-- 网格视图 --> <div v-if="viewMode === 'grid'" class="grid-view"> <div v-for="(resource, index) in resources" :key="index" class="resource-card" > <div class="card-header"> <span class="type-tag">{{ typeText(resource.type) }}</span> <el-tooltip content="添加到收藏夹" placement="top"> <i class="el-icon-star-off favorite-icon" @click="$emit('add-favorite', resource)" ></i> </el-tooltip> </div> <div class="card-content"> <h3>{{ resource.title }}</h3> <p class="description">{{ resource.description }}</p> <div class="info-row"> <span>难度: {{ resource.difficulty || '初级' }}</span> <span>评分: <el-rate v-model="resource.rating" disabled show-score text-color="#ff9900" score-template="{value}" ></el-rate> </span> </div> <div class="tags"> <span v-for="(tag, tagIndex) in resource.tags" :key="tagIndex" >{{ tag }}</span> </div> </div> <div class="card-footer"> <el-button type="primary" @click="$emit('view-details', resource)" plain > 详情 </el-button> <el-button type="success" @click="$emit('start-learning', resource)" > 开始学习 </el-button> </div> </div> </div> <!-- 列表视图 --> <div v-if="viewMode === 'list'" class="list-view"> <table class="resource-table"> <thead> <tr> <th>标题</th> <th>类型</th> <th>学科</th> <th>难度</th> <th>评分</th> <th>进度</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(resource, index) in resources" :key="index"> <td> <div class="title-cell"> <i :class="getResourceIcon(resource.type)"></i> {{ resource.title }} </div> </td> <td>{{ typeText(resource.type) }}</td> <td>{{ subjectText(resource.subject) }}</td> <td>{{ resource.difficulty || '初级' }}</td> <td> <el-rate v-model="resource.rating" disabled text-color="#ff9900" ></el-rate> </td> <td> <el-progress :percentage="resource.progress" :color="getProgressColor(resource.progress)" :show-text="false" ></el-progress> <span class="progress-text">{{ resource.progress }}%</span> </td> <td> <div class="action-buttons"> <el-tooltip content="查看详细信息" placement="top"> <i class="el-icon-document" @click="$emit('view-details', resource)" ></i> </el-tooltip> <el-tooltip content="添加到收藏" placement="top"> <i class="el-icon-star-off" @click="$emit('add-favorite', resource)" ></i> </el-tooltip> <el-tooltip content="开始学习" placement="top"> <i class="el-icon-video-play" @click="$emit('start-learning', resource)" ></i> </el-tooltip> </div> </td> </tr> </tbody> </table> </div> </div> <div v-else class="empty-state"> 没有找到符合条件的学习资源 </div> </div> </template> <script> export default { name: 'ResourceList', props: { resources: { type: Array, required: true, default: () => [] }, viewMode: { type: String, required: false, default: 'grid', // grid | list validator: value => ['grid', 'list'].includes(value) } }, methods: { // 获取资源图标 getResourceIcon(type) { const icons = { course: 'el-icon-s-grid', book: 'el-icon-notebook-1', video: 'el-icon-video-camera-solid', document: 'el-icon-document', project: 'el-icon-briefcase', assessment: 'el-icon-edit' }; return icons[type] || 'el-icon-document'; }, // 获取进度条颜色 getProgressColor(progress) { if (progress >= 80) return '#67C23A'; if (progress >= 50) return '#E6A23C'; return '#409EFF'; }, // 获取资源类型中文名称 typeText(type) { const types = { course: '课程', book: '书籍', video: '视频', document: '文档', project: '项目', assessment: '评估' }; return types[type] || type; }, // 获取学科中文名称 subjectText(subject) { const subjects = { AI: '人工智能', 'data-science': '数据科学', 'computer-science': '计算机科学', 'programming': '编程语言' }; return subjects[subject] || subject; } } }; </script> <style scoped> .resource-list { width: 100%; } .grid-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .list-view { overflow-x: auto; } .resource-container { margin-bottom: 20px; } /* 卡片样式 */ .resource-card { background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.3s ease; height: 100%; display: flex; flex-direction: column; } .resource-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .type-tag { background-color: #ecf5ff; color: #1a73e8; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; } .favorite-icon { font-size: 20px; color: #999; cursor: pointer; transition: color 0.3s ease; } .favorite-icon:hover { color: #e74c3c; } .card-content h3 { margin: 0; color: #333; margin-bottom: 10px; font-size: 16px; } .description { color: #666; font-size: 14px; margin-bottom: 15px; } .info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .info-row span { color: #777; font-size: 13px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tags span { background-color: #f0f2f5; color: #666; padding: 4px 10px; border-radius: 15px; font-size: 12px; white-space: nowrap; } .card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; } .card-footer .el-button { padding: 8px 16px; font-size: 13px; } /* 表格样式 */ .resource-table { width: 100%; border-collapse: collapse; background-color: #fff; border-radius: 8px; overflow: hidden; } .resource-table thead { background-color: #f5f7fa; } .resource-table th, .resource-table td { padding: 15px; border-bottom: 1px solid #eee; vertical-align: middle; } .resource-table th { text-align: left; color: #333; font-weight: bold; } .resource-table tr:hover { background-color: #f9f9f9; } .title-cell { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #333; } .title-cell i { color: #3498db; } .progress-text { display: inline-block; margin-left: 10px; color: #666; font-size: 13px; } .action-buttons { display: flex; gap: 15px; font-size: 18px; color: #999; } .action-buttons i { cursor: pointer; transition: color 0.3s ease; } .action-buttons i:hover { color: #3498db; } .empty-state { text-align: center; color: #999; padding: 50px; background-color: #f8f9fa; border-radius: 8px; } </style>
05-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值