相信大家在做应用的时候经常会遇到显示标签的情况，例如（“上班族，天枰座”这样的），若干个标签长短不一，每个标签之间还有一定的间隙，并且一行显示不下之后，下一个标签显示就需要换行，本篇文章就自定义一个View，来实现所说的这个效果。
首先我们先来看看实现以后是什么样的：
Paste_Image.png
通过这个实际的实现效果我们可以做出下面的分析：
1.每个item的宽度不同
2.行/列之间有间隔
3.数据和布局进行分离，并且布局可以自定义，于是我们考虑利用android的adapter的特性进行实现
4.有自动换行的功能
这个View大概要实现上面的效果，下面就开始撸码：
先建立好这个View，继承自ViewGroup：
public class TagView extends ViewGroup {
}
为了让其使用更加灵活，我们自定义几个属性：
<declare-styleable name="TagView">
<attr name="maxLine" format="integer" />//最多允许多少行，超过的就不进行显示了
<attr name="itemSpace" format="dimension" />//每个item之间的宽度（每行的高度，也可以多定义一个高度）
<attr name="gravity" format="enum">////子View摆放时贴着父布局上边还是下边
<enum name="top" value="1" />
<enum name="bottom" value="2" />
</attr>
</declare-styleable>
定义好了以后，我们就可以在XML文件里画布局了：
<com.test.xiao.TagView
android:id="@+id/gv_tag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/iv_photo"
android:layout_alignParentLeft="true"
android:layout_below="@id/tv_content"
android:layout_toLeftOf="@id/iv_photo"
app:gravity="bottom"//贴着下边进行摆放
app:itemSpace="3dp"
app:maxLine="2" />
item的布局如下：
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tv_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_main_tag_sub"//橙色的背景
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:paddingBottom="1dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:paddingTop="1dp"
android:text="TextView01"
android:textColor="@color/white"
android:textSize="@dimen/ss_small_textSize" />
好了，这些准备工作完成以后，我们就可以开始实现View的功能了，首先定义好相关变量并进行初始化：
public class TagView extends ViewGroup {
private int itemSpace = 0;//item之间的间距
private Adapter mAdapter;//获取数据和子item的适配器，这个adapter就是android原生提供的adapter
private int ORIENTATION;//方向值，可以取VERTICAL,HORIZONTAL（项目中暂时未用到垂直需求，所以暂时不需要）
private SparseArray<SparseArray<View>> views;//用于记录第几行，第几个item
private SparseArray<Integer> maxHeights;//记录每行的最大高度
private int maxLine;//设置最大的行数
private int gravity;//子View贴着上边还是下边（默认上边）,1是上边，2是下边
public TagView(Context context) {
super(context);
init(null);
}
public TagView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public TagView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private void init(AttributeSet attributeSet) {
views = new SparseArray<>();
maxHeights = new SparseArray();
if (attributeSet == null) {
itemSpace = Utils.dp2px(getContext(), 5);
maxLine = 10;// 默认最大行数
} else {
TypedArray array = getContext().obtainStyledAttributes(attributeSet, R.styleable.TagView);
itemSpace = array.getDimensionPixelSize(R.styleable.TagView_itemSpace, Utils.dp2px(getContext(), 10));
gravity = array.getInt(R.styleable.TagView_gravity, 1);
maxLine = array.getInt(R.styleable.TagView_maxLine, 10);
array.recycle();
}
}
}
接下来我们需要在onMeasure里通过adapter获取到相关的view，并且测量出每个view的宽度和高度，根据宽度来计算出我们需要多少行，每行分别需要列来放这些item：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int needWidth = MeasureSpec.getSize(widthMeasureSpec);
int needHeihgt = MeasureSpec.getSize(heightMeasureSpec);
int parentWidthMeasureSpec = MeasureSpec.makeMeasureSpec(needWidth, MeasureSpec.getMode(widthMeasureSpec));
int parentHeightMeasureSpec = MeasureSpec.makeMeasureSpec(needHeihgt, MeasureSpec.getMode(heightMeasureSpec));
if (mAdapter != null && mAdapter.getCount() > 0) {//如果adapter没有数据，则不进行绘制，直接调用super.onMeasure
View child = null;//从adaper中获取的子View
int childWidth = 0;//子View的宽度
int currentLineWidth = 0;//当前行的总宽度
int currentLine = 0;//当前是第几行
int currentElement = 0;//当前行的第几个元素
int maxHeight = 0;//当前行的最大高度
int resultHeihgt = 0;//通过子View的测量情况最终算出来的父View高度
boolean isMaxLine = false;//当前是否已经到达最大行
for (int i = 0; i < mAdapter.getCount(); i++) {//通过adapter来遍历测量所有的子View
if (currentLine == maxLine) {//到达最大行数时，如果还有下一行，我们就不进行显示了
isMaxLine = true;
break;
}
child = mAdapter.getView(i, null, this);
measureChild(child, parentWidthMeasureSpec, parentHeightMeasureSpec);//获取子控件大小
childWidth = child.getMeasuredWidth();
if (currentLineWidth == 0) {//已经到达新的一行
views.put(currentLine, new SparseArray<>());//新建一个用来存放新的一行元素的集合
}
if (childWidth + itemSpace + currentLineWidth > needWidth) {//需要换行
resultHeihgt += maxHeight + itemSpace;
maxHeights.put(currentLine, maxHeight);
currentLine++;
currentLineWidth = 0;
currentElement = 0;
i--;
} else {
if (child.getMeasuredHeight() > maxHeight) {
maxHeight = child.getMeasuredHeight();//计算本行的最大高度，在layout时，每行的高度就以最大高度为准
}
views.get(currentLine).put(currentElement, child);//在测量完了，并且分析好这个元素的位置后，将其放入集合中，待之后onLayout时进行摆放
currentElement++;
currentLineWidth += itemSpace + childWidth;
}
}
if (resultHeihgt == 0) {//当前item仅有一行
resultHeihgt = maxHeight;
maxHeights.put(0, maxHeight);
} else {//当前item不止一行，且未到达最大行数限制，到这里时，需要补齐最后一行的高度数据
if (!isMaxLine) {
resultHeihgt += maxHeight;//
maxHeights.put(currentLine, maxHeight);
}
}
setMeasuredDimension(needWidth, resultHeihgt);//设置最终的宽高
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
通过onMeasure，我们通过每个item的宽高计算出了TagView的宽高，要显示的行数，每行的高度以及每行的元素及其所处的位置（存放到了views中），通过这些得到的内容，接下来我们就要在onLayout中计算出每个item应该摆放的具体位置了：
//在这个方法里我们要确定每个View摆放的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (mAdapter != null && mAdapter.getCount() > 0) {
View view;//当前要进行摆放的子View
View lastView;//当前摆放的子View左边的View
int childLeft, childRight, childTop, childBottom;
for (int i = 0; i < views.size() && i < maxLine; i++) {//这个循环用来循环行数
for (int j = 0; j < views.get(i).size(); j++) {//这个循环用来循环每行的列数
view = views.get(i).get(j);//第i行第j个元素
childLeft = 0;
for (int k = 0; k < j; k++) {//通过前面所有View的宽度相加，得到当前子View的left位置
lastView = views.get(i).get(k);
childLeft += lastView.getMeasuredWidth() + itemSpace;
}
childRight = childLeft + view.getMeasuredWidth();
//确定子View上下的位置，根据gravity的不同（1是靠近父View顶部摆放，2是靠近父View底部摆放）
if (gravity == 1) {
childTop = 0;
for (int k = 0; k < i; k++) {//通过前面所有高度行数相加，得到最终的上边位置
childTop += maxHeights.get(k) + itemSpace;
}
} else {
childTop = b - t;//b-t为最后一行的底部
for (int k = views.size() - 1 - i; k >= 0; k--) {//第一行的top位置是从最底部算起，后面所有行的高度+自身的高度值+行与行之间的空隙
childTop -= (maxHeights.get(k) + itemSpace);
}
childTop += itemSpace;//这里要加上多减去的空间
}
childBottom = childTop + view.getMeasuredHeight();
view.layout(childLeft, childTop, childRight, childBottom);
addView(view);
}
}
}
}
对于adapter，我们要给出一个可以进行设置的方法：
public void setAdapter(Adapter adapter) {
mAdapter = adapter;
invalidate();
}
使用的时候，我们这样使用（采用的是效果图中的数据）：
String[] testTags = new String[]{"ssssss", "大家得人生", "ssdsjdj", "我们和小李都有", "放下一切", "大大大大大大多多"};
public void onCreate(Bundle saveInstanceStates){
...
TagView gv_tag = findViewById(R.layout.gv_tag);
gv_tag.setAdapter(new ArrayAdapter<>(context, R.layout.item_main_grid_sub_tag, R.id.tv_item, data.getTags()));//采用adapter方式比较灵活
...
}
完整代码如下：
/**
* Created by LiXiaoSong on 2017/7/10.
* 自定义Tagview，用于显示流布局
*/
public class TagView extends ViewGroup {
private int itemSpace = 0;//item之间的间距
private Adapter mAdapter;//这里传入的adapter仅仅使用了其简单的功能
private int ORIENTATION;//方向值，可以取VERTICAL,HORIZONTAL（项目中暂时未用到垂直需求，所以暂时不需要）
private SparseArray<SparseArray<View>> views;//用于记录第几行，第几个item
private SparseArray<Integer> maxHeights;//记录每行的最大高度
private int maxLine;//设置最大的行数
private int gravity;//子View贴着上边还是下边（默认上边）,1是上边，2是下边
public TagView(Context context) {
super(context);
init(null);
}
public TagView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public TagView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private void init(AttributeSet attributeSet) {
views = new SparseArray<>();
maxHeights = new SparseArray();
if (attributeSet == null) {
itemSpace = Utils.dp2px(getContext(), 5);
maxLine = 10;// 默认最大行数
} else {
TypedArray array = getContext().obtainStyledAttributes(attributeSet, R.styleable.TagView);
itemSpace = array.getDimensionPixelSize(R.styleable.TagView_itemSpace, Utils.dp2px(getContext(), 10));
gravity = array.getInt(R.styleable.TagView_gravity, 1);
maxLine = array.getInt(R.styleable.TagView_maxLine, 10);
array.recycle();
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int needWidth = MeasureSpec.getSize(widthMeasureSpec);
int needHeihgt = MeasureSpec.getSize(heightMeasureSpec);
int parentWidthMeasureSpec = MeasureSpec.makeMeasureSpec(needWidth, MeasureSpec.getMode(widthMeasureSpec));
int parentHeightMeasureSpec = MeasureSpec.makeMeasureSpec(needHeihgt, MeasureSpec.getMode(heightMeasureSpec));
if (mAdapter != null && mAdapter.getCount() > 0) {
View child = null;
int childWidth = 0;
int currentLineWidth = 0;
int currentLine = 0;//当前行数
int currentElement = 0;
int maxHeight = 0;//当前行数最大高度
int resultHeihgt = 0;
boolean isMaxLine = false;
for (int i = 0; i < mAdapter.getCount(); i++) {//这里用来存放子View的元素
if (currentLine == maxLine) {
isMaxLine = true;
break;
}
child = mAdapter.getView(i, null, this);
measureChild(child, parentWidthMeasureSpec, parentHeightMeasureSpec);//获取子控件大小
childWidth = child.getMeasuredWidth();
if (currentLineWidth == 0) {//新的一行
views.put(currentLine, new SparseArray<>());
}
if (childWidth + itemSpace + currentLineWidth > needWidth) {//需要换行
resultHeihgt += maxHeight + itemSpace;
maxHeights.put(currentLine, maxHeight);
currentLine++;
currentLineWidth = 0;
currentElement = 0;
i--;
} else {
if (child.getMeasuredHeight() > maxHeight) {
maxHeight = child.getMeasuredHeight();
}
views.get(currentLine).put(currentElement, child);
currentElement++;
currentLineWidth += itemSpace + childWidth;
}
}
if (resultHeihgt == 0) {//当前item仅有一行
resultHeihgt = maxHeight;
maxHeights.put(0, maxHeight);
} else {//如果不是，补齐最后一行的数据
if (!isMaxLine) {
resultHeihgt += maxHeight;//
maxHeights.put(currentLine, maxHeight);
}
}
setMeasuredDimension(needWidth, resultHeihgt);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (mAdapter != null && mAdapter.getCount() > 0) {
View view;
View lastView;//它前面的View
int childLeft, childRight, childTop, childBottom;
for (int i = 0; i < views.size() && i < maxLine; i++) {
for (int j = 0; j < views.get(i).size(); j++) {
view = views.get(i).get(j);//第i行第j个元素
childLeft = 0;
for (int k = 0; k < j; k++) {//通过前面所有View的宽度相加，得到最终的左边位置
lastView = views.get(i).get(k);
childLeft += lastView.getMeasuredWidth() + itemSpace;
}
childRight = childLeft + view.getMeasuredWidth();
childTop = 0;
if (gravity == 1) {
for (int k = 0; k < i; k++) {//通过前面所有高度行数相加，得到最终的上边位置
childTop += maxHeights.get(k) + itemSpace;
}
} else {
childTop = b - t;//设置一个底部
for (int k = views.size() - 1 - i; k >= 0; k--) {//通过前面所有高度行数相加，得到最终的上边位置
childTop -= (maxHeights.get(k) + itemSpace);
}
childTop += itemSpace;
}
childBottom = childTop + view.getMeasuredHeight();
view.layout(childLeft, childTop, childRight, childBottom);
addView(view);
}
}
}
}
public void setAdapter(Adapter adapter) {
mAdapter = adapter;
invalidate();
}
}
本文到此结束，如果有什么问题，欢迎一起讨论。
网友评论