Android ExpandableListView使用小结(二)
2017-06-30 15:27
429 查看
http://www.jianshu.com/p/4c7be6fdb12b
在上一篇Android ExpandableListView使用小结(一)的介绍中,我们了解了ExpandableListView的使用方法,学习了自定义适配器,为列表选项设置监听事件。想必大家都能熟练使用了,今天我要分享的是ExpandableListView的Indicator(指示器)的使用。
在我们看来,Indicator就是分组项前面的小箭头,回顾一下我们之前做的Demo,并没有显式指定Indicator啊,怎么还会出现呢?原来系统自动为分组的左边加上了Indicator,不用我们做任何操作。
系统默认的Indicator
有人可能觉得系统提供的Indicator难看,想换成自己喜欢的,这可怎么办?当然有办法啦,开源代码总是具有良好的扩展性。这里给出几种办法:
在Drawable中利用XML定义Indicator的状态选择器,然后设置ExpandableListView的groupIndicator属性,引用我们自定义的Drawable。先看看我们的状态选择器部分,根据不同的状态分别定义分组展开和闭合的图标就OK了。
为ExpandableListView设置Indicator,indicatorLeft和indicatorRight是分别用来指定Indicator的左右边界的,这里我们把它放在分组项的左边。
看一下运行效果,除了丑陋没有其他可说的T_T...
通过XML配置Indicator
通过Java代码获取自定义的Drawable对象,设置ExpandableListView的In
4000
dicator,以及显示的位置,来看一下关键代码。
运行一下是这个样子的,它竟然跑到右边去了~~
通过Java代码设置Indicator
有人说了你这Indicator的图标长宽比例怎么这么丑呢?哎!谁让咱不是美工呢?美工的妹子在哪里? I need U~~咳咳...言归正传(假装严肃脸)。看过源码才知道,官方是用状态数组记录了Group的状态,包括是否展开状态、是否为空以及两者的组合,每次绘制子布局的时候改变状态值。当然还有其他办法,我是这样做的:不管你怎么实现,我就要自己定义Indicator,自己控制状态的转换。来,抄家伙!
首先,在分组项的Item布局里面加入Indicator的图标,就用一个简单的ImageView展示吧。
然后呢,就是在我们自定义的Adapter里面操控了。定义一个Map集合存放Indicator的位置和图标,根据Group的状态动态改变Indicator。
最后,为 ExpandableListView添加Group点击事件,当点击分组项的时候,改变Indicator的状态,就能实现我们想要的功能了。
我们看看效果怎么样,不用美工我也能做得好看一点了,聊表安慰( ̄ ̄)"
我的Indicator我做主
在上一篇Android ExpandableListView使用小结(一)的介绍中,我们了解了ExpandableListView的使用方法,学习了自定义适配器,为列表选项设置监听事件。想必大家都能熟练使用了,今天我要分享的是ExpandableListView的Indicator(指示器)的使用。
在我们看来,Indicator就是分组项前面的小箭头,回顾一下我们之前做的Demo,并没有显式指定Indicator啊,怎么还会出现呢?原来系统自动为分组的左边加上了Indicator,不用我们做任何操作。
系统默认的Indicator
有人可能觉得系统提供的Indicator难看,想换成自己喜欢的,这可怎么办?当然有办法啦,开源代码总是具有良好的扩展性。这里给出几种办法:
在Drawable中利用XML定义Indicator的状态选择器,然后设置ExpandableListView的groupIndicator属性,引用我们自定义的Drawable。先看看我们的状态选择器部分,根据不同的状态分别定义分组展开和闭合的图标就OK了。
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/ic_expand" android:state_expanded="true"/> <item android:drawable="@mipmap/ic_collapse"/> </selector>
为ExpandableListView设置Indicator,indicatorLeft和indicatorRight是分别用来指定Indicator的左右边界的,这里我们把它放在分组项的左边。
<ExpandableListView android:id="@+id/expand_list" android:layout_width="match_parent" android:layout_height="match_parent" android:groupIndicator="@drawable/group_indicator" android:indicatorLeft="0dp" android:indicatorRight="40dp" />
看一下运行效果,除了丑陋没有其他可说的T_T...
通过XML配置Indicator
通过Java代码获取自定义的Drawable对象,设置ExpandableListView的In
4000
dicator,以及显示的位置,来看一下关键代码。
Display display = getWindowManager().getDefaultDisplay(); DisplayMetrics displayMetrics = new DisplayMetrics(); display.getMetrics(displayMetrics); int widthPixels = displayMetrics.widthPixels; Drawable drawable = getResources().getDrawable(R.drawable.group_indicator); expandableListView.setGroupIndicator(drawable); expandableListView.setIndicatorBounds(widthPixelsdrawable.getMinimumWidth() - 40, widthPixels - 40);
运行一下是这个样子的,它竟然跑到右边去了~~
通过Java代码设置Indicator
有人说了你这Indicator的图标长宽比例怎么这么丑呢?哎!谁让咱不是美工呢?美工的妹子在哪里? I need U~~咳咳...言归正传(假装严肃脸)。看过源码才知道,官方是用状态数组记录了Group的状态,包括是否展开状态、是否为空以及两者的组合,每次绘制子布局的时候改变状态值。当然还有其他办法,我是这样做的:不管你怎么实现,我就要自己定义Indicator,自己控制状态的转换。来,抄家伙!
首先,在分组项的Item布局里面加入Indicator的图标,就用一个简单的ImageView展示吧。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/holo_blue_light" android:orientation="horizontal" android:padding="8dp"> <TextView android:id="@+id/label_expand_group" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:paddingLeft="20dp" android:textColor="@android:color/white" android:textSize="20sp"/> <ImageView android:id="@+id/iv_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@mipmap/ic_collapse"/> </LinearLayout>
然后呢,就是在我们自定义的Adapter里面操控了。定义一个Map集合存放Indicator的位置和图标,根据Group的状态动态改变Indicator。
// 用于存放Indicator的集合 private SparseArray<ImageView> mIndicators; // 根据分组的展开闭合状态设置指示器 public void setIndicatorState(int groupPosition, boolean isExpanded) { if (isExpanded) { mIndicators.get(groupPosition).setImageReource(R.mipmap.ic_expand); } else { mIndicators.get(groupPosition).setImageReource(R.mipmap.ic_collapse); }
// 获取显示指定分组的视图 @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { GroupViewHolder groupViewHolder; if (convertView == null) { convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_expand_group, false); groupViewHolder = new GroupViewHolder(); groupViewHolder.ivIndicator = (ImagView)convertView.findViewById(R.id.iv_indicator); groupViewHolder.tvTitle = (TextView)convertView.findViewByIdR.id.label_expand_group); convertView.setTag(groupViewHolder); } else { groupViewHolder = (GroupViewHolder) convertView.getTag(); } groupViewHolder.tvTitle.setText(groupStrings[groupPosition]); // 把位置和图标添加到Map mIndicators.put(groupPosition, groupViewHolder.ivIndicator); // 根据分组状态设置Indicator setIndicatorState(groupPosition, isExpanded); return convertView; }
最后,为 ExpandableListView添加Group点击事件,当点击分组项的时候,改变Indicator的状态,就能实现我们想要的功能了。
// 设置分组单击监听事件 expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() { @Override public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) { boolean groupExpanded = parent.isGroupExpanded(groupPosition); if (groupExpanded) { parent.collapseGroup(groupPosition); } else { parent.expandGroup(groupPosition, true); } adapter.setIndicatorState(groupPosition, groupExpanded); return true; } });
我们看看效果怎么样,不用美工我也能做得好看一点了,聊表安慰( ̄ ̄)"
我的Indicator我做主
相关文章推荐
- Android ExpandableListView使用小结
- android expandablelistview使用小结
- Android ExpandableListView使用小结(一)
- Android中级联列表ExpandableListView使用
- Android ExpandableListView使用
- Android ExpandableListView 使用要点笔记
- Android开发---Listview使用技巧小结
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
- android中ExpandableListView的使用
- android 扩展列表ExpandableListView的详解和使用
- Android ExpandableListView的使用
- Android ExpandableListView的使用
- Android中ExpandableListView的使用
- android开发之ExpandableListView的使用,实现类似QQ好友列表
- Android:ExpandableListView使用
- Android ExpandableListView 使用实例
- Android中ExpandableListView的使用
- Android中ExpandableListView的使用
- android 高级之旅 (六)ExpandableListView 使用详解
- android之ExpandableListView的使用