Android进阶之路 - 双列表联动效果
此篇博文是一个在项目中很常用，但是写起来却比较简单的demo，我已经优化过了代码~
下一篇博文也会基于此篇博文，增加一种项目中常用的联动效果！
数据方式：
一次性全部拉完，自己划分数据区域（本文所用方式）
动态请求接口更新数据，左侧tab首次请求的列表，每点击左侧tab之后请求接口返回数据用于填充右侧数据（较简单，但是接口压力增加）
效果描述：
Effect 1 (只有左侧点击效果)：
Effect 2 (左侧点击效果与右侧滑动联动左侧的效果)：
辅助代码
Moudel划分（左侧班级 - 右侧学生）
- ClassModel
package com.advance.yongliu.linkagedata;
import java.util.List;
/**
* author YongLiu
* date 2018/8/9.
* desc:
*/
public class ClassModel {
private int id;
private String name;
private List list;
public ClassModel() {
super();
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
}
- StudentModel
package com.advance.yongliu.linkagedata;
/**
* author YongLiu
* date 2018/8/9.
* desc:
*/
public class StudentModel {
public String name;
public int age;
public int outId;
public StudentModel() {
super();
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public int getOutId() {
return outId;
}
public void setOutId(int outId) {
this.outId = outId;
}
}
俩侧列表的adapter（这里我用的是BaseQuickAdapter，强烈建议你使用，很方便！扩展性也好！）
- ClassAdapter
package com.advance.yongliu.linkagedata;
import android.graphics.Color;
import android.support.annotation.Nullable;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import java.util.List;
/**
* author YongLiu
* date 2018/8/9.
* desc:
*/
public class ClassAdapter extends BaseQuickAdapter<ClassModel, BaseViewHolder> {
private int position;
public ClassAdapter(int layoutResId, @Nullable List data) {
super(layoutResId, data);
}
@Override
protected void convert(BaseViewHolder helper, ClassModel item) {
helper.setTextColor(R.id.tv_class_name, helper.getLayoutPosition() == position ? Color.parseColor("#8470FF") : Color.parseColor("#363636"));
helper.setText(R.id.tv_class_name, item.getName());
}
public void setSelection(int pos) {
this.position = pos;
notifyDataSetChanged();
}
}
- StudentAdapter
package com.advance.yongliu.linkagedata;
import android.support.annotation.Nullable;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import java.util.List;
/**
* author YongLiu
* date 2018/8/9.
* desc:
*/
public class StudentAdapter extends BaseQuickAdapter<StudentModel, BaseViewHolder> {
public StudentAdapter(int layoutResId, @Nullable List data) {
super(layoutResId, data);
}
@Override
protected void convert(BaseViewHolder helper, StudentModel item) {
helper.setText(R.id.tv_name, item.getName()+"").setText(R.id.tv_age, item.getAge()+"");
}
}
正式使用代码
MainActivity内的模拟Json数据：
[{"id":1,"list":[{"age":0,"name":"小明0","outId":1},{"age":1,"name":"小明1","outId":1}],"name":"一年级"},{"id":2,"list":[{"age":0,"name":"小红0","outId":2},{"age":1,"name":"小红1","outId":2},{"age":2,"name":"小红2","outId":2}],"name":"二年级"}]- Effect 1 : MainActivity
package com.advance.yongliu.linkagedata;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import com.alibaba.fastjson.JSON;
import com.chad.library.adapter.base.BaseQuickAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRvClass;
private RecyclerView mRvStudent;
private ClassAdapter classAdapter;
private StudentAdapter studentAdapter;
private String jsonData;
private List studentList;
private List classAllList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simulationsData();
initView();
initData();
initAdapter();
}
private void initView() {
mRvClass = findViewById(R.id.rv_class);
mRvStudent = findViewById(R.id.rv_student);
}
private void initData() {
/**
* 解析数据
* */
studentList = new ArrayList<>();
classAllList = JSON.parseArray(jsonData, ClassModel.class);
/**
* 设置默认数据
* */
studentList.clear();
studentList.addAll(classAllList.get(0).getList());
}
private void initAdapter() {
classAdapter = new ClassAdapter(R.layout.class_layout, classAllList);
mRvClass.setLayoutManager(new LinearLayoutManager(this));
mRvClass.setAdapter(classAdapter);
//设置默认的选取状态
classAdapter.setSelection(0);
studentAdapter = new StudentAdapter(R.layout.student_layout, studentList);
mRvStudent.setLayoutManager(new LinearLayoutManager(this));
mRvStudent.setAdapter(studentAdapter);
/**
* 左侧列表的事件处理
* */
classAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
@Override
public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
classAdapter.setSelection(position);
studentList.clear();
studentList.addAll(classAllList.get(position).getList());
studentAdapter.notifyDataSetChanged();
}
});
}
/**
* 数据模拟 - 可忽略 ，一般这里的数据都是后台网络请求之后返回的
*/
private void simulationsData() {
List classList = new ArrayList<>();
List studentList1 = new ArrayList<>();
List studentList2 = new ArrayList<>();
for (int i = 0; i < 2; i++) {
StudentModel studentModel = new StudentModel();
studentModel.setName("小明" + i);
studentModel.setAge(i);
studentModel.setOutId(1);
studentList1.add(studentModel);
}
for (int i = 0; i < 3; i++) {
StudentModel studentModel = new StudentModel();
studentModel.setName("小红" + i);
studentModel.setAge(i);
studentModel.setOutId(2);
studentList2.add(studentModel);
}
ClassModel classModel = new ClassModel();
classModel.setList(studentList1);
classModel.setId(1);
classModel.setName("一年级");
ClassModel classMode2 = new ClassModel();
classMode2.setList(studentList2);
classMode2.setId(2);
classMode2.setName("二年级");
classList.add(classModel);
classList.add(classMode2);
jsonData = JSON.toJSONString(classList);
Log.e("tag", jsonData);
}
}
- Effect 2 : MainActivity
package com.advance.yongliu.linkagedata;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import com.alibaba.fastjson.JSON;
import com.chad.library.adapter.base.BaseQuickAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRvClass;
private RecyclerView mRvStudent;
private ClassAdapter classAdapter;
private StudentAdapter studentAdapter;
private String jsonData;
private List studentList;
private List classAllList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simulationsData();
initView();
initData();
initAdapter();
}
private void initView() {
mRvClass = findViewById(R.id.rv_class);
mRvStudent = findViewById(R.id.rv_student);
}
private void initData() {
/**
* 解析数据
* */
studentList = new ArrayList<>();
classAllList = JSON.parseArray(jsonData, ClassModel.class);
/**
* 设置默认数据
* */
studentList.clear();
for (int i = 0; i < classAllList.size(); i++) {
studentList.addAll(classAllList.get(i).getList());
}
}
private void initAdapter() {
classAdapter = new ClassAdapter(R.layout.class_layout, classAllList);
mRvClass.setLayoutManager(new LinearLayoutManager(this));
mRvClass.setAdapter(classAdapter);
//设置默认的选取状态
classAdapter.setSelection(0);
studentAdapter = new StudentAdapter(R.layout.student_layout, studentList);
mRvStudent.setLayoutManager(new LinearLayoutManager(this));
mRvStudent.setAdapter(studentAdapter);
/**
* 左侧列表的事件处理
* */
classAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
@Override
public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
classAdapter.setSelection(position);
//临时变量记录当前左侧选中条目的子集数据长度
int sum = 0;
for (int i = 0; i < position; i++) {
sum += classAllList.get(i).getList().size();
}
//根据左侧，定位右侧的展示数据
LinearLayoutManager layoutManager = (LinearLayoutManager) mRvStudent.getLayoutManager();
layoutManager.scrollToPositionWithOffset(sum, 0);
}
});
mRvStudent.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//获取滚动时的第一条展示的position
LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition();
//获取右侧数据的关联id
StudentModel studentModel = studentList.get(firstVisibleItemPosition);
int outId = studentModel.getOutId();
//记录外部id， 更新左侧状态栏状态
int pos = 0;
for (int i = 0; i < classAllList.size(); i++) {
int id = classAllList.get(i).getId();
if ((outId == id)) {
pos = i;
}
}
classAdapter.setSelection(pos);
}
});
}
/**
* 数据模拟 - 可忽略 ，一般这里的数据都是后台网络请求之后返回的
*/
private void simulationsData() {
List classList = new ArrayList<>();
List studentList1 = new ArrayList<>();
List studentList2 = new ArrayList<>();
for (int i = 0; i < 15; i++) {
StudentModel studentModel = new StudentModel();
studentModel.setName("小明" + i);
studentModel.setAge(i);
studentModel.setOutId(1);
studentList1.add(studentModel);
}
for (int i = 0; i < 20; i++) {
StudentModel studentModel = new StudentModel();
studentModel.setName("小红" + i);
studentModel.setAge(i);
studentModel.setOutId(2);
studentList2.add(studentModel);
}
ClassModel classModel = new ClassModel();
classModel.setList(studentList1);
classModel.setId(1);
classModel.setName("一年级");
ClassModel classMode2 = new ClassModel();
classMode2.setList(studentList2);
classMode2.setId(2);
classMode2.setName("二年级");
classList.add(classModel);
classList.add(classMode2);
jsonData = JSON.toJSONString(classList);
Log.e("tag", jsonData);
}
}
- MainActivity Xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="com.advance.yongliu.linkagedata.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_class"
android:layout_width="90dp"
android:layout_height="match_parent"/>
<View
android:layout_width="1dp"
android:background="#363636"
android:layout_height="match_parent"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_student"
android:layout_width="match_parent"
android:layout_marginLeft="10dp"
android:layout_height="match_parent"/>
LinearLayout>