当前位置:网站首页>ConstraintLayout的流式布局Flow
ConstraintLayout的流式布局Flow
2022-07-05 09:41:00 【沙漠一只雕得儿得儿】
Flow流式布局
流式布局的实现方式有很多种,比如RecycleView的StaggeredGridLayoutManager
,或者自定义布局动态计算的方式
等,无论哪种实现,都不如ConstraintLayout提供的Flow流式布局
来的更灵活,更简单。
base_component_learn/ConstraintFlowActivity.java at master · buder-cp/base_component_learn · GitHub
这里我们进行动态添加,效果如下:
代码非常简单,即使用动态添加布局即可:
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.helper.widget.Flow;
import androidx.constraintlayout.widget.ConstraintLayout;
import java.util.ArrayList;
public class ConstraintFlowActivity extends AppCompatActivity {
private ConstraintLayout mainLayout;
private Flow flow;
private int[] idsss = new int[]{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19};
private String[] strings = new String[]{ "拍案叫绝银汉迢迢暗度银汉迢汉迢迢暗度", "行云流水", "花花", "词语好词",
"如霜", "翠彤翠彤翠彤", "眉飞色舞", "梦琪", "蓉", "描写友情的词",
"优美词语集锦", "相视而笑", "笑容", "推心置腹", "喜上眉梢", "可掬", "银汉迢迢暗度", "又岂在朝朝暮暮又岂", "便胜却", "ads"};
private ArrayList<Integer> arrayList = new ArrayList<Integer>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.constraint_exercise);
mainLayout = (ConstraintLayout) LayoutInflater.from(this).inflate(R.layout.constraint_exercise, null);
setContentView(mainLayout);
for (int i = 1; i < 20; i++) {
arrayList.add(i);
mainLayout.addView(generateView(i));
}
flow = findViewById(R.id.constrain_flows);
// flow.setMaxElementsWrap(3);
// flow.setHorizontalAlign();
flow.setWrapMode(1);
flow.setReferencedIds(idsss);
}
private TextView generateView(int i) {
TextView textView = new TextView(getApplicationContext());
textView.setId(i);
textView.setPadding(12, 5, 12, 5);
textView.setTextColor(Color.BLACK);
textView.setBackgroundResource(R.drawable.vip_course_selector_bg);
textView.setText(strings[i]);
return textView;
}
}
XML代码仅包含一个flow即可:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/constrain_flows"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="20dp"
app:layout_constraintTop_toTopOf="parent"
app:flow_horizontalGap="10dp"
app:flow_verticalGap="10dp"
app:flow_maxElementsWrap="4"
app:flow_wrapMode="aligned" />
</androidx.constraintlayout.widget.ConstraintLayout>
使用原生代码写flow流式布局是不是很简单呢。
具体Flow的一些具体属性可以看ConstraintLayout 2.0新特性解析(一)--Flow流式布局 - 简书
核心就是使用属性:app:constraint_referenced_ids
将7个ImageView约束起来。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:flow_horizontalGap="10dp"
app:flow_verticalGap="10dp"
app:flow_wrapMode="none"
app:constraint_referenced_ids="image1,image2,image3,image4,image5,image6,image7" />
<ImageView
android:id="@+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<ImageView
android:id="@+id/image7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
</androidx.constraintlayout.widget.ConstraintLayout>
边栏推荐
- . Net delay queue
- 卷起來,突破35歲焦慮,動畫演示CPU記錄函數調用過程
- 《剑来》语句摘录(七)
- 字节跳动面试官:一张图片占据的内存大小是如何计算
- cent7安装Oracle数据库报错
- 剪掉ImageNet 20%数据量,模型性能不下降!Meta斯坦福等提出新方法,用知识蒸馏给数据集瘦身...
- From "chemist" to developer, from Oracle to tdengine, two important choices in my life
- Swift uses userdefaults and codable to save an array of class objects or structure instances
- Coordinate system of view
- How to get the STW (pause) time of GC (garbage collector)?
猜你喜欢
苹果 5G 芯片研发失败?想要摆脱高通为时过早
Generics, generic defects and application scenarios that 90% of people don't understand
[NTIRE 2022]Residual Local Feature Network for Efficient Super-Resolution
一种用于干式脑电图的高密度256通道电极帽
Why don't you recommend using products like mongodb to replace time series databases?
ArcGIS Pro 创建要素
Evolution of Baidu intelligent applet patrol scheduling scheme
Energy momentum: how to achieve carbon neutralization in the power industry?
【C语言】动态内存开辟的使用『malloc』
B站大量虚拟主播被集体强制退款:收入蒸发,还倒欠B站;乔布斯被追授美国总统自由勋章;Grafana 9 发布|极客头条...
随机推荐
Android SQLite database encryption
Fluent development: setting method of left and right alignment of child controls in row
自动化规范检查软件如何发展而来?
View Slide
盗版DALL·E成梗图之王?日产5万张图像,挤爆抱抱脸服务器,OpenAI勒令改名
驱动制造业产业升级新思路的领域知识网络,什么来头?
isEmpty 和 isBlank 的用法区别
RMS TO EAP通过MQTT简单实现
Tianlong Babu TLBB series - single skill group injury
【 conseils 】 obtenir les valeurs des axes X et y de la fonction cdfplot dans MATLAB
Unity粒子特效系列-毒液喷射预制体做好了,unitypackage包直接用 -下
[tips] get the x-axis and y-axis values of cdfplot function in MATLAB
tongweb设置gzip
QT event filter simple case
The king of pirated Dall · e? 50000 images per day, crowded hugging face server, and openai ordered to change its name
【小技巧】獲取matlab中cdfplot函數的x軸,y軸的數值
[app packaging error] to proceed, either fix the issues identified by lint, or modify your build script as follow
Uncover the practice of Baidu intelligent testing in the field of automatic test execution
QT realizes signal transmission and reception between two windows
Swift set pickerview to white on black background