自定义ExpandableListView,实现APP帮助界面

最近公司新做的一个项目,里边带有帮助界面,即点击一条问题后,自动在下面展开答案,很多人第一想法就是在下面写个TextView且设置android:visibility="gone",当点击时就在代码中将其设为可见...但是,这样耗得时间,足以做很多事了,为何不找下更好的解决方法呢..以下代码参考:http://blog.csdn.net/zoeice/article/details/7729982

项目要实现的界面如下:

而我们自定义的ExpandableListView代码为:

public class HelpCenterView extends ExpandableListView{

	private Context mContext;
	private List<String> mGroups;
	private List<String> mChilds;

	private HelpCenterAdapter mAdapter;

	public HelpCenterView(Context context) {
		super(context);

		mContext = context;
		mGroups = getGroupData();
		mChilds = getChildData();

		// 隐藏滚动条
		this.setVerticalScrollBarEnabled(false);
		// 隐藏左边默认箭头
		this.setGroupIndicator(null);

		setCacheColorHint(Color.TRANSPARENT);
		setDividerHeight(0);
		setChildrenDrawnWithCacheEnabled(false);
		setGroupIndicator(null);

		// 隐藏选择的黄色高亮
		ColorDrawable drawable_tranparent_ = new ColorDrawable(Color.TRANSPARENT);
		setSelector(drawable_tranparent_);

		mAdapter = new HelpCenterAdapter();
		setAdapter(mAdapter);
	}

	public HelpCenterView(Context context, AttributeSet attrs) {
		this(context);
	}

	/**
	 * 获得Group数据
	 * @return
	 */
	private List<String> getGroupData() {
		String[] groups = mContext.getResources().getStringArray(R.array.help_center_group);
		List<String> list = new ArrayList<String>();
		for(int i=0; i<groups.length; i++) {
			list.add(groups[i]);
		}
		return list;
	}

	/**
	 * 获得Child数据
	 * @return
	 */
	private List<String> getChildData() {
		String[] childs = mContext.getResources().getStringArray(R.array.help_center_child);
		List<String> list = new ArrayList<String>();
		for(int i=0; i<childs.length; i++) {
			list.add(childs[i]);
		}
		return list;
	}

	public class HelpCenterAdapter extends BaseExpandableListAdapter {

		@Override
		public int getGroupCount() {
			return mGroups.size();
		}

		@Override
		public int getChildrenCount(int groupPosition) {
			//Child下只显示一条
			return 1;
		}

		@Override
		public Object getGroup(int groupPosition) {
			return mGroups.get(groupPosition);
		}

		@Override
		public Object getChild(int groupPosition, int childPosition) {
			return mChilds.get(groupPosition);
		}

		@Override
		public long getGroupId(int groupPosition) {
			return groupPosition;
		}

		@Override
		public long getChildId(int groupPosition, int childPosition) {
			return childPosition;
		}

		@Override
		public boolean hasStableIds() {
			return false;
		}

		@Override
		public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
			if(convertView == null) {
				convertView = LayoutInflater.from(mContext).inflate(R.layout.item_help_center_group, null);
			}

			TextView groupText = (TextView)convertView.findViewById(R.id.id_tv_item_help_center_group);
			ImageView groupImg = (ImageView)convertView.findViewById(R.id.id_iv_item_help_center_group);

			//Group展开时
			if(isExpanded) {
				groupText.setTextColor(ColorStateList.valueOf(Color.parseColor("#ff5e4c")));
				groupImg.setImageResource(R.drawable.icon_more_down);
			//Group未展开时
			} else {
				groupText.setTextColor(ColorStateList.valueOf(Color.parseColor("#555555")));
				groupImg.setImageResource(R.drawable.icon_main_more);
			}
			//设置Group内容
			groupText.setText(mGroups.get(groupPosition));
			return convertView;
		}

		@Override
		public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
			if(convertView == null) {
				convertView = LayoutInflater.from(mContext).inflate(R.layout.item_help_center_child, null);
			}
			TextView childText = (TextView)convertView.findViewById(R.id.id_tv_item_help_center_child);
			childText.setText(mChilds.get(groupPosition));
			return convertView;
		}

		@Override
		public boolean isChildSelectable(int groupPosition, int childPosition) {
			return true;
		}
	}
}

在布局文件中只需要:

<com.example.test.HelpCenterView
    android:id="@+id/id_elv_help_center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:dividerHeight="0.5dp"
    android:listSelector="#00000000"
    android:divider="@color/line" />

很简单..自定义的ExpandableListView只是把适配器集成在里边而已

时间: 2024-10-07 00:16:55

自定义ExpandableListView,实现APP帮助界面的相关文章

WPF学习- 新建项目后自定义Main()[Type &#39;App&#39; already defines a member called &#39;Main&#39; with the same parameter types]

问题点: 在App.xaml.cs中自己添加Main方法,编译会出现如下报错: 错误 CS0111 类型“App”已定义了一个名为“Main”的具有相同参数类型的成员  错误 Type 'App' already defines a member called 'Main' with the same parameter types  错误 CS0017 程序定义了多个入口点.使用 /main (指定包含入口点的类型)进行编译.  原因: 默认方式新建WPF项目时,编译时会自动生成Main方法(

(转载)自定义ExpandableListView,实现二级列表效果

先看效果图: 上图是我们要实现的效果,那么现在我们开始着手去做,主要分为以下几步: 一丶我们需要根据效果图去思考该如何动手,从上图分析看,我们可以用一个相对布局RelativeLayout来完成group(一级item)的布局设计,至于child(二级item)的布局,我们可以用一个TextView来完成,当然,如果如要更复杂的效果可以参照一级item的布局方式进行. 以下是main.xml丶group.xml和child.xml的布局: main.xml <?xml version="1

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

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

android--自定义ExpandableListView+隐藏指示器图片+防数据显示混乱

类似于ListView,自定义ExpandableListView只需要写一个适配器类(继承自BaseExpandableListAdapter即可): import java.util.List; import java.util.zip.Inflater; import android.app.Activity; import android.content.Context; import android.util.AttributeSet; import android.view.Layo

《Pro Express.js》学习笔记——app.params中间件

app.param中间件用于对URL中的参数进行获取.加工.输出,提供公有逻辑,以达到代码重构的目的. 以下示例采取三个步骤对代码进行重构,app.param中间件的作用非常明显: 不使用中间件 使用自定义中间件 使用app.param中间件 不使用中间件 1 var users = { 2     'azat': { 3         email: '[email protected]', 4         website: 'http://azat.co', 5         blog

ng 自定义过滤器的创建和使用

过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter('名称',func)//创建过滤器在filter的第二参数,是一个方法,返回的是过滤器方法(有返回值)app.filter('customFilter', function () { return function (value,arg1) { console.log(value,arg1); return '$'

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

angular(3)服务 --注入---自定义模块--单页面应用

ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei/blog/issues/10 1.ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等. http:POST请求: var app = angular.module('myApp', ['ng']); app.run(function($http){

App 开发步骤

在 iOS 开发中,写一个 App 很容易,但是要写好一个 App,确是要下另一番功夫.首先,我们来看一个 App 的开发要求: 写一个 App,显示出 Spotify 上 Lady Gaga 相关的所有音乐专辑,相关信息可以通过以下网址查到:https://api.spotify.com/v1/search?q=lady+gaga&type=album 需求分析 首先拿到开发要求,最重要的是明确开发细节.这里面有很多我们不清楚的地方需要与产品经理和设计师交流:显示是要用 TableView 还