实现效果图:

expandableListView groupIndicator 图片默认是在左边,而且比较难看,而我要的是实现groupIndicator 在右边自定义图片,


换图片



最简单的就是直接copy 系统


<style name="Widget.ExpandableListView" parent="Widget.ListView">

<item name="android:groupIndicator">@android:drawable/expander_group</item>

<item name="android:indicatorLeft">?android:attr/expandableListPreferredItemIndicatorLeft</item>

<item name="android:indicatorRight">?android:attr/expandableListPreferredItemIndicatorRight</item>

<item name="android:childDivider">@android:drawable/divider_horizontal_dark_opaque</item>

</style>


看到这个没有

<item name="android:groupIndicator">@android:drawable/expander_group</item>

我们只要把这个给换了,那 groupIndicator也就跟着变了。但是改这个有个问题显示出来的

显示的效果不是很好,图片有被拉升过,系统自己是做了个.9图片。我们已可以

2.做一张.9图片

在你eclipse 的解压目录下,找到\sdk\tools\

我的是D:\android-IDE-eclipse-64\adt-bundle-windows-x86-20130522\sdk\tools

在这个目录下有一个draw9patch.bat的批处理文件。我们要用它做.9图,双击直接打开。直接将你要做成.9 的原图直接拉进工具。

3.创建 Indicator selector expander_group.xml 文件


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

<item

android:state_expanded="true"

android:drawable="@drawable/up" />

<item

android:drawable="@drawable/down" />

</selector>

4.放一张图片到你的res目录下这里我直接用系统的

<item name="android:childDivider">@android:drawable/divider_horizontal_dark_opaque</item>

这个是一张图片

5.在自己的style。xml里写一个


<style name="ExpandableListView" parent="android:Widget.ListView">

<item name="android:groupIndicator">@drawable/expander_group</item>

<item name="android:indicatorLeft">?android:attr/expandableListPreferredItemIndicatorLeft</item>

<item name="android:indicatorRight">?android:attr/expandableListPreferredItemIndicatorRight</item>

<item name="android:childDivider">@drawable/divider_horizontal_dark_opaque</item>

</style>


这样我们就自己定义好了expandable的style

6.加载自己的style

<ExpandableListView

android:id="@+id/expandableListView1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true" >

</ExpandableListView>

7.在activity中设置 Indicator位置

expandablelistView 提供一个方法设置位置

Display dp = getWindowManager().getDefaultDisplay();

int width = dp.getWidth();

lv.setIndicatorBounds(width-50, width);


运行完结果:

不知道什么原因还是有点拉伸,效果不是很好,但又要实现title图片不回被拉伸放大这样的效果;所以我就只能把图标给屏蔽了,然后在groupItem的布局加一个ImageView,用ImageView自己实现。


<ExpandableListView

android:id="@+id/exlv_select_binddev"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:groupIndicator="@null"

android:childIndicator="@null"

>

</ExpandableListView>


这样就把他自带的图标给屏蔽了,然后直接在groupitem布局加上一个ImageView,再做一个Childitem的布局,布局我直接设4个button,自由发挥了。

然后在适配器上getgroupView 设置父布局,在getChildView设置子布局。和listView的差不多。


现在要做的就是设置监听

监听ImageView expandableListView 的点击事件,这里我是点图片展开和关闭Child,长点击expandableListView 也展开和关闭Child,点击进入另一个界面。


监听ImageView的点击事件,这里关键是保存position。直接写一个内部类保存position

class ImageListener implements OnClickListener {


private int groupPosition;


public ImageListener(int groupPosition)

{

this.groupPosition = groupPosition;

}


@Override

public void onClick( View v )

{

Toast.makeText(ExpandableActivity.this, " p_w_picpath groupPosition : " + groupPosition, Toast.LENGTH_SHORT)

.show();

if (mlist.isGroupExpanded(groupPosition))//是否展开

{

mlist.collapseGroup(groupPosition);//设置关闭

}

else

{

mlist.expandGroup(groupPosition);//设置展开

}

}

}

监听长点击事件

mlist.setOnItemLongClickListener(new OnItemLongClickListener() {


public boolean onItemLongClick( AdapterView<?> parent, View childView, int flatPos, long id )

{

if (ExpandableListView.getPackedPositionType(id) == ExpandableListView.PACKED_POSITION_TYPE_GROUP)

{

long position = ((ExpandableListView) parent).getExpandableListPosition(flatPos);

int groupPosition = ExpandableListView.getPackedPositionGroup(position);

int childPosition = ExpandableListView.getPackedPositionChild(position);

System.out.println(groupPosition + childPosition + " :groupPosition childPosition" + flatPos + " "

+ id);

if (mlist.isGroupExpanded(groupPosition))

{

mlist.collapseGroup(groupPosition);

}

else

{

mlist.expandGroup(groupPosition);

}

return true;

}

else if (ExpandableListView.getPackedPositionType(id) == ExpandableListView.PACKED_POSITION_TYPE_CHILD)

{

long position = ((ExpandableListView) parent).getExpandableListPosition(flatPos);

int groupPosition = ExpandableListView.getPackedPositionGroup(position);

int childPosition = ExpandableListView.getPackedPositionChild(position);

System.out.println(childPosition + " :groupPosition");

return true;

}

return false;

}

});

获取点击事件

mlist.setOnGroupClickListener(new OnGroupClickListener() {


@Override

public boolean onGroupClick( ExpandableListView parent, View v, final int groupPosition, long id )

{

Toast.makeText(ExpandableActivity.this, " click groupPosition : " + groupPosition + " id : " + id,

Toast.LENGTH_SHORT).show();

return true;

}

});

这样就可以了

Child 的点击事件那就比较简单了,直接和ImageView的点击事件一样处理,或者直接写死了,Child是横向的,也只有4个不多。

ch.tv_choose.setOnClickListener(new OnClickListener() {


@Override

public void onClick( View v )

{

// TODO 子控件进入

onChildChick(0, FatherItem);

}

});

public void onChildChick( int childItemid, int fatherItemid )

{

// TODO 接收child

Toast.makeText(this, " childItemid : " + childItemid + " fatherItemid : " + fatherItemid, Toast.LENGTH_SHORT)

.show();

}

这样就搞定了

代码:

package com.example.listviewanditemchick;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.content.Context;import android.database.DataSetObserver;import android.graphics.drawable.Drawable;import android.support.v4.widget.SearchViewCompat.OnCloseListenerCompat;import android.view.Display;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.BaseExpandableListAdapter;import android.widget.ExpandableListAdapter;import android.widget.ExpandableListView;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.ListAdapter;import android.widget.TextView;import android.widget.Toast;import android.widget.AdapterView.OnItemLongClickListener;import android.widget.ExpandableListView.OnGroupClickListener;import android.widget.ExpandableListView.OnGroupExpandListener;public class ExpandableActivity extends Activity { private ExpandableListView mlist; private MyExpandableadapter madapter; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_expandable); mlist = (ExpandableListView) findViewById(R.id.expandableListView1); madapter = new MyExpandableadapter(this); mlist.setAdapter(madapter); Display dp = getWindowManager().getDefaultDisplay(); int width = dp.getWidth(); mlist.setIndicatorBounds(width - 50, width); onClickExpandable(); } private void onClickExpandable() { mlist.setOnGroupClickListener(new OnGroupClickListener() { @Override public boolean onGroupClick( ExpandableListView parent, View v, final int groupPosition, long id ) { Toast.makeText(ExpandableActivity.this, " click groupPosition : " + groupPosition + " id : " + id, Toast.LENGTH_SHORT).show(); return true; } }); // mlist.setOnItemLongClickListener(new OnItemLongClickListener() { public boolean onItemLongClick( AdapterView<?> parent, View childView, int flatPos, long id ) { if (ExpandableListView.getPackedPositionType(id) == ExpandableListView.PACKED_POSITION_TYPE_GROUP) { long position = ((ExpandableListView) parent).getExpandableListPosition(flatPos); int groupPosition = ExpandableListView.getPackedPositionGroup(position); int childPosition = ExpandableListView.getPackedPositionChild(position); System.out.println(groupPosition + childPosition + " :groupPosition childPosition" + flatPos + " " + id); if (mlist.isGroupExpanded(groupPosition)) { mlist.collapseGroup(groupPosition); } else { mlist.expandGroup(groupPosition); } return true; } else if (ExpandableListView.getPackedPositionType(id) == ExpandableListView.PACKED_POSITION_TYPE_CHILD) { long position = ((ExpandableListView) parent).getExpandableListPosition(flatPos); int groupPosition = ExpandableListView.getPackedPositionGroup(position); int childPosition = ExpandableListView.getPackedPositionChild(position); System.out.println(childPosition + " :groupPosition"); return true; } return false; } }); // 子菜单打开一个其他的就关闭 mlist.setOnGroupExpandListener(new OnGroupExpandListener() { @Override public void onGroupExpand( int groupPosition ) { for (int i = 0; i < madapter.getGroupCount(); i++) { if (groupPosition != i) { mlist.collapseGroup(i); } } } }); } public void onChildChick( int childItemid, int fatherItemid ) { // TODO 接收child Toast.makeText(this, " childItemid : " + childItemid + " fatherItemid : " + fatherItemid, Toast.LENGTH_SHORT) .show(); } public void onImageChick( int groupPosition ) { Toast.makeText(ExpandableActivity.this, " p_w_picpath groupPosition : " + groupPosition, Toast.LENGTH_SHORT).show(); // if(isExpanded) p_w_picpath.setImageResource(R.drawable.up); // else p_w_picpath.setImageResource(R.drawable.down); if (mlist.isGroupExpanded(groupPosition)) { mlist.collapseGroup(groupPosition); } else { mlist.expandGroup(groupPosition); } } class ImageListener implements OnClickListener { private int groupPosition; public ImageListener(int groupPosition) { this.groupPosition = groupPosition; } @Override public void onClick( View v ) { Toast.makeText(ExpandableActivity.this, " p_w_picpath groupPosition : " + groupPosition, Toast.LENGTH_SHORT) .show(); if (mlist.isGroupExpanded(groupPosition)) { mlist.collapseGroup(groupPosition); } else { mlist.expandGroup(groupPosition); } } } class MyExpandableadapter extends BaseExpandableListAdapter { private Context context; private int Imageposition; private boolean expanded; private int FatherItem; public MyExpandableadapter(Context c) { this.context = c; } @Override public int getGroupCount() { return 10; } @Override public int getChildrenCount( int groupPosition ) { return 1; } @Override public Object getGroup( int groupPosition ) { return null; } @Override public Object getChild( int groupPosition, int childPosition ) { return null; } @Override public long getGroupId( int groupPosition ) { return groupPosition; } @Override public long getChildId( int groupPosition, int childPosition ) { return childPosition; } @Override public boolean hasStableIds() { return false; } public void setTitleImage( boolean isexpandeb ) { } @Override public View getGroupView( int groupPosition, boolean isExpanded, View convertView, ViewGroup parent ) { Imageposition = groupPosition; groupHowd gh; if (convertView == null) { gh = new groupHowd(); // convertView = // LayoutInflater.from(context).inflate(R.layout.item, null); convertView = LayoutInflater.from(context).inflate(R.layout.item_p_w_picpathbutton, null); gh.p_w_picpath = (ImageView) convertView.findViewById(R.id.p_w_picpathButton1); convertView.setTag(gh); } else { gh = (groupHowd) convertView.getTag(); } expanded = isExpanded; if (isExpanded) gh.p_w_picpath.setImageResource(R.drawable.up); else gh.p_w_picpath.setImageResource(R.drawable.down); gh.p_w_picpath.setOnClickListener(new ImageListener(Imageposition)); return convertView; } @Override public View getChildView( int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent ) { FatherItem = groupPosition; childHowd ch; if (convertView == null) { ch = new childHowd(); convertView = LayoutInflater.from(context).inflate(R.layout.selecte_exlv_item, null); ch.tv_choose = (TextView) convertView.findViewById(R.id.tv_choose); ch.tv_select = (TextView) convertView.findViewById(R.id.tv_select); ch.tv_up = (TextView) convertView.findViewById(R.id.tv_up); ch.tv_delete = (TextView) convertView.findViewById(R.id.tv_delete); convertView.setTag(ch); } else { ch = (childHowd) convertView.getTag(); } ch.tv_choose.setText("进入"); ch.tv_select.setText("查看"); ch.tv_up.setText("修改"); ch.tv_delete.setText("删除"); ch.tv_choose.setOnClickListener(new OnClickListener() { @Override public void onClick( View v ) { // TODO 子控件进入 onChildChick(0, FatherItem); } }); ch.tv_select.setOnClickListener(new OnClickListener() { @Override public void onClick( View v ) { // TODO 子控键查看 onChildChick(1, FatherItem); } }); ch.tv_up.setOnClickListener(new OnClickListener() { @Override public void onClick( View v ) { // TODO 子控件更新 onChildChick(2, FatherItem); } }); ch.tv_delete.setOnClickListener(new OnClickListener() { @Override public void onClick( View v ) { // TODO 子控件你删除 onChildChick(3, FatherItem); } }); return convertView; } @Override public boolean isChildSelectable( int groupPosition, int childPosition ) { // TODO Auto-generated method stub return true; } class groupHowd { ImageView p_w_picpath; TextView tv_name; TextView tv_id; TextView tv_state; } class childHowd { TextView tv_choose; TextView tv_select; TextView tv_up; TextView tv_delete; } }}

groupView 布局:这里最好用relativeLayout,之前用linearlayout不能实现点击p_w_picpathView没反应回去不到事件,后面监听触摸事件,那做法更麻烦,后来改用relativelayout后就可以了。

然后设置 RelativeLayout 设置 android:descendantFocusability="blocksDescendants"

要获取点击事件的 ImageView设置 android:focusable="false"就行了;

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="blocksDescendants" android:padding="8dp" > <ImageView android:id="@+id/p_w_picpathView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/p_w_picpathView1" android:layout_marginLeft="14dp" android:layout_toRightOf="@+id/p_w_picpathView1" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/p_w_picpathView1" android:layout_alignLeft="@+id/textView1" android:text="TextView" /> <ImageView android:id="@+id/p_w_picpathButton1" android:scaleType="fitXY" android:layout_width="45dp" android:layout_height="45dp" android:layout_alignBottom="@+id/textView2" android:layout_alignParentRight="true" android:src="@drawable/down" android:focusable="false" /></RelativeLayout>

Child布局:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="beforeDescendants" android:orientation="horizontal" > <TextView android:id="@+id/tv_choose" android:layout_width="wrap_content" android:layout_height="@dimen/p_w_picpath_height" android:layout_weight="1" android:background="@drawable/btn_selector_blue" android:clickable="true" android:enabled="true" android:focusable="true" android:gravity="center" android:padding="4dp" android:text="进入" android:textColor="@color/white" android:textSize="@dimen/fontxiao" /> <ImageView android:id="@+id/p_w_picpathView1" android:layout_width="2dp" android:layout_height="@dimen/p_w_picpath_height" android:background="@color/black" /> <TextView android:id="@+id/tv_select" android:layout_width="wrap_content" android:layout_height="@dimen/p_w_picpath_height" android:layout_weight="1" android:background="@drawable/btn_selector_blue" android:clickable="true" android:enabled="true" android:focusable="true" android:gravity="center" android:padding="4dp" android:text="查看" android:textColor="@color/white" android:textSize="@dimen/fontxiao" /> <ImageView android:id="@+id/p_w_picpathView1" android:layout_width="2dp" android:layout_height="@dimen/p_w_picpath_height" android:background="@color/black"/> <TextView android:id="@+id/tv_up" android:layout_width="wrap_content" android:layout_height="@dimen/p_w_picpath_height" android:layout_weight="0.96" android:background="@drawable/btn_selector_blue" android:clickable="true" android:enabled="true" android:focusable="true" android:gravity="center" android:padding="4dp" android:text="修改" android:textColor="@color/white" android:textSize="@dimen/fontxiao" /> <ImageView android:id="@+id/p_w_picpathView1" android:layout_width="2dp" android:layout_height="@dimen/p_w_picpath_height" android:background="@color/black"/> <TextView android:id="@+id/tv_delete" android:layout_width="wrap_content" android:layout_height="@dimen/p_w_picpath_height" android:layout_weight="1" android:background="@drawable/btn_selector_blue" android:clickable="true" android:enabled="true" android:focusable="true" android:gravity="center" android:padding="4dp" android:text="删除" android:textColor="@color/white" android:textSize="@dimen/fontxiao" /></LinearLayout>


附件:http://down.51cto.com/data/2364330