Effect picture
Principle description:
- The outermost layer is ScrollView, wrapping other display content + grouping list (using third-party ListView: NestFullListView)
- The grouping list uses LinearLayout left and right layout, the left control expansion/contraction control is CheckBox, the middle is the dividing line, and the right list also uses NestFullListView
- The contraction/expansion is set to NestFullListView by recreating the Adapter with different data volume
NestFullListView
Click to view NestFullListView usage
I just copied in this project NestFullListView among NestFullListView.java , NestFullListViewAdapter.java , NestFullViewHolder.java three files to use.
Code
Because it is relatively simple to use, so directly paste the code
1. The xml layout file of the page
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
tools:context="com.example.zpf.animmenu.GroupListActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#e671df">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="这个就是当做其他的布局，所以很随意啦"
android:gravity="center"
android:textColor="#ffffff"
tools:ignore="HardcodedText" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="给个标题"
android:background="#dadada"
android:lines="1"
android:textSize="12sp"/>
<customview.nestfulllistview.NestFullListView
android:id="@+id/nflv_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:divider="@drawable/shape_divider_group"
android:showDividers="middle"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
2. The java code of the page
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
import customview.nestfulllistview.NestFullListView;
import customview.nestfulllistview.NestFullListViewAdapter;
import customview.nestfulllistview.NestFullViewHolder;
import model.GroupItemModel;
import model.GroupModel;
public class GroupListActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_group_list);
initView();
}
private void initView() {
//制造假数据
ArrayList<GroupModel> groupModels = new ArrayList<>();
for (int i=0; i<5; i++) {
GroupModel groupModel = new GroupModel();
String groupTitle = "第" + i + "组";
groupModel.setGroupTitle(groupTitle);
ArrayList<GroupItemModel> itemModels = new ArrayList<>();
for (int j=0; j<5; j++) {
GroupItemModel itemModel = new GroupItemModel();
itemModel.setTitle(groupTitle + j + "分队");
itemModel.setUrl("这是是url你晓得不?第" + j + "条");
itemModels.add(itemModel);
}
groupModel.setItemModels(itemModels);
groupModels.add(groupModel);
}
//NestFullListView的使用请参考Github，项目地址：https://github.com/mcxtzhang/NestFullListView
NestFullListView nestFullListView = (NestFullListView) findViewById(R.id.nflv_group);
nestFullListView.setAdapter(
new NestFullListViewAdapter<GroupModel>(R.layout.item_group_nflv, groupModels) {
@Override
public void onBind(int pos, GroupModel groupModel, NestFullViewHolder holder) {
holder.setText(R.id.cb_nflv, groupModel.getGroupTitle());
final NestFullListView nflvInner = holder.getView(R.id.nflv_inner);
final List<GroupItemModel> itemModels = groupModel.getItemModels();
nflvInner.setAdapter(getInnerAdapter(itemModels, false));
CheckBox cb = holder.getView(R.id.cb_nflv);
cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
nflvInner.setAdapter(getInnerAdapter(itemModels, b));
}
});
}
});
}
/**
* 重新获取要设置显示的Adapter
* @param isChecked 展开、收缩CheckBox是否选中,默认不展开
* */
private NestFullListViewAdapter<GroupItemModel> getInnerAdapter(
List<GroupItemModel> models, boolean isChecked) {
if (models == null)
return null;
//展开显示全部数据，未展开显示两条数据
List<GroupItemModel> showModels = isChecked ? models :
(models.size() > 2 ? models.subList(0, 2) : models);
NestFullListViewAdapter<GroupItemModel> adapter =
new NestFullListViewAdapter<GroupItemModel>(R.layout.item_group_item_nflv, showModels) {
@Override
public void onBind(int pos, GroupItemModel groupItemModel, NestFullViewHolder holder) {
TextView tv = holder.getView(R.id.tv_group_inner);
tv.setText(groupItemModel.getTitle());
final String url = groupItemModel.getUrl();
tv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(GroupListActivity.this, url, Toast.LENGTH_SHORT).show();
}
});
}
};
return adapter;
}
}3. The first layer grouped item layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<CheckBox
android:id="@+id/cb_nflv"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:button="@null"
android:drawableTop="@mipmap/ic_nflv_group_icon"
android:drawablePadding="4dp"
android:drawableBottom="@drawable/selector_nflv_checkbox_arrow"/>
<View
android:layout_width="0.4dp"
android:layout_height="match_parent"
android:background="#dadada"/>
<customview.nestfulllistview.NestFullListView
android:id="@+id/nflv_inner"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:orientation="vertical"
android:showDividers="middle"/>
</LinearLayout>4. The item layout file for the inner content of a single group (just a TextView)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="48dp">
<TextView
android:id="@+id/tv_group_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:drawableRight="@mipmap/ic_arrow_right_group"
android:paddingLeft="16dp"
android:paddingRight="16dp"/>
</LinearLayout>5. The dividing line used in the code, Drawable and CheckBox switch, Selector and pictures, you can write by yourself and find pictures to replace.
That's all! The amount of code is not much, and the use of NestFullListView is not difficult. For specific use, please refer to the author's github. Hope this blog post can help colleagues in need.