根據(jù)已上線的app里總結(jié)出來(lái)的實(shí)用小技巧
一、簡(jiǎn)介
在日常開(kāi)發(fā),有可能會(huì)遇到需要一些可以展開(kāi)的列表,比如QQ的好友列表。但是,用Android的該怎么做呢?其實(shí)在我沒(méi)有接觸過(guò)ExpandableListView
類之前,都是自定義控件繼承于ListView
或者ListView
嵌套ListView
來(lái)實(shí)現(xiàn)的, 當(dāng)然也不推薦大家這樣使用, 這樣使用會(huì)降低app頁(yè)面的加載速度和性能. 然后,后來(lái)發(fā)現(xiàn)了Android
也給我們提供了ExpandableListView
類,完美實(shí)現(xiàn)這樣類似的需求, 極大的方便了我們開(kāi)發(fā).
二、使用
- 開(kāi)發(fā)工具:
- Android Studio
- 使用的第三方框架:
- Fresco 圖片加載緩存框架
- AndroidAutoLayout 屏幕適配框架
Demo來(lái)自某個(gè)線上電商app的頁(yè)面, 使用前先看看效果圖
-
activity_main.xml
使用AppBarLayout
來(lái)作為標(biāo)題, 是因?yàn)橛嘘幱靶Ч? 看著還不錯(cuò)
<com.zhy.autolayout.AutoLinearLayout/>
是一個(gè)實(shí)現(xiàn)第三方適配的控件
ExpandableListView
里的android:groupIndicator="@null"
功能是去除掉默認(rèn)的關(guān)閉和打開(kāi)狀態(tài)的圖片(系統(tǒng)默認(rèn)的不好看)
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.zhy.autolayout.AutoLinearLayout
android:id="@+id/ll_title_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ec0f38"
android:orientation="vertical">
<com.zhy.autolayout.AutoFrameLayout
android:layout_width="match_parent"
android:layout_height="88px">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="優(yōu)惠套餐"
android:textColor="#ffffff"
android:textSize="32px" />
<com.zhy.autolayout.AutoLinearLayout
android:id="@+id/ll_back"
android:layout_width="100px"
android:layout_height="match_parent"
android:clickable="true"
android:gravity="center">
<ImageView
android:id="@+id/iv_back"
android:layout_width="44px"
android:layout_height="44px"
android:layout_gravity="center_vertical"
android:src="@mipmap/icon_back" />
</com.zhy.autolayout.AutoLinearLayout>
</com.zhy.autolayout.AutoFrameLayout>
</com.zhy.autolayout.AutoLinearLayout>
</android.support.design.widget.AppBarLayout>
<ExpandableListView
android:id="@+id/elv_collocation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeeff3"
android:divider="#eeeff3"
android:dividerHeight="0dp"
android:groupIndicator="@null"
android:listSelector="@null" />
</com.zhy.autolayout.AutoLinearLayout>
-
MainActivity.java
初始化數(shù)據(jù)
elv_collocation.expandGroup(0);
默認(rèn)展開(kāi)第一個(gè)
public class MainActivity extends AppCompatActivity {
private ExpandableListView elv_collocation;
private List<CollocationPackageBean> collocationList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
elv_collocation = (ExpandableListView) findViewById(R.id.elv_collocation);
initData();
}
private void initData() {
collocationList = new ArrayList<>();
CollocationPackageBean collocation_1 = new CollocationPackageBean();
CollocationPackageBean collocation_2 = new CollocationPackageBean();
collocation_1.setTotalPrice(new BigDecimal(897));
collocation_1.setDiscountFee(new BigDecimal(20));
collocation_1.setName("818國(guó)貨套餐3");
List<CollocationPackageBean.CollocationSkuBean> goodsList_1 = new ArrayList<>();
goodsList_1.add(new CollocationPackageBean.CollocationSkuBean("Meizu/魅族 魅藍(lán) note3 全網(wǎng)通 手機(jī) 銀白 16GB", "http://img11.hqbcdn.com/product/07/0a/070ac7abd57c6d9251d89547f3d62501.jpg"));
goodsList_1.add(new CollocationPackageBean.CollocationSkuBean("VR PLUS 智能眼鏡vr虛擬現(xiàn)實(shí)頭盔 3D沉浸式 暴風(fēng)魔鏡 vr plus 智能頭盔 白色", "http://img15.hqbcdn.com/product/c6/10/c610075082199955a8d5dcf2aa765b17.jpg"));
collocation_1.setCollocationSkuDoList(goodsList_1);
collocation_2.setTotalPrice(new BigDecimal(1034));
collocation_2.setDiscountFee(new BigDecimal(26));
collocation_2.setName("超值套餐");
List<CollocationPackageBean.CollocationSkuBean> goodsList_2 = new ArrayList<>();
goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Meizu/魅族 魅藍(lán) note3 全網(wǎng)通 手機(jī) 銀白 16GB", "http://img11.hqbcdn.com/product/07/0a/070ac7abd57c6d9251d89547f3d62501.jpg"));
goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Uka/優(yōu)加 Meizu/魅族 魅藍(lán) note3全覆蓋全屏鋼化玻璃膜 白色", "http://img8.hqbcdn.com/product/9c/15/9c15571aa92905ea1edafb0a288f1ebb.jpg"));
goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("SanDisk/閃迪 至尊高速M(fèi)icroSDHC-TF移動(dòng)存儲(chǔ)卡 Class10-48MB/S 升級(jí)版 16G", "http://img14.hqbcdn.com/product/29/cd/29cda69f5036b38454b6592f96fde774.jpg"));
goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Huawei/華為 AM116 金屬耳機(jī) 三鍵線控耳機(jī) 尊爵版", "http://img9.hqbcdn.com/product/0a/90/0a905d9988c91fb0625d9ee44377c8e0.jpg"));
goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Lesimo/梵簡(jiǎn) 初見(jiàn)系列10000毫安充電寶 手機(jī)平板通用 移動(dòng)電源 黑色", "http://img11.hqbcdn.com/product/67/3a/673ac0343758ce64e97c2d9986cbbef3.jpg"));
collocation_2.setCollocationSkuDoList(goodsList_2);
collocationList.add(collocation_1);
collocationList.add(collocation_2);
elv_collocation.setAdapter(new CollocationListAdapter(this, elv_collocation, collocationList));
elv_collocation.expandGroup(0);
}
}
-
CollocationListAdapter.java
ExpandableListView
的適配器需要繼承自該控件特有的適配器BaseExpandableListAdapter
public class CollocationListAdapter extends BaseExpandableListAdapter {
private LayoutInflater inflater;
private Context context;
private ExpandableListView elv_collocation;
private List<CollocationPackageBean> data;
public CollocationListAdapter(Context context, ExpandableListView elv_collocation, List<CollocationPackageBean> data) {
this.context = context;
this.elv_collocation = elv_collocation;
this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.data = data;
}
@Override
public int getGroupCount() {
return data.size();
}
@Override
public int getChildrenCount(int groupPosition) {
return data.get(groupPosition).getCollocationSkuDoList().size();
}
@Override
public Object getGroup(int groupPosition) {
return data.get(groupPosition);
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return data.get(groupPosition).getCollocationSkuDoList().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;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;//如果子條目需要響應(yīng)click事件,必需返回true
}
@Override
public View getGroupView(final int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
ParentViewHolder parentViewHolder;
if (null == convertView) {
convertView = inflater.inflate(R.layout.collocation_list_item_parent, parent, false);
parentViewHolder = new ParentViewHolder(convertView);
convertView.setTag(parentViewHolder);
AutoUtils.auto(convertView);
} else {
parentViewHolder = (ParentViewHolder) convertView.getTag();
}
CollocationPackageBean collocationPackageBean = data.get(groupPosition);
parentViewHolder.tv_collocation_name.setText(TextUtils.isEmpty(collocationPackageBean.getName()) ? "優(yōu)惠套餐" : collocationPackageBean.getName());
parentViewHolder.tv_save_text.setText("立省¥" + collocationPackageBean.getDiscountFee());
parentViewHolder.iv_status.setImageResource(isExpanded ? R.mipmap.icon_top : R.mipmap.icon_bottom);
parentViewHolder.v_space.setVisibility(isExpanded ? View.GONE : View.VISIBLE);
parentViewHolder.hsv_goods_list.setVisibility(isExpanded ? View.GONE : View.VISIBLE);
parentViewHolder.hsv_goods_list.setFocusable(false);//設(shè)置后解決套餐無(wú)法正常展開(kāi)的bug
if (!isExpanded) {
//設(shè)置套餐折疊時(shí)顯示套餐商品的圖片
initGoodsImage(collocationPackageBean, parentViewHolder, groupPosition);
}
return convertView;
}
@Override
public View getChildView(final int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHolder childViewHolder;
if (null == convertView) {
convertView = inflater.inflate(R.layout.collocation_list_item_child, parent, false);
childViewHolder = new ChildViewHolder(convertView);
convertView.setTag(childViewHolder);
AutoUtils.auto(convertView);
} else {
childViewHolder = (ChildViewHolder) convertView.getTag();
}
final CollocationPackageBean.CollocationSkuBean collocationSkuBean = data.get(groupPosition).getCollocationSkuDoList().get(childPosition);
childViewHolder.sdv_goods_img.setImageURI(Uri.parse(collocationSkuBean.getImageMd5()));
childViewHolder.tv_goods_title.setText(collocationSkuBean.getSkuTitle());
childViewHolder.ll_root_view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//進(jìn)入商品詳情頁(yè)操作
}
});
if (childPosition == data.get(groupPosition).getCollocationSkuDoList().size() - 1) {
//當(dāng)前套餐的最后一個(gè)商品
childViewHolder.ll_bottom.setVisibility(View.VISIBLE);
childViewHolder.tv_collocation_price.setText(data.get(groupPosition).getTotalPrice().toString());
childViewHolder.tv_add_cart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//把套餐商品加入購(gòu)物車操作
}
});
} else {
childViewHolder.ll_bottom.setVisibility(View.GONE);
}
return convertView;
}
class ParentViewHolder {
private View v_space;
private ImageView iv_status;
private HorizontalScrollView hsv_goods_list;
private TextView tv_collocation_name, tv_save_text;
private ParentViewHolder (View view) {
v_space = view.findViewById(R.id.v_space);
iv_status = (ImageView) view.findViewById(R.id.iv_status);
hsv_goods_list = (HorizontalScrollView) view.findViewById(R.id.hsv_goods_list);
tv_collocation_name = (TextView) view.findViewById(R.id.tv_collocation_name);
tv_save_text = (TextView) view.findViewById(R.id.tv_save_text);
}
}
private class ChildViewHolder {
private SimpleDraweeView sdv_goods_img;
private LinearLayout ll_bottom, ll_root_view;
private TextView tv_add_cart, tv_goods_title, tv_collocation_price;
private ChildViewHolder (View view) {
sdv_goods_img = (SimpleDraweeView) view.findViewById(R.id.sdv_goods_img);
ll_bottom = (LinearLayout) view.findViewById(R.id.ll_bottom);
ll_root_view = (LinearLayout) view.findViewById(R.id.ll_root_view);
tv_add_cart = (TextView) view.findViewById(R.id.tv_add_cart);
tv_goods_title = (TextView) view.findViewById(R.id.tv_goods_title);
tv_collocation_price = (TextView) view.findViewById(R.id.tv_collocation_price);
}
}
/**
* 初始化并設(shè)置套餐折疊時(shí)的所有商品圖片
* @param collocationPackageBean
* @param parentViewHolder
* @param groupPosition
*/
private void initGoodsImage(CollocationPackageBean collocationPackageBean,
ParentViewHolder parentViewHolder, final int groupPosition) {
View collocationView;
SimpleDraweeView sdv_cart_image;
RelativeLayout rl_middle;
LinearLayout rootview = new LinearLayout(context);
for (int i = 0, len = collocationPackageBean.getCollocationSkuDoList().size(); i < len; i++) {
collocationView = inflater.inflate(R.layout.item_gift_img, null);
sdv_cart_image = (SimpleDraweeView) collocationView.findViewById(R.id.sdv_cart_image);
rl_middle = (RelativeLayout) collocationView.findViewById(R.id.rl_middle);
sdv_cart_image.setImageURI(Uri.parse(collocationPackageBean.getCollocationSkuDoList().get(i).getImageMd5()));
rl_middle.setVisibility(View.INVISIBLE);
collocationView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//手動(dòng)實(shí)現(xiàn)展開(kāi)操作
elv_collocation.expandGroup(groupPosition);
}
});
AutoUtils.auto(collocationView);
rootview.addView(collocationView);
}
parentViewHolder.hsv_goods_list.removeAllViews();
parentViewHolder.hsv_goods_list.addView(rootview);
}
}
-
collocation_list_item_child.xml
套餐子布局
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:orientation="vertical">
<com.zhy.autolayout.AutoLinearLayout
android:id="@+id/ll_root_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_me_bg_item"
android:paddingBottom="28px"
android:paddingLeft="24px"
android:paddingRight="24px"
android:paddingTop="30px">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv_goods_img"
android:layout_width="120px"
android:layout_height="120px"
android:background="@drawable/shape_cart_goods_border"
android:padding="1dp"
fresco:placeholderImage="@mipmap/icon_loading_bg" />
<TextView
android:id="@+id/tv_goods_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20px"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#222222"
android:textSize="30px" />
<View
android:layout_width="118px"
android:layout_height="1px" />
<ImageView
android:layout_width="18px"
android:layout_height="28px"
android:src="@mipmap/icon_right" />
</com.zhy.autolayout.AutoLinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="24px"
android:background="#dddddd" />
<com.zhy.autolayout.AutoLinearLayout
android:id="@+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.zhy.autolayout.AutoLinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="24px"
android:paddingRight="24px"
android:paddingTop="20px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="套餐價(jià)格:"
android:textColor="#888888"
android:textSize="30px" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20px"
android:text="¥"
android:textColor="#ec0f38"
android:textSize="22px" />
<TextView
android:id="@+id/tv_collocation_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ec0f38"
android:textSize="30px" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_add_cart"
android:layout_width="180px"
android:layout_height="50px"
android:background="@drawable/selector_add_cart_red_btn"
android:gravity="center"
android:text="加入購(gòu)物車"
android:textColor="@drawable/selector_add_cart_red_tv"
android:textSize="28px" />
</com.zhy.autolayout.AutoLinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20px"
android:layout_marginTop="20px"
android:background="#eeeff3" />
</com.zhy.autolayout.AutoLinearLayout>
</com.zhy.autolayout.AutoLinearLayout>
-
collocation_list_item_parent.xml
套餐父布局
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:paddingTop="20px">
<com.zhy.autolayout.AutoLinearLayout
android:layout_width="match_parent"
android:layout_height="50px"
android:layout_marginBottom="30px"
android:gravity="center_vertical"
android:paddingLeft="24px"
android:paddingRight="24px">
<TextView
android:id="@+id/tv_collocation_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#222222"
android:textSize="30px" />
<TextView
android:id="@+id/tv_save_text"
android:layout_width="wrap_content"
android:layout_height="40px"
android:layout_marginLeft="20px"
android:background="@drawable/shape_save_money"
android:gravity="center"
android:paddingLeft="18px"
android:paddingRight="18px"
android:textColor="#ffffff"
android:textSize="24px" />
<View
android:layout_width="0dp"
android:layout_height="1px"
android:layout_weight="1" />
<ImageView
android:id="@+id/iv_status"
android:layout_width="28px"
android:layout_height="18px"
android:layout_gravity="right|center_vertical"
android:src="@mipmap/icon_top" />
</com.zhy.autolayout.AutoLinearLayout>
<HorizontalScrollView
android:id="@+id/hsv_goods_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="24px"
android:scrollbars="none" />
<View
android:id="@+id/v_space"
android:layout_width="match_parent"
android:layout_height="20px"
android:layout_marginTop="20px"
android:background="#eeeff3"
android:visibility="gone" />
</com.zhy.autolayout.AutoLinearLayout>
-
item_gift_img.xml
圖片item布局
SimpleDraweeView
是Fresco
里的控件, 顯示網(wǎng)絡(luò)圖片
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv_cart_image"
android:layout_width="126px"
android:layout_height="126px"
android:background="@drawable/shape_cart_goods_border"
android:padding="1px"
android:scaleType="fitXY"
fresco:placeholderImage="@mipmap/icon_loading_bg"
fresco:progressBarImage="@mipmap/icon_loading_bg" />
<com.zhy.autolayout.AutoRelativeLayout
android:id="@+id/rl_middle"
android:layout_width="wrap_content"
android:layout_height="126px"
android:layout_marginLeft="13px"
android:layout_marginRight="13px"
android:orientation="vertical">
<TextView
android:id="@+id/tv_gift_goods_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:text="x1"
android:textColor="#ec0f38"
android:textSize="26px" />
</com.zhy.autolayout.AutoRelativeLayout>
</com.zhy.autolayout.AutoLinearLayout>
-
CollocationPackageBean.java
存放數(shù)據(jù)的bean
public class CollocationPackageBean {
private BigDecimal totalPrice;
private String name;
private List<CollocationSkuBean> collocationSkuDoList;
private BigDecimal discountFee;
public static class CollocationSkuBean {
private String skuTitle;
private String imageMd5;
public CollocationSkuBean(String skuTitle, String imageMd5) {
this.skuTitle = skuTitle;
this.imageMd5 = imageMd5;
}
set...
get..
}
set...
get...
}
幾個(gè)主要的文件就這幾個(gè)
其他哪些shape, selector文件之類的就沒(méi)有必要貼上來(lái)了
需要要看詳細(xì)的代碼看這里
github源碼地址 歡迎star、fork