引言
除了使用hongyang大神的FlowLayout库来可以实现流式布局效果，还有自定义View的方式也能实现，话不多说，马上开始。
传送门：FlowLayout使用hongyang大神的依赖库实现流式布局
效果展示
自定义FlowLayout.jpeg
点击效果
自定义FlowLayout.gif
介绍
什么是流式布局？就是像水一样可以流动？不，之所以这样命名只是在强调它的不规则性，它会根据你的内容多少测量你需要的控件的尺寸，完成自定义的效果。
用法
第一步：自定义View，创建FlowLayoutView类
注：之后在布局文件中可以使用的自定义控件
/**
* @data on 2020/9/8 2:13 PM
* @auther armstrong
* @describe 流式布局 -- 自定义View. from libo
*/
public class FlowLayoutView extends ViewGroup {
private List<Row> rows = new ArrayList<>();
private int usedWidth;
/**
* 当前需要操作的行
*/
private Row curRow;
private int verticalPadding = 30;
private int horizontalPadding = 40;
public FlowLayoutView(Context context) {
super(context);
}
public FlowLayoutView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
restoreLine(); //每次重新布局，属性要初始化，避免onMeasure重复调用混乱问题
//子view设置宽高为父view大小减去padding值
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//设置每个子view宽高，并且将每个子View归到自己的行
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
//设置子view设置AT_MOST模式，即布局属性为wrap_content
int childWidthSpec = MeasureSpec.makeMeasureSpec(width, widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : widthMode);
int childHeightSpec = MeasureSpec.makeMeasureSpec(height, heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : heightMode);
childView.measure(childWidthSpec, childHeightSpec);
if (curRow == null) {
curRow = new Row();
}
//根据当前childview宽度和剩余宽度判断是否能放进当前行，放不了就要换行
if (childView.getMeasuredWidth() + horizontalPadding > width - usedWidth) {
//先换行，再放入
nextLine();
}
usedWidth += childView.getMeasuredWidth() + horizontalPadding;
curRow.addView(childView);
}
//将最后一个row加入到rows中
rows.add(curRow);
//根据子view组成的高度重设自己高度
int finalHeight = 0;
for (Row row : rows) {
finalHeight += row.height + verticalPadding;
}
setMeasuredDimension(width, finalHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int top = 0;
//遍历每一行，将每一行子view布局
for (Row row : rows) {
row.layout(top);
top = top + row.height + verticalPadding;
}
}
/**
* 换行，需要将当前row存储，并且创建新的row，新的行使用空间置0
*/
private void nextLine() {
rows.add(curRow);
curRow = new Row();
usedWidth = 0;
}
/**
* 每次onmeasure需要重置信息
*/
private void restoreLine() {
rows.clear();
curRow = new Row();
usedWidth = 0;
}
/**
* 用于记录每一行放置子View的信息
*/
class Row {
/**
* 该行放置的子view
*/
private List<View> childViews = new ArrayList<>();
private int height;
public void addView(View view) {
childViews.add(view);
height = view.getMeasuredHeight() > height ? view.getMeasuredHeight() : height; //高度取最高子view的高度
}
public int getSize() {
return childViews.size();
}
/**
* 将当前childViews进行布局
* top 当前hang处于的顶部高度
*/
public void layout(int top) {
int leftMargin = 0;
for (int i = 0; i < childViews.size(); i++) {
View view = childViews.get(i);
view.layout(leftMargin, top, leftMargin + view.getMeasuredWidth(), top + view.getMeasuredHeight());
leftMargin = leftMargin + view.getMeasuredWidth() + horizontalPadding;
}
}
}
}
第二步：布局文件
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".show.Case15"
tools:ignore="MissingConstraints"
>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/green"
android:gravity="center"
app:title="FlowLayout示例"
app:titleTextColor="@color/white" />
<!--自定义View-->
<com.example.mydemo.viewgroup.FlowLayoutView
android:id="@+id/flowlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/toolbar"
android:layout_marginLeft="10dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
第三步：TextView的控件布局
flow_tv_content.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/flow_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/tagflow_selector"
android:paddingLeft="16dp"
android:paddingTop="6dp"
android:paddingRight="16dp"
android:paddingBottom="6dp"
android:text="Helloworld"
android:textSize="14sp"
tools:text="天猫精灵"/>
第四步：在activity中写的代码
//自定义View实现流式布局
public class Case15 extends AppCompatActivity {
private FlowLayoutView flowLayoutView; //自定义ViewGroup
private ArrayList<String> datas = new ArrayList();
private String[] tagTextArray = new String[]{"天猫精灵", "充电台灯", "睡衣", "手表", "创意水杯", "夏天T恤男", "灯光机械键盘",
"计算机原理", "学霸笔记本", "可口可乐", "跑步机", "旅行箱", "竹浆卫生纸", "吹风机", "洗面奶", "窗帘"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_case15);
//将数组转成list，因为一般都是从api接口接收的数据都是list
for (int i = 0; i < tagTextArray.length; i++) {
datas.add(tagTextArray[i]);
}
initView();
}
private void initView() {
flowLayoutView = findViewById(R.id.flowlayout);
for (int i = 0; i < datas.size(); i++) {
View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.flow_tv_content, null);
TextView tvContent = view.findViewById(R.id.flow_tv);
tvContent.setText(datas.get(i));
flowLayoutView.addView(view);
tvContent.setOnClickListener((View)->{
Toast.makeText(this,tvContent.getText()+"",Toast.LENGTH_SHORT).show();
});
}
}
}
网友评论