效果如图,如果内容过长,流式布局可以实现自动换行
image.png
不需要依赖其实算得上是自定义的View
1.使用时是在RecyclerView的环境下所以布局还是
<android.support.v7.widget.RecyclerView
android:id="@+id/rec"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
2。先说一下配置吧 创建一个类FlowLayout ,主要的类
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;
}
}
}
}
3.label布局,item_label
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:maxLines="1"
android:ellipsize="end"
android:gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:background="@drawable/bg_e7e7e7_r30"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:textColor="@color/c_636363"
android:textSize="14sp"/>
4.使用的背景bg_e7e7e7_r30,在drawable中创建
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="@color/c_e7e7e7"/>
</shape>
配置完成
二.使用
使用的代码
for (int i = 0; i < list.size(); i++) {
//获取视图,视图可以自定义,可以添加自己想要的效果
TextView label = (TextView) View.inflate(mContext, R.layout.item_label, null);
//获取数据
final String data = list.get(i);
//绑定数据
label.setText(data);
label.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast(data);
}
});
//加到容器中,parent是FlowLayout
parent.addView(label);
}
大多数使用在adapter中
@Override
public void onBindViewHolder(@NonNull MayDay holder, int position) {
MayDay vh = (MayDay) holder;
List<TiXi.DataBean.ArticlesBean> articles = list.get(position).getArticles();
if (articles != null && articles.size()>0){
for (int i = 0; i < articles.size(); i++) {
String data = articles.get(i).getTitle();
//获取视图,视图可以自定义,可以添加自己想要的效果
TextView label = (TextView) View.inflate(context, R.layout.item_label, null);
//绑定数据
label.setText(data);
final String finalData = data;
label.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ToastUtil.showShort(finalData);
}
});
//加到容器中,parent是FlowLayout
vh.fl.addView(label);
}
}
}
2.第二种方式
文字(图片)样式的flowlayout:
/**
* 一种流式布局的LayoutManager
*/
public class FlowLayoutManager extends RecyclerView.LayoutManager {
private static final String TAG = FlowLayoutManager.class.getSimpleName();
final FlowLayoutManager self = this;
protected int width, height;
private int left, top, right;
//最大容器的宽度
private int usedMaxWidth;
//竖直方向上的偏移量
private int verticalScrollOffset = 0;
public int getTotalHeight() {
return totalHeight;
}
//计算显示的内容的高度
protected int totalHeight = 0;
private Row row = new Row();
private List<Row> lineRows = new ArrayList<>();
//保存所有的Item的上下左右的偏移量信息
private SparseArray<Rect> allItemFrames = new SparseArray<>();
public FlowLayoutManager() {
//设置主动测量规则,适应recyclerView高度为wrap_content
setAutoMeasureEnabled(true);
}
//每个item的定义
public class Item {
int useHeight;
View view;
public void setRect(Rect rect) {
this.rect = rect;
}
Rect rect;
public Item(int useHeight, View view, Rect rect) {
this.useHeight = useHeight;
this.view = view;
this.rect = rect;
}
}
//行信息的定义
public class Row {
public void setCuTop(float cuTop) {
this.cuTop = cuTop;
}
public void setMaxHeight(float maxHeight) {
this.maxHeight = maxHeight;
}
//每一行的头部坐标
float cuTop;
//每一行需要占据的最大高度
float maxHeight;
//每一行存储的item
List<Item> views = new ArrayList<>();
public void addViews(Item view) {
views.add(view);
}
}
@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
//该方法主要用来获取每一个item在屏幕上占据的位置
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
Log.d(TAG, "onLayoutChildren");
totalHeight = 0;
int cuLineTop = top;
//当前行使用的宽度
int cuLineWidth = 0;
int itemLeft;
int itemTop;
int maxHeightItem = 0;
row = new Row();
lineRows.clear();
allItemFrames.clear();
removeAllViews();
if (getItemCount() == 0) {
detachAndScrapAttachedViews(recycler);
verticalScrollOffset = 0;
return;
}
if (getChildCount() == 0 && state.isPreLayout()) {
return;
}
//onLayoutChildren方法在RecyclerView 初始化时 会执行两遍
detachAndScrapAttachedViews(recycler);
if (getChildCount() == 0) {
width = getWidth();
height = getHeight();
left = getPaddingLeft();
right = getPaddingRight();
top = getPaddingTop();
usedMaxWidth = width - left - right;
}
for (int i = 0; i < getItemCount(); i++) {
Log.d(TAG, "index:" + i);
View childAt = recycler.getViewForPosition(i);
if (View.GONE == childAt.getVisibility()) {
continue;
}
measureChildWithMargins(childAt, 0, 0);
int childWidth = getDecoratedMeasuredWidth(childAt);
int childHeight = getDecoratedMeasuredHeight(childAt);
int childUseWidth = childWidth;
int childUseHeight = childHeight;
//如果加上当前的item还小于最大的宽度的话
if (cuLineWidth + childUseWidth <= usedMaxWidth) {
itemLeft = left + cuLineWidth;
itemTop = cuLineTop;
Rect frame = allItemFrames.get(i);
if (frame == null) {
frame = new Rect();
}
frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
allItemFrames.put(i, frame);
cuLineWidth += childUseWidth;
maxHeightItem = Math.max(maxHeightItem, childUseHeight);
row.addViews(new Item(childUseHeight, childAt, frame));
row.setCuTop(cuLineTop);
row.setMaxHeight(maxHeightItem);
} else {
//换行
formatAboveRow();
cuLineTop += maxHeightItem;
totalHeight += maxHeightItem;
itemTop = cuLineTop;
itemLeft = left;
Rect frame = allItemFrames.get(i);
if (frame == null) {
frame = new Rect();
}
frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
allItemFrames.put(i, frame);
cuLineWidth = childUseWidth;
maxHeightItem = childUseHeight;
row.addViews(new Item(childUseHeight, childAt, frame));
row.setCuTop(cuLineTop);
row.setMaxHeight(maxHeightItem);
}
//不要忘了最后一行进行刷新下布局
if (i == getItemCount() - 1) {
formatAboveRow();
totalHeight += maxHeightItem;
}
}
totalHeight = Math.max(totalHeight, getVerticalSpace());
Log.d(TAG, "onLayoutChildren totalHeight:" + totalHeight);
fillLayout(recycler, state);
}
//对出现在屏幕上的item进行展示，超出屏幕的item回收到缓存中
private void fillLayout(RecyclerView.Recycler recycler, RecyclerView.State state) {
if (state.isPreLayout() || getItemCount() == 0) { // 跳过preLayout，preLayout主要用于支持动画
return;
}
// 当前scroll offset状态下的显示区域
Rect displayFrame = new Rect(getPaddingLeft(), getPaddingTop() + verticalScrollOffset,
getWidth() - getPaddingRight(), verticalScrollOffset + (getHeight() - getPaddingBottom()));
//对所有的行信息进行遍历
for (int j = 0; j < lineRows.size(); j++) {
Row row = lineRows.get(j);
float lineTop = row.cuTop;
float lineBottom = lineTop + row.maxHeight;
//如果该行在屏幕中，进行放置item
// if (lineTop < displayFrame.bottom && displayFrame.top < lineBottom) {
List<Item> views = row.views;
for (int i = 0; i < views.size(); i++) {
View scrap = views.get(i).view;
measureChildWithMargins(scrap, 0, 0);
addView(scrap);
Rect frame = views.get(i).rect;
//将这个item布局出来
layoutDecoratedWithMargins(scrap,
frame.left,
frame.top - verticalScrollOffset,
frame.right,
frame.bottom - verticalScrollOffset);
}
// } else {
// //将不在屏幕中的item放到缓存中
// List<Item> views = row.views;
// for (int i = 0; i < views.size(); i++) {
// View scrap = views.get(i).view;
// removeAndRecycleView(scrap, recycler);
// }
// }
}
}
/**
* 计算每一行没有居中的viewgroup，让居中显示
*/
private void formatAboveRow() {
List<Item> views = row.views;
for (int i = 0; i < views.size(); i++) {
Item item = views.get(i);
View view = item.view;
int position = getPosition(view);
//如果该item的位置不在该行中间位置的话，进行重新放置
if (allItemFrames.get(position).top < row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2) {
Rect frame = allItemFrames.get(position);
if (frame == null) {
frame = new Rect();
}
frame.set(allItemFrames.get(position).left, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2),
allItemFrames.get(position).right, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2 + getDecoratedMeasuredHeight(view)));
allItemFrames.put(position, frame);
item.setRect(frame);
views.set(i, item);
}
}
row.views = views;
lineRows.add(row);
row = new Row();
}
/**
* 竖直方向需要滑动的条件
*
* @return
*/
@Override
public boolean canScrollVertically() {
return true;
}
//监听竖直方向滑动的偏移量
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler,
RecyclerView.State state) {
Log.d("TAG", "totalHeight:" + totalHeight);
//实际要滑动的距离
int travel = dy;
//如果滑动到最顶部
if (verticalScrollOffset + dy < 0) {//限制滑动到顶部之后，不让继续向上滑动了
travel = -verticalScrollOffset;//verticalScrollOffset=0
} else if (verticalScrollOffset + dy > totalHeight - getVerticalSpace()) {//如果滑动到最底部
travel = totalHeight - getVerticalSpace() - verticalScrollOffset;//verticalScrollOffset=totalHeight - getVerticalSpace()
}
//将竖直方向的偏移量+travel
verticalScrollOffset += travel;
// 平移容器内的item
offsetChildrenVertical(-travel);
fillLayout(recycler, state);
return travel;
}
private int getVerticalSpace() {
return self.getHeight() - self.getPaddingBottom() - self.getPaddingTop();
}
public int getHorizontalSpace() {
return self.getWidth() - self.getPaddingLeft() - self.getPaddingRight();
}
}
2.使用的话其实就是现在适配器中添加一个方法
public int dp2px(float value, Resources resources) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, resources.getDisplayMetrics());
}
3.使用 (在正常绑定适配器是需要在添加一个流失布局)就是上面的工具类
//流失布局
FlowLayoutManager flowLayoutManager = new FlowLayoutManager();
rv.addItemDecoration(new SpaceItemDecoration(mReMenAdapter.dp2px(10,getResources())));
rv.setLayoutManager(flowLayoutManager);
