项目中需要一个需求就是在侧页中显示分类。但是这个侧页的内容是根据后台的数据会进行变更的。第一种思路就是使用textview动态加载布局,比较容易实现;后面发现可以使用ExpandableListView进行实现,比较happy啊。先上效果图
好了。实现它。。。
一、首先是适配器,大量的注释来袭
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;
import com.coofond.carservice.R;
import com.coofond.carservice.shop.bean.GroupBean;
import java.util.List;
/**
* ExpandableListAdapter 左侧侧滑页面
* Created by IBM on 2016/10/17.
*/
public class MyExpandableListAdapter extends BaseExpandableListAdapter {
Context mContext;
List<GroupBean> mGroupBeans;
//构造函数
public MyExpandableListAdapter(Context mContext, List<GroupBean> mGroupBeans) {
this.mContext = mContext;
this.mGroupBeans = mGroupBeans;
}
//获取组中元素的个数
@Override
public int getGroupCount() {
return mGroupBeans.size();
}
//获取指定组中的元素个数
@Override
public int getChildrenCount(int groupPosition) {
if(mGroupBeans.get(groupPosition).getChildLists()==null){
return 0;
}
return mGroupBeans.get(groupPosition).getChildLists().size();
}
//获取指定组中的数据
@Override
public GroupBean getGroup(int groupPosition) {
return mGroupBeans.get(groupPosition);
}
/**
* 获取指定组中的指定元素
* @param groupPosition
* @param childPosition
* @return
*/
@Override
public String getChild(int groupPosition, int childPosition) {
return mGroupBeans.get(groupPosition).getChildLists().get(childPosition);
}
//获取指定组的id,这个id必须唯一
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
/**
* 获取指定组中的指定元素id
* @param groupPosition
* @param childPosition
* @return
*/
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
/**
* 组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。
*/
@Override
public boolean hasStableIds() {
return false;
}
/**
* 获取显示指定组的视图对象
*
* @param groupPosition
* 组位置
* @param isExpanded
* 该组是展开状态还是伸缩状态
* @param convertView
* 重用已有的视图对象
* @param parent
* 返回的视图对象始终依附于的视图组
*/
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
convertView= LayoutInflater.from(mContext).inflate(R.layout.item_group,null);
TextView tvGroup= (TextView) convertView.findViewById(R.id.tv_item);
tvGroup.setTextSize(18);
tvGroup.setPadding(20,10,0,10);
tvGroup.setText(getGroup(groupPosition).getGroupName()+"");
return convertView;
}
/**
* 获取一个视图对象,显示指定组中的指定子元素数据。
*
* @param groupPosition
* 组位置
* @param childPosition
* 子元素位置
* @param isLastChild
* 子元素是否处于组中的最后一个
* @param convertView
* 重用已有的视图(View)对象
* @param parent
* 返回的视图(View)对象始终依附于的视图组
*/
@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_group,null);
}
TextView tvChild= (TextView) convertView.findViewById(R.id.tv_item);
tvChild.setTextSize(13);
tvChild.setPadding(100,10,0,10);
tvChild.setText(getChild(groupPosition,childPosition));
return convertView;
}
/**
* 判断子项是否可以选中,如果不写这个,子项点击事件不触发
*/
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
二、xml文件就不写了。然后上核心代码
@Override
protected void initData() {
final List<GroupBean> list = new ArrayList<>();
List<String> listchlid = new ArrayList<>();
List<String> listchlid1 = new ArrayList<>();
listchlid.clear();
listchlid1.clear();
listchlid.add("特色产品");
listchlid.add("母婴用品");
listchlid.add("食品饮料");
listchlid.add("家居用品");
listchlid.add("营养保健");
listchlid1.add("保 养");
listchlid1.add("钣 喷");
listchlid1.add("美 容");
listchlid1.add("精 品");
GroupBean bean = new GroupBean();
bean.setChildLists(listchlid);
bean.setGroupName("全球海淘");
GroupBean bean1 = new GroupBean();
bean1.setChildLists(listchlid1);
bean1.setGroupName("售后服务");
GroupBean bean2 = new GroupBean();
bean2.setChildLists(null);
bean2.setGroupName("新车销售");
GroupBean bean3 = new GroupBean();
bean3.setChildLists(null);
bean3.setGroupName("一元夺宝");
list.clear();
list.add(bean);
list.add(bean1);
list.add(bean2);
list.add(bean3);
MyExpandableListAdapter mAdapter = new MyExpandableListAdapter(this, list);
exLeftMenu.setAdapter(mAdapter);
//默认展开
for (int i = 0; i < list.size(); i++) {
exLeftMenu.expandGroup(i);
}
//组点击事件
exLeftMenu.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getGroupName());
return true;
//把他的组点击事件屏蔽,那么就不会触发展开的事件了
}
});
//子项点击事件
exLeftMenu.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getChildLists().get(childPosition));
return false;
}
});
}
三、算了,贴个ExpandableListView的xml文件吧。。。主要是解释下属性, android:groupIndicator=”@null”是因为默认会给group级别的item有个向下的箭头。。。不要了。android:listSelector=”@color/textcolorgray”是可以设置选中item后的item的背景颜色。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/dl_left"
android:orientation="vertical">
<!--主视图-->
<include layout="@layout/act_main"/>
<!--侧滑菜单-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_gravity="start">
<ExpandableListView
android:id="@+id/lv_leftmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="@color/textcolorgray"
android:cacheColorHint="@color/textcolorgray"
android:groupIndicator="@null"
>
</ExpandableListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
总结:我们用了ExpandableListview,它是extendsListView的,有了适配器,那么 我们通过mAdapter.notifyDataSetChanged();后台数据更新,我们也可以通过适配器通知这个列表的更新。比较方便,再有就是取消ExpandableListview的收缩,只要
//绘制界面过程中默认展开
for (int i = 0; i < list.size(); i++) {
exLeftMenu.expandGroup(i);
}
//然后再屏蔽group点击事件
//组点击事件
exLeftMenu.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getGroupName());
return true;
//把他的组点击事件屏蔽,那么就不会触发收缩的事件了
}
});
那么我们的这个导航栏目的条目就比较清晰了。顺便推荐下侧页的这种覆盖效果。。。本来打算用popwindow的,后来发现android.support.v4.widget.DrawerLayout简直是契合的不得了。相当好用。。。
四、番外,DrawerLayout的简单使用,感觉巨好用啊。你的主界面完全不用动,只要include进来就可以了。要注意下,侧页的布局的开始绘制是android:layout_gravity=”start”就可以了。
then获取这个控件对象,点击按钮,注册事件,就是这么简单~自带手势滑动显示侧页以及关闭侧页。
//打开侧滑页
mDrawerLayout.openDrawer(GravityCompat.START);
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/dl_left"
android:orientation="vertical">
<!--主视图-->
<include layout="@layout/act_main"/>
<!--侧滑菜单-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_gravity="start">
<ExpandableListView
android:id="@+id/lv_leftmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="@color/textcolorgray"
android:cacheColorHint="@color/textcolorgray"
android:groupIndicator="@null"
>
</ExpandableListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
五、好了,have a nice day!