ExpandableListView從字面意思來說就是對listview的擴展。只要我們掌握listview的用法。ExpandableListView就很容易。listview只是展示一級列表,而ExpandableListView展示的是二級列表。就像qq聯繫人這塊。就是個二級列表。哈哈。。接下來我們就學習使用ExpandableListView這個控件。
我們可以去看看官網對它的介紹
上面的第一段大概意思是說:這個view可以垂直展示兩個列表不同於listview。父列表可以展示子列表。這個數據的來源可以來自ExpandableListAdapter這個適配器來關聯這個view。。。。
哈哈哈。。。我這絕對是我自己概述的。我絕對沒用翻譯軟件。 不一定理解對哈。。。。講代碼之前先看看效果再來寫。。。
這效果是不是像qq聯繫人這樣的效果。不囉嗦,直接放代碼哈。。嘻嘻
ContentUtil.java代碼如下:
public static int mImgs[] = new int[]{
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher
};
public static String names[] = new String[]{
"我的朋友",
"我的好友",
"我的家人",
"我的同學",
"我的兄弟",
"聊得來"
};
public static String counts[] = new String[]{
"12/23",
"12/22",
"14/22",
"1/3",
"4/5",
"4/7"
};
public static int child_img[][] = new int[][]{
{R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
{R.mipmap.ic_launcher, R.mipmap.ic_launcher},
{R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
{R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
{R.mipmap.ic_launcher},
{R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher}
};
public static String child_names[][]=new String[][]{
{"小菜","小宋","小鎮","小紅"},
{"張三","李四"},
{"王五","趙六","王二"},
{"小看","小龍","小林","小鳥"},
{"笑哭"},
{"小搜","小課","小店"}
};
public static String child_contents[][]=new String[][]{
{"我不是程序員","我不是程序員","我不是程序員","我不是程序員"},
{"我不是程序員","我不是程序員"},
{"我不是程序員","我不是程序員","我不是程序員"},
{"我不是程序員","我不是程序員","我不是程序員","我不是程序員"},
{"我不是程序員"},
{"我不是程序員","我不是程序員","我不是程序員"}
};
這些數據。我是把它寫在一個類中了,這樣對於我們初學來說方便理解。你也可以寫在其它地方。 嘻嘻。。還有我的成員變量用static修飾了,這樣做的原因只是可以用類名。來調用。不要static的話你就必須new一個對象出來調用它。。
acitivity_main.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.edu.expandablelistviewsimple.MainActivity">
<ExpandableListView
android:groupIndicator="@null"
android:id="@+id/elv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ExpandableListView>
</RelativeLayout>
很簡單。就是一個ExpandableListView控件。
group_item.xml代碼如下:
<?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:orientation="horizontal">
<ImageView
android:id="@+id/group_img"
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:gravity="center_horizontal"
android:layout_weight="1"
android:id="@+id/group_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="我的好友"
/>
<TextView
android:id="@+id/group_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1/23"
/>
</LinearLayout>
我們看效果圖就知道,父列表就是左邊有個圖片,中間的文本,右邊也是文本。所以我們父列表的item文件就這樣定義。。也不難。哈哈。。
child_item.xml代碼如下:
<?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:orientation="horizontal">
<ImageView
android:id="@+id/child_img"
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_marginTop="5dp"
android:gravity="center_horizontal"
android:id="@+id/child_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的好友"
/>
<TextView
android:id="@+id/child_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1/23"
/>
</LinearLayout>
</LinearLayout>
子列表的item是不是也很簡單。一個圖片,兩個文本。。。
其實這些佈局文件都簡單。。哈哈。。接下來就是我們怎樣把數據綁定到ExpandableListView上中,就需要我們重寫BaseExpandableListAdapter適配器。如果不懂可以看看我上次寫的適配器的使用。僅需四步就可以教你使用適配器。哈哈
http://blog.csdn.net/song_shui_lin/article/details/52579246
MyAdapter.java代碼如下:
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
* Created by Administrator on 2016/9/19.
*/
public class MyAdapter extends BaseExpandableListAdapter{
private Context context;
private LayoutInflater inflater;
public MyAdapter(Context context) {
this.context = context;
inflater = LayoutInflater.from(context);
}
@Override
public int getGroupCount() {
return ContentUtil.mImgs.length;
}
@Override
public int getChildrenCount(int groupPosition) {
return ContentUtil.child_img[groupPosition].length;
}
@Override
public Object getGroup(int groupPosition) {
return ContentUtil.mImgs[groupPosition];
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return ContentUtil.child_img[groupPosition][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;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
GroupViewHodler holder = null;
View view = null;
if (convertView != null) {
view = convertView;
holder = (GroupViewHodler) view.getTag();
} else {
holder = new GroupViewHodler();
view = inflater.inflate(R.layout.group_item, null);
view.setTag(holder);
holder.group_img = (ImageView) view.findViewById(R.id.group_img);
holder.group_name = (TextView) view.findViewById(R.id.group_name);
holder.group_count = (TextView) view.findViewById(R.id.group_content);
}
holder.group_img.setImageResource(ContentUtil.mImgs[groupPosition]);
holder.group_name.setText(ContentUtil.names[groupPosition]);
holder.group_count.setText(ContentUtil.counts[groupPosition]);
return view;
}
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHodler hodler = null;
View view = null;
if (convertView != null) {
view = convertView;
hodler = (ChildViewHodler) view.getTag();
} else {
hodler = new ChildViewHodler();
view = inflater.inflate(R.layout.child_item, null);
view.setTag(hodler);
hodler.child_img = (ImageView) view.findViewById(R.id.child_img);
hodler.child_name = (TextView) view.findViewById(R.id.child_name);
hodler.child_content = (TextView) view.findViewById(R.id.child_content);
}
hodler.child_img.setImageResource(ContentUtil.child_img[groupPosition][childPosition]);
hodler.child_name.setText(ContentUtil.child_names[groupPosition][childPosition]);
hodler.child_content.setText(ContentUtil.child_contents[groupPosition][childPosition]);
return view;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
class GroupViewHodler {
ImageView group_img;
TextView group_name, group_count;
}
class ChildViewHodler {
ImageView child_img;
TextView child_name, child_content;
}
上面的方法,我就是一個方法不太懂,其他的方法基本上可以做到看其名知其意。
1,hasStableIds()
然後我又去看官網api對它的解釋:
還 是官網的解釋準確。哈哈。。寫完了適配器後,基本上我們的基本的差不多做完了。只剩下最後一步了。
MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private ExpandableListView mElv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWidgets();
MyAdapter adapter=new MyAdapter(MainActivity.this);
mElv.setAdapter(adapter);
//爲子列表添加點擊事件
mElv.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
Toast.makeText(MainActivity.this,ContentUtil.child_names[groupPosition][childPosition],Toast.LENGTH_SHORT).show();
return true;
}
});
}
//初始化控件
private void initWidgets() {
mElv= (ExpandableListView) findViewById(R.id.elv);
}
}
總結:
其實我跟大家一樣,好水。寫博客只是記錄下自己平常學的點點滴滴。加油!!!還有不懂的看官網的解釋是最好的。
源碼下載:
https://github.com/songshuilin/AndroidForBlog/tree/master/expandablelistviewsimple