image.png
1.依赖
// 侧滑菜单、TabLayout
implementation 'com.android.support:design:28.0.0'
//粘性头部/悬浮头部
implementation 'com.github.qdxxxx:StickyHeaderDecoration:1.0.1'
2.在 Project 的 build.gradle 文件里
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
3.3、Activity 中
private void initData() {
mCars = new ArrayList<>();
mCars.add(new Car("奥迪", "A"));
mCars.add(new Car("阿尔法罗密欧", "A"));
mCars.add(new Car("阿斯顿马丁", "A"));
mCars.add(new Car("ALPINA", "A"));
mCars.add(new Car("安凯客车", "A"));
mCars.add(new Car("本田", "B"));
mCars.add(new Car("别克", "B"));
mCars.add(new Car("奔驰", "B"));
mCars.add(new Car("宝马", "B"));
mCars.add(new Car("保时捷", "B"));
mCars.add(new Car("比亚迪", "B"));
mCars.add(new Car("北京", "B"));
mCars.add(new Car("宾利", "B"));
mCars.add(new Car("巴博斯", "B"));
mCars.add(new Car("布加迪威龙", "B"));
mCars.add(new Car("长安", "C"));
mCars.add(new Car("长城", "C"));
mCars.add(new Car("大众", "D"));
mCars.add(new Car("东南", "D"));
mCars.add(new Car("东风", "D"));
mCars.add(new Car("DS", "D"));
mCars.add(new Car("道奇", "D"));
mCars.add(new Car("东风小康", "D"));
}
private void initView() {
final LayoutInflater inflater = LayoutInflater.from(this);
mRlv = (RecyclerView) findViewById(R.id.rlv);
mRlv.setLayoutManager(new LinearLayoutManager(this));
RlvAdapter rlvAdapter = new RlvAdapter(mCars);
//返回头布局的内容
final NormalDecoration decoration = new NormalDecoration() {
@Override
public String getHeaderName(int i) {
return mCars.get(i).headerName;
}
};
//自定义头布局,可不设置
decoration.setOnDecorationHeadDraw(new NormalDecoration.OnDecorationHeadDraw() {
@Override
public View getHeaderView(final int i) {
View inflate = inflater.inflate(R.layout.item_header, null);
TextView tv = inflate.findViewById(R.id.tv);
tv.setText(mCars.get(i).headerName);
return inflate;
}
});
mRlv.addItemDecoration(decoration);
//头布局的点击事件
decoration.setOnHeaderClickListener(new NormalDecoration.OnHeaderClickListener() {
@Override
public void headerClick(int i) {
Toast.makeText(MainActivity.this, mCars.get(i).headerName, Toast.LENGTH_SHORT).show();
startActivity(new Intent(MainActivity.this,FlowActivity.class));
}
});
mRlv.setAdapter(rlvAdapter);
}
4.粘性头部相当于是RecyclerView中两个条目之间的分割线，在数据如下情况下就可以使用粘性头部
import java.util.ArrayList;
public class NodeBean {
String header;
ArrayList<String> list;
public NodeBean() {
}
public NodeBean(String header, ArrayList<String> list) {
this.header = header;
this.list = list;
}
public String getHeader() {
return header;
}
public void setHeader(String header) {
this.header = header;
}
public ArrayList<String> getList() {
return list;
}
public void setList(ArrayList<String> list) {
this.list = list;
}
}
5.如果item条目中是简短的String类型的数据的时候还可以使用流式布局
image.png
流式布局里的内容就是每一个粘性头部下的数据放到了一起
1.FlowLayout（自定义View，直接复制就可以，在RecyclerView的item布局里引用就可以）
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class FlowLayout extends ViewGroup {
private List<Line> mLines = new ArrayList<Line>(); // 用来记录描述有多少行View
private Line mCurrrenLine; // 用来记录当前已经添加到了哪一行
private int mHorizontalSpace = 40;
private int mVerticalSpace = mHorizontalSpace;
private int mMaxLines = -1;
public int getMaxLines() {
return mMaxLines;
}
public void setMaxLines(int maxLines) {
mMaxLines = maxLines;
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayout(Context context) {
super(context);
}
public void setSpace(int horizontalSpace, int verticalSpace) {
this.mHorizontalSpace = horizontalSpace;
this.mVerticalSpace = verticalSpace;
}
public void clearAll(){
mLines.clear();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 清空
mLines.clear();
mCurrrenLine = null;
int layoutWidth = MeasureSpec.getSize(widthMeasureSpec);
// 获取行最大的宽度
int maxLineWidth = layoutWidth - getPaddingLeft() - getPaddingRight();
// 测量孩子
int count = getChildCount();
for (int i = 0; i < count; i++)
{
View view = getChildAt(i);
// 如果孩子不可见
if (view.getVisibility() == View.GONE)
{
continue;
}
// 测量孩子
measureChild(view, widthMeasureSpec, heightMeasureSpec);
// 往lines添加孩子
if (mCurrrenLine == null)
{
// 说明还没有开始添加孩子
mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);
// 添加到 Lines中
mLines.add(mCurrrenLine);
// 行中一个孩子都没有
mCurrrenLine.addView(view);
}
else
{
// 行不为空,行中有孩子了
boolean canAdd = mCurrrenLine.canAdd(view);
if (canAdd) {
// 可以添加
mCurrrenLine.addView(view);
}
else {
// 不可以添加,装不下去
// 换行
if (mMaxLines >0){
if (mLines.size()<mMaxLines){
// 新建行
mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);
// 添加到lines中
mLines.add(mCurrrenLine);
// 将view添加到line
mCurrrenLine.addView(view);
}
}else {
// 新建行
mCurrrenLine = new Line(maxLineWidth, mHorizontalSpace);
// 添加到lines中
mLines.add(mCurrrenLine);
// 将view添加到line
mCurrrenLine.addView(view);
}
}
}
}
// 设置自己的宽度和高度
int measuredWidth = layoutWidth;
// paddingTop + paddingBottom + 所有的行间距 + 所有的行的高度
float allHeight = 0;
for (int i = 0; i < mLines.size(); i++)
{
float mHeigth = mLines.get(i).mHeigth;
// 加行高
allHeight += mHeigth;
// 加间距
if (i != 0)
{
allHeight += mVerticalSpace;
}
}
int measuredHeight = (int) (allHeight + getPaddingTop() + getPaddingBottom() + 0.5f);
setMeasuredDimension(measuredWidth, measuredHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
// 给Child 布局---> 给Line布局
int paddingLeft = getPaddingLeft();
int offsetTop = getPaddingTop();
for (int i = 0; i < mLines.size(); i++)
{
Line line = mLines.get(i);
// 给行布局
line.layout(paddingLeft, offsetTop);
offsetTop += line.mHeigth + mVerticalSpace;
}
}
class Line
{
// 属性
private List<View> mViews = new ArrayList<View>(); // 用来记录每一行有几个View
private float mMaxWidth; // 行最大的宽度
private float mUsedWidth; // 已经使用了多少宽度
private float mHeigth; // 行的高度
private float mMarginLeft;
private float mMarginRight;
private float mMarginTop;
private float mMarginBottom;
private float mHorizontalSpace; // View和view之间的水平间距
// 构造
public Line(int maxWidth, int horizontalSpace) {
this.mMaxWidth = maxWidth;
this.mHorizontalSpace = horizontalSpace;
}
// 方法
/**
* 添加view，记录属性的变化
*
* @param view
*/
public void addView(View view)
{
// 加载View的方法
int size = mViews.size();
int viewWidth = view.getMeasuredWidth();
int viewHeight = view.getMeasuredHeight();
// 计算宽和高
if (size == 0)
{
// 说还没有添加View
if (viewWidth > mMaxWidth)
{
mUsedWidth = mMaxWidth;
}
else
{
mUsedWidth = viewWidth;
}
mHeigth = viewHeight;
}
else
{
// 多个view的情况
mUsedWidth += viewWidth + mHorizontalSpace;
mHeigth = mHeigth < viewHeight ? viewHeight : mHeigth;
}
// 将View记录到集合中
mViews.add(view);
}
/**
* 用来判断是否可以将View添加到line中
*
* @param view
* @return
*/
public boolean canAdd(View view)
{
// 判断是否能添加View
int size = mViews.size();
if (size == 0) { return true; }
int viewWidth = view.getMeasuredWidth();
// 预计使用的宽度
float planWidth = mUsedWidth + mHorizontalSpace + viewWidth;
if (planWidth > mMaxWidth)
{
// 加不进去
return false;
}
return true;
}
/**
* 给孩子布局
*
* @param offsetLeft
* @param offsetTop
*/
public void layout(int offsetLeft, int offsetTop)
{
// 给孩子布局
int currentLeft = offsetLeft;
int size = mViews.size();
// 判断已经使用的宽度是否小于最大的宽度
float extra = 0;
float widthAvg = 0;
if (mMaxWidth > mUsedWidth)
{
extra = mMaxWidth - mUsedWidth;
widthAvg = extra / size;
}
for (int i = 0; i < size; i++)
{
View view = mViews.get(i);
int viewWidth = view.getMeasuredWidth();
int viewHeight = view.getMeasuredHeight();
// 判断是否有富余
if (widthAvg != 0)
{
// 改变宽度,变为不改变,避免最后一行因label不足,单个label变宽
//int newWidth = (int) (viewWidth + widthAvg + 0.5f);
int newWidth = viewWidth;
int widthMeasureSpec = MeasureSpec.makeMeasureSpec(newWidth, MeasureSpec.EXACTLY);
int heightMeasureSpec = MeasureSpec.makeMeasureSpec(viewHeight, MeasureSpec.EXACTLY);
view.measure(widthMeasureSpec, heightMeasureSpec);
viewWidth = view.getMeasuredWidth();
viewHeight = view.getMeasuredHeight();
}
// 布局
int left = currentLeft;
int top = (int) (offsetTop + (mHeigth - viewHeight) / 2 +
0.5f);
// int top = offsetTop;
int right = left + viewWidth;
int bottom = top + viewHeight;
view.layout(left, top, right, bottom);
currentLeft += viewWidth + mHorizontalSpace;
}
}
}
}
2.RecyclerView的item布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.lenovo.day04.widget.FlowLayout
android:id="@+id/fl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.example.lenovo.day04.widget.FlowLayout>
</LinearLayout>
3.在RecyclerView的适配器的onBindViewHolder()方法里
NodeBean 就是上面提到的数据的 bean 类
@Override
public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
NodeBean nodeBean = recyclerviewList.get(i);
ArrayList<String> list = nodeBean.getList();
// 清空 fl 里的数据，不然会把其他集合里的数据添加进来
viewHolder.fl.removeAllViews();
for (int j = 0; j < list.size(); j++) {
//获取视图,视图可以自定义,可以添加自己想要的效果
TextView label = (TextView) View.inflate(context, R.layout.item_label, null);
//获取数据
final String data = list.get(j);
//绑定数据
label.setText(data);
// 监听方法
label.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
//加到容器中,parent是FlowLayout
viewHolder.fl.addView(label);
}
}
网友评论