实现的效果如图所示。
ListView有的时候对于一些效果实现起来不是那么容易,像这种布局用litview实现起来有点困难,但是使用listview嵌套GridView实现起来就简单很多了。
需要注意的是GridView需要重写onMeasure方法:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
否则就会导致gridview只显示一行。
下面就是控制标题栏的显示与隐藏即可下面是ListView的Item的布局:
<TextView
android:id="@+id/txt_name"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginLeft="12dp"
android:gravity="center_vertical"
android:text="灯光"
android:textColor="@color/gray_remin"
android:textSize="16sp" />
<com.sds.smarthome.widget.MyGridView
android:id="@+id/gv_device"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/white"
android:numColumns="4">
</com.sds.smarthome.widget.MyGridView>
最后就是对数据做些手脚将同一类型的数据统一设置一个标题,看下具体怎么设置的吧:
mDatas = new ArrayList<>();
ZigbeeResponse z1 = new ZigbeeResponse();
z1.setTitle("灯光");
mDatas.add(z1);
ZigbeeResponse z2 = new ZigbeeResponse();
z2.setType("1");
z2.setTitle("灯光");
z2.setName("灯光1");
mDatas.add(z2);
ZigbeeResponse z3 = new ZigbeeResponse();
z3.setType("1");
z3.setName("灯光2");
z3.setTitle("灯光");
mDatas.add(z3);
ZigbeeResponse z4 = new ZigbeeResponse();
z4.setType("1");
z4.setName("灯光3");
z4.setTitle("灯光");
mDatas.add(z4);
.
.
.
addZigbeeAdapter = new AddZigbeeAdapter(mDatas);
lvZigbee.setAdapter(addZigbeeAdapter);
z1代表的是标题,只设置标题其他为空,在看下Holder中怎么写的
protected void refreshView() {
ZigbeeResponse data = getData();
String title = data.getTitle();
String name = data.getName();
if (!StringUtils.isEmpty(name)) {
txtTitle.setVisibility(View.GONE);
} else {
List<ZigbeeResponse> allData = getAllData();
LogUtil.e("gvDevice" + allData);
txtTitle.setText(title);
txtTitle.setVisibility(View.VISIBLE);
myDatas = new ArrayList<>();
for (int i = 0; i < allData.size(); i++) {
if (allData.get(i).getTitle().equals(title)) {
if (!StringUtils.isEmpty(allData.get(i).getName()))
myDatas.add(allData.get(i));
}
}
LogUtil.e("myDatas size" + myDatas.size());
adapter = new GvZigbeeAdapter(myDatas);
gvDevice.setAdapter(adapter);
}
}
然后根据内容是否设置来显示标题即可。
点击事件使用的是EventBus,由于是公司的项目源码不好拿出来。