展开列表控件ExpandableList,这里直接用一个简单的例子来介绍,先上效果图(默认为展开的列表):
先分析一下,应该是有两个布局,一个用于显示根,一个用显示子,显示根的布局命名为:list_item_expand_group.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/group_layout"
android:layout_width="fill_parent"
android:layout_height="45dp">
<TextView
android:id="@+id/group_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:textSize="@dimen/one_level_word"
android:textColor="@color/word_color_999999"
android:text="-"/>
<ImageView
android:id="@+id/group_state"
android:layout_width="16dp"
android:layout_height="12dp"
android:layout_toRightOf="@+id/group_title"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:background="@drawable/group_down"/>
<TextView
android:id="@+id/group_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:textSize="@dimen/one_level_word"
android:textColor="@color/word_color_666666"/>
</RelativeLayout>
</LinearLayout>
显示子的布局命名为:list_item_expand_group_child.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="@color/wirte_ffffff">
<TextView
android:id="@+id/child_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:paddingLeft="50dp"
android:text="test"
android:textSize="@dimen/two_level_word"
android:textColor="@color/word_color_666666"/>
</LinearLayout>
布局定义好了,接下来就是定义它的适配器,ExpanableList的适配器继承于BaseExpandableListAdapter,要显示两级我们需要两个列表,一个用于存根,一个用于存子,这里跟已经定了,是四种情况:迟到人数,请假人数,旷课人数和公假人数,但是子是需要传入的,然后分别要重写其getGroupView()获取根布局的方法和getChildView()获取子布局方法,适配器如下:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.gta.zssx.R;
import com.gta.zssx.pub.util.LogUtil;
import java.util.ArrayList;
import java.util.List;
/**
* Created by lan.zheng on 2016/6/24.
*/
public class CheckExpandableListAdapter extends BaseExpandableListAdapter {
public static int[] group_checked = new int[] { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ,0};
private String[] group_title_array = new String[] { "迟到人数", "请假人数","旷课人数","公假人数" };
private List<String> groupArray; //title,根数组
private List<String> groupCount; //是否显示箭头的标志
private List<List<String>> childArray; //child数组
Context mContext;
// 一级标签上的状态图片数据源
int[] group_state_array = new int[] { R.drawable.group_down,
R.drawable.group_up };
public CheckExpandableListAdapter(Context context,String[] late,String[] leave,String[] truant,String[] holiday){
mContext = context;
groupCount = new ArrayList<>();
groupCount.add(""+late.length);
groupCount.add(""+leave.length);
groupCount.add(""+truant.length);
groupCount.add(""+holiday.length);
//这里都把获得的根String变为List
groupArray = new ArrayList<>();
for(int index=0;index<group_title_array.length;index++){
groupArray.add(group_title_array[index]);
}//这里都把获得的子String变为List
childArray = new ArrayList<>();
List<String> childItem1 =new ArrayList<>();
List<String> childItem2 =new ArrayList<>();
List<String> childItem3 =new ArrayList<>();
List<String> childItem4 =new ArrayList<>();
for(int i=0;i<late.length;i++){
childItem1.add(late[i]);}
for(int i=0;i<leave.length;i++){
childItem2.add(leave[i]);}
for(int i=0;i<truant.length;i++){
childItem3.add(truant[i]);}
for(int i=0;i<holiday.length;i++){
childItem4.add(holiday[i]);}
childArray.add(childItem1);
childArray.add(childItem2);
childArray.add(childItem3);
childArray.add(childItem4);
}
@Override
public int getGroupCount() {
return groupArray.size();
}
@Override
public int getChildrenCount(int groupPosition) {
return childArray.get(groupPosition).size();
}
@Override
public Object getGroup(int groupPosition) {
return getGroup(groupPosition);
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return childArray.get(groupPosition).get(childPosition);
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public boolean hasStableIds() {
return true;
}
/**
* 一级标签设置
* @param groupPosition
* @param isExpanded
* @param convertView
* @param parent
* @return
*/
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
// 为视图对象指定布局
convertView = LinearLayout.inflate(mContext,
R.layout.list_item_expand_group, null);
RelativeLayout myLayout = (RelativeLayout) convertView
.findViewById(R.id.group_layout);
/*myLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mListener.itemClick(group_checked);
}
});*/
/**
* 声明视图上要显示的控件
*/
// 新建一个TextView对象,用来显示一级标签上的标题信息
TextView group_title = (TextView) convertView
.findViewById(R.id.group_title);
// 新建一个TextView对象,用来显示一级标签上的大体描述的信息
ImageView group_state = (ImageView) convertView
.findViewById(R.id.group_state);
TextView group_count = (TextView)convertView.findViewById(R.id.group_num) ;
/**
* 设置相应控件的内容
*/
// 设置标题上的文本信息
group_title.setText(groupArray.get(groupPosition));
// 设置整体描述上的文本信息
if (group_checked[groupPosition] % 2 == 1) {
// 设置默认的图片是选中状态
group_state.setBackgroundResource(group_state_array[1]);
myLayout.setBackgroundResource(R.drawable.text_item_expandable_list_bg);
} else {
for (int test : group_checked) {
if (test == 0 || test % 2 == 0) {
// 设置默认的图片是未选中状态
group_state.setBackgroundResource(group_state_array[0]);
myLayout.setBackgroundResource(R.drawable.text_item_top_bg);
}
}
}
//是否显示箭头和改变count
if(groupCount.get(groupPosition).equals("0")){
group_state.setVisibility(View.INVISIBLE);
myLayout.setBackgroundResource(R.drawable.text_item_expandable_list_bg);
}else {
group_count.setText(groupCount.get(groupPosition));
}
// 返回一个布局对象
return convertView;
}
/**
* 对一级标签下的二级标签进行设置
*/
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
// 为视图对象指定布局
convertView = LinearLayout.inflate(mContext, R.layout.list_item_expand_group_child, null);
/**
* 声明视图上要显示的控件
*/
// 新建一个TextView对象,用来显示具体内容
TextView child_text = (TextView) convertView
.findViewById(R.id.child_text);
/**
* 设置相应控件的内容
*/
// 设置要显示的文本信息
child_text.setText(childArray.get(groupPosition).get(childPosition));
return convertView;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
public interface Listener {
void itemClick(int[] group_checked);
}
}
适配器OK,接下来我们也自定义一下我们的ExpandListView,让其在适配ScollView,不然会造成一些小问题(
类似问题点击这里):
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ExpandableListView;
/**
* Created by lan.zheng on 2016/6/25.
*/
public class MyExpandListView extends ExpandableListView{
public MyExpandListView(Context context) {
super(context);
}
public MyExpandListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyExpandListView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
@Override
/**
* 重写该方法,达到使ListView适应ScrollView的效果
*/
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
}
主函数的主要布局如下:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/wirte_ffffff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_course_name_show"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.fun.view.MyExpandListView
android:id="@+id/expanded_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:childDivider="@color/wirte_ffffff"
android:listSelector="#00000000"
android:divider="@color/view_line"
android:dividerHeight="0.5dp"
android:scrollbars="none">
</com.fun.view.MyExpandListView>
</RelativeLayout>
</ScrollView>
最后我们就要在主函数中使用啦:
private MyExpandListView expandableListView;
private CheckExpandableListAdapter mExpandableListAdapter;
String[] lateString; //迟到,自行填充数据
String[] leaveString; //请假,自行填充数据
String[] truantString; //旷课,自行填充数据
String[] holidayString; //公假,自行填充数据
private TextView mCourseNameTextView; //用于获取焦点
private void updateList(){
mExpandableListAdapter = null;
mExpandableListAdapter = new CheckExpandableListAdapter(this,lateString,leaveString,truantString,holidayString);
expandableListView.setAdapter(mExpandableListAdapter);
//默认为全部展开
int groupCount = expandableListView.getCount();
for (int i=0; i<groupCount; i++) {
expandableListView.expandGroup(i);
}
//进行高度计算,为了备注的显示
ViewGroup.LayoutParams lLayoutParams = expandableListView.getLayoutParams();
lLayoutParams.height = getHeight();
expandableListView.setLayoutParams(lLayoutParams);
expandableListView.requestLayout();
expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
CheckExpandableListAdapter.group_checked[groupPosition] = CheckExpandableListAdapter.group_checked[groupPosition]+1;
// 刷新界面
mExpandableListAdapter.notifyDataSetChanged();
return false;
}
});
}
这就完事了?你运行发现似乎还有个小问题,列虽然能显示,但是当数据多了的时候,显示的并不是从头开始的数据,而是列表中间,我们需要获取焦点,让他定位在列表头部开始显示,布局中的TextView在这里发挥了作用,虽然是空的,但是我们可以利用它进行获取焦点,在上面的方法中最后加入这几句即可:
//设置焦点为顶部,因为列表为默认展开,所以需要适配回顶端的标题显示,而不是列表的中间处
mCourseNameTextView.setFocusable(true);
mCourseNameTextView.setFocusableInTouchMode(true);
mCourseNameTextView.requestFocus();
OK,现在我们就完成了这控件的显示,更多的花样你们可以自己尝试一下~~