图片资源---level-list的使用

有时候,会有使用一个ImageView控件显示不同的图片的情况。

if (条件1)
{
image.setBackground(R.id.xxx1);
}
else if (条件2)
{
image.setBackground(R.id.xxx2);
}
else if …
其实我们可以使用另一个简便的方法实现相同的功能

首先,在res/drawable下建立一个xml文件,内容如下

?
1
2
3
4
5
6
7
< level-list xmlns:android = "http://schemas.android.com/apk/res/android" >
     < item android:maxLevel = "0" android:drawable = "@drawable/battery_0" />
     < item android:maxLevel = "1" android:drawable = "@drawable/battery_1" />
     < item android:maxLevel = "2" android:drawable = "@drawable/battery_2" />
     < item android:maxLevel = "3" android:drawable = "@drawable/battery_3" />
     < item android:maxLevel = "4" android:drawable = "@drawable/battery_4" />
</ level-list >

然后在layout中把image view的src设置成已创建好的xml文件
程序中变换图片时,只需要使用
imageview.getDrawable().setLevel(1);
或者imageview.setImageLevel(1);

Android会根据level的值自动选择对应的图片。手机显示剩余电量就是用这个方法来显示不同图片的

使用LevelDrawable注意几点:

1、默认的level为0,如果没有和0匹配的level,那么就不显示。

2、level匹配以maxLevel优先。即如果有个item,min:1,max:2。   另一份item,min:2,max:3。

如果此时设置level=2,那么会匹配第一个item。


### 使用 Uni-app 编写前端简历项目的实践经验 Uni-app 是一种跨平台开发框架,能够帮助开发者高效构建多端应用(如小程序、H5 和 App)。对于前端工程师来说,在简历中展示基于 Uni-app 构建的小型项目是一个很好的方式,既能体现技术能力,又能突出实际动手经验。 #### 1. **项目概述** 为了更好地展示自己的技能,可以选择创建一个简单而实用的项目——例如“个人作品集”或“在线简历”。这类项目通常包括以下几个部分: - 用户基本信息(姓名、联系方式等) - 技能清单 - 工作经历/教育背景 - 完成过的项目案例链接[^1] 这些功能可以通过 Vue.js 的组件化结构轻松实现,并利用 Uni-app 提供的强大工具链完成适配不同终端的任务。 #### 2. **目录结构设计** 合理的文件夹布局有助于维护代码清晰度并提高可读性。下面给出了一种推荐的目录树: ```plaintext project-name/ ├── components/ # 自定义公共组件存放位置 │ └── SkillItem.vue # 单项技能显示模板 ├── pages/ # 页面级视图所在路径 │ ├── index/ # 首页逻辑及其关联资源 │ │ ├── main.js # 主入口脚本 │ │ └── index.vue # HTML 结构与样式声明 │ └── projects/ # 展示过往工作的子页面 │ └── projectList.vue └── static/ # 存放静态素材比如图片或者字体库 ``` #### 3. **核心代码片段** 以下是几个关键模块的具体实现方法: ##### (1) 基础信息渲染 在 `index.vue` 中设置个人信息卡片区域。 ```vue <template> <view class="profile-card"> <image src="/static/avatar.jpg"></image> <!-- 头像 --> <h2>{{ name }}</h2> <p>Email: {{ email }}</p> <button @click="downloadCV">下载简历</button> </view> </template> <script> export default { data() { return { name: '张三', email: 'zhangsan@example.com' }; }, methods:{ downloadCV(){ console.log('触发下载行为'); } } } </script> ``` ##### (2) 动态加载技能标签 通过循环数组生成多个技能条目。 ```vue <template> <block v-for="(item, index) in skills" :key="index"> <SkillItem :title="item.title" :level="item.level"/> </block> </template> <script> import SkillItem from '@/components/SkillItem.vue'; export default { components:{SkillItem}, data(){ return{ skills:[ { title:'HTML', level:'高级' }, { title:'CSS', level:'中级' }, ... ] } } }; </script> ``` ##### (3) 跨设备兼容处理 考虑到目标受众可能来自各种客户端环境,因此需要特别注意 UI 设计上的响应式调整策略。可以借助 CSS Flexbox 或 Grid Layout 来简化复杂布局操作;同时也要记得测试真机效果以验证最终呈现质量[^2]。 --- #### § 1. 如何优化 Uni-app 应用性能? 2. 在 Uni-app 中如何管理状态?有哪些常用的状态管理模式? 3. 怎样调试 Uni-app 小程序遇到的问题? 4. 是否存在更高效的插件用于加速 Uni-app 开发流程? 5. 对于初学者而言,除了官方文档外还有哪些优质的学习资料值得参考?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值