首页 > 代码库 > 自定义ExpandableListView,实现APP帮助界面

自定义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只是把适配器集成在里边而已


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