项目中需要用到流式布局,防止国际化后内容超出屏幕,想到了第三方的一些控件比如
FlowLayout,之前也用过比较熟悉,但是之前学习了ConstraintLayout 这个强大控件库,留意到其中有一个控件:Flow也比较适合当成流式布局使用,有官方的干嘛要用第三方,研究搞起!使用心得总结一下,希望对您有帮助
Flow管理的view 自身可以不设置layout_constraintStart_toEndOf 等位置
需要width="0dp" app:layout_constraintWidth_default="wrap"
如果是Textview最好设置 android:singleLine="true"
Flow其他属性具体如下:
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
//宽度要指定,否则会顶出屏幕外面
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
//引用的id(内部的view的id)
app:constraint_referenced_ids="tv_type,tv_online_state,tv_switch_state"
//chain或者aligned,chain:链形式,依次挨着排,aligned会两端对齐
app:flow_wrapMode="chain"
//首行的对齐方式,packed:靠最左侧挨着排,水平间隔:horizontalGap生效,
// spread:分散对齐,两端不贴边。spread_inside:分散对齐,两头贴边
app:flow_firstHorizontalStyle="packed"
//最后一行的对齐方式,其他属性参考firstHorizontalStyle
app:flow_lastHorizontalStyle="packed"
// 全局水平bias,为0时,每行都贴左边,可解决中间行单独占一行时,不贴最左侧的问题
app:flow_horizontalBias="0"
// 第一行水平bias,为0时,贴最左边
app:flow_firstHorizontalBias="0"
// 最后一行水平bias,为0时,贴最左边
app:flow_lastHorizontalBias="0"
// 控件水平方向上的间隔
app:flow_horizontalGap="10dp"
// 行间隔
app:flow_verticalGap="8dp"
app:layout_constraintEnd_toStartOf="@id/ibt_go"
app:layout_constraintStart_toEndOf="@id/guideline"
app:layout_constraintTop_toTopOf="@id/tv_org_name" />
list的item完整xml布局 如下:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/top_margin"
android:layout_width="match_parent"
android:layout_height="8dp"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:paddingHorizontal="12dp"
android:paddingVertical="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_margin">
<TextView
android:id="@+id/tv_device_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="70dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/colorTextNormal"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="测试测试" />
<TextView
android:id="@+id/tv_org_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textColor="@color/colorTextLightBalck"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="@id/guideline"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_device_name"
app:layout_constraintWidth_default="wrap"
tools:text="研发部dadfad打发士大夫打发范德萨" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:constraint_referenced_ids="tv_type,tv_online_state,tv_switch_state"
app:flow_firstHorizontalBias="0"
app:flow_firstHorizontalStyle="packed"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_lastHorizontalBias="0"
app:flow_lastHorizontalStyle="packed"
app:flow_verticalGap="8dp"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toStartOf="@id/ibt_go"
app:layout_constraintStart_toEndOf="@id/guideline"
app:layout_constraintTop_toTopOf="@id/tv_org_name" />
<TextView
android:id="@+id/tv_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/selector_enable_text_bg_blue_gray"
android:paddingHorizontal="8.5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:textColor="@drawable/selector_enable_textcolor_blue_gray"
android:textSize="12sp"
app:layout_constraintWidth_default="wrap"
tools:text="自动采集" />
<TextView
android:id="@+id/tv_online_state"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/selector_enable_text_bg_green_red"
android:paddingHorizontal="8.5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:textColor="@drawable/selector_enable_textcolor_green_red"
android:textSize="12sp"
app:layout_constraintWidth_default="wrap"
tools:text="在线" />
<TextView
android:id="@+id/tv_switch_state"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/selector_enable_text_bg_green_red"
android:paddingHorizontal="8.5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:textColor="@drawable/selector_enable_textcolor_green_red"
android:textSize="12sp"
app:layout_constraintWidth_default="wrap"
tools:text="合位" />
<androidx.appcompat.widget.AppCompatImageButton
android:id="@+id/ibt_go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:src="@mipmap/ic_arrow_right"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
最终效果:
中文列表item:
英文列表item: