ExpandableListView 箭头样式

ExpandableListVivew是ListView的子类,它在普通ListView的基础上进行了扩展,它把应用中的列表项分为几组,每组里 又可包含多个列表项。ExpandableListVivew的用法与普通ListView的用法非常相似,只是ExpandableListVivew 显示的列表项应该由ExpandableAdapter提供。

下图为ExpandableListVivew支持的xml属性


XML Attributes


属性名


Related Method


描述

                 

android:childDivider


指定各组内子类表项之间的分隔条 ①

                 

android:childIndicator


显示在子列表旁边的Drawable对象②

                 

android:childIndicatorLeft


子列表项指示符的左边约束位置③

                 

android:childIndicatorRight


子列表项指示符的右边约束位置④

                 

android:groupIndicator


显示在组列表旁边的Drawable对象⑤

                 

android:indicatorLeft


组列表项指示器的左边约束位置⑥

                 

android:indicatorRight


组列表项指示器的右边约束位置 ⑦

                 

备注:

①   注:图片不会完全显示,分离子列表项的是一条直线

②   注:可以是一个图片

③ 注:即从左端0位置开始计数,比如,假设指示符是一个图标,给定这个属性值为

3dip,则表示从左端起3dip开始显示此图标。

④   注:表示右端到什么位置结束

⑤   注:可以是一个图片。

⑥   注:表示左端从什么位置开始。

⑦ 注:表示右端到什么位置结束。

1)定义xml文件先,命名为expand_list_indicator.xml

1

2

3

4

5

6

7

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/bd_wallet_arrow_down" android:state_expanded="true"/>

<item android:drawable="@drawable/bd_wallet_arrow_right" android:state_expanded="false"/>

</selector>

注意事项:因为indicator背景图片会自动拉伸,如果不想图片被拉伸的话,那么就对indicator_open ,indicator_close图片做特殊处理,做成.9.png格式就可以了。或者使用另外一个方法
android:groupIndicator=”@null”这里非常重要,禁用系统自带的图标
再在group的xml中设置ImageView,这个简单,然后在适配器的getGroupView中加入图片变换的效果:

1

2

3

4

5

6

if (isExpanded)

holder.getImageView(R.id.group_ico).setImageResource(

R.drawable.bd_wallet_arrow_down);

else

holder.getImageView(R.id.group_ico).setImageResource(

R.drawable.bd_wallet_arrow_right);

时间: 2024-10-16 21:46:32

ExpandableListView 箭头样式的相关文章

Android中的ExpandableListView自定义显示的小箭头样式

ExpandableListView自带的小箭头样式不太好看,其实我们可以自己更换的.步骤如下: 1.隐藏ExpandableListView自带的图标. exListView = (ExpandableListView) findViewById(R.id.ex_KnowledgeList); exListView.setGroupIndicator(null); // 隐藏ExpandableListView自带的图标 2.设置视图展开和折叠装态的图片. // 判断组视图是否展开 if (i

Js + Bootstrap Table + adminlte - 自定义formatter,在表格内添加箭头样式,调整列宽

var drawDataTable=function(chartId){ var dataList = [ { "criteria": "q>100", "count": "400 up", "cRatio": "10% up", "pRatio": "60% up" }, { "criteria": "50&l

清除Css中select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

Extjs中panel的 collapseMode 属性的应用,修改折叠箭头样式

panel中属性collapseMode可以实现面板的折叠,不过属性自带的折叠箭头不太容易辨识,通过修改实现如下展现样式 具体代码实心如下: Ext.onReady(function(){ var mainPanel=Ext.create('Ext.panel.Panel',{ title:'主信息', //  collapsible:false, //  layout:'border', height:300, region:'center' }); var linePanel=Ext.cre

css清除select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

箭头样式形成,斜切角的思路

直角箭头: .ra .ra:after{ content:" "; display:inline-block; width:0.6rem; height:0.6rem; border-width:0.2rem 0.2rem 0 0; boeder-color:#cccccc; transform:rotate(45deg); position:absolute; top:50%; right:0; margin-top:-4px; } 圆角箭头: .ra{ width:1.3rem;

使用 CSS 的 :before 和 :after 选择器做一个箭头样式

对于 :before 和 :after 选择器,大家并不陌生,但是很少有人会主动去用它们.先解释下它们的定义和用法: :before 选择器在被选元素的内容前面插入内容,:after 选择器在被选元素的内容后面插入内容,都会使用 content 属性来指定要插入的内容. 有时候,项目中或多或少需要一些箭头,如果用图片来做,感觉就有点 low 了,而上面这两个选择器是最好的选择.效果如下: html 代码如下: <div class="test"></div> c

css实现小箭头样式

<div class="arrow"></div> .arrow{ position: absolute; display: block; left: -13px; top: 12px; margin-right: 3px; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 12px; border-left-width: 0; border-ri

纯CSS箭头

本文转载自:http://www.jb51.net/css/97112.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS 箭头Demo</title> <style type="text/css"> /* 向上的箭头,类似于A,只