android:unable 制作多线芯片组
android:unable to make multiline chipgroup
我在相对布局中有一个芯片组以及一个代码如下所示的文本视图。
<RelativeLayout
...
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="TextTitle"
android:layout_alignParentStart="true"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv"
android:layout_toLeftOf="@id/cg"
android:layout_alignBaseline="@id/cg"
/>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</RelativeLayout>
我向这个芯片组动态添加芯片,如下所示:
Chip chip;
for(int i=0;i<2;i++){
chip = new Chip(this);
chip.setText("Text:"+i);
chip.setChipBackgroundColorResource(android.R.color.darker_gray);
chip.setTextColor(Color.WHITE);
mChipGroup.addView(chip);
}
上面并排显示了 textview 和 chipgroup(芯片在 textview 的最右边,这是我想要的)。
对于 2 或 3 个芯片,输出如下所示:
但是当我有超过3个芯片时,它看起来很糟糕:
我参考了文档并尝试使 chipgroup 多行并在 chipgroup xml
中添加了以下内容
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
和图2一样
我需要的是一个带有多行选项的芯片组,其间距与 pic1 中的间距相同,即在 pic1 中,我希望 Text3 在 Text0 下方,Text4 在 Text1 下方,依此类推,如果没有芯片增加!.
我确定我一定遗漏了什么,但不知道是什么 is.Any 会提前 useful.Thanks 帮助!!
像下面那样使用你的xml
<RelativeLayout 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv"
/>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</LinearLayout>
</RelativeLayout>
您的最终屏幕如下所示。根据您的要求调整 space 和芯片宽度。
编辑
如果您想设置高度,请在您的 activity 中使用它(在 for
循环内)
chip.setChipMinHeight(10);
我根据@Sajith 的回答更新,看看它是否可行:
<RelativeLayout 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv" />
<FrameLayout
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content" >
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
如果你想在多行上实现类似 gmail 的行为,那么所有以前的解决方案都不适合我。为了做到这一点,我不得不避免使用 ChipGroup,而是使用 FlexboxLayout.
your_recipient_layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/recipient_label_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center_vertical" />
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/recipient_group_FL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_gravity="center_vertical"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="space_around"
app:showDivider="beginning|middle|end"
app:dividerDrawable="@drawable/divider">
<EditText
android:id="@+id/recipient_input_ET"
android:layout_width="wrap_content"
android:layout_height="32dp"
app:layout_flexGrow="1"
android:background="@android:color/transparent"
android:imeOptions="actionDone"
android:inputType="text"/>
</com.google.android.flexbox.FlexboxLayout>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recipients_list_RV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
现在的诀窍是向组中添加一个新筹码,但要放在倒数第二个位置。像这样:
private fun addChipToGroup(person: String, chipGroup: FlexboxLayout) {
val chip = Chip(context)
chip.text = person
chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.mipmap.ic_launcher_round)
chip.isCloseIconEnabled = true
chip.isClickable = true
chip.isCheckable = false
chipGroup.addView(chip as View, chipGroup.childCount - 1)
chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }
}
我在相对布局中有一个芯片组以及一个代码如下所示的文本视图。
<RelativeLayout
...
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="TextTitle"
android:layout_alignParentStart="true"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv"
android:layout_toLeftOf="@id/cg"
android:layout_alignBaseline="@id/cg"
/>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</RelativeLayout>
我向这个芯片组动态添加芯片,如下所示:
Chip chip;
for(int i=0;i<2;i++){
chip = new Chip(this);
chip.setText("Text:"+i);
chip.setChipBackgroundColorResource(android.R.color.darker_gray);
chip.setTextColor(Color.WHITE);
mChipGroup.addView(chip);
}
上面并排显示了 textview 和 chipgroup(芯片在 textview 的最右边,这是我想要的)。
对于 2 或 3 个芯片,输出如下所示:
但是当我有超过3个芯片时,它看起来很糟糕:
我参考了文档并尝试使 chipgroup 多行并在 chipgroup xml
中添加了以下内容 app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
和图2一样
我需要的是一个带有多行选项的芯片组,其间距与 pic1 中的间距相同,即在 pic1 中,我希望 Text3 在 Text0 下方,Text4 在 Text1 下方,依此类推,如果没有芯片增加!.
我确定我一定遗漏了什么,但不知道是什么 is.Any 会提前 useful.Thanks 帮助!!
像下面那样使用你的xml
<RelativeLayout 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv"
/>
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</LinearLayout>
</RelativeLayout>
您的最终屏幕如下所示。根据您的要求调整 space 和芯片宽度。
编辑
如果您想设置高度,请在您的 activity 中使用它(在 for
循环内)
chip.setChipMinHeight(10);
我根据@Sajith 的回答更新,看看它是否可行:
<RelativeLayout 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="@+id/tv" />
<FrameLayout
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content" >
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
如果你想在多行上实现类似 gmail 的行为,那么所有以前的解决方案都不适合我。为了做到这一点,我不得不避免使用 ChipGroup,而是使用 FlexboxLayout.
your_recipient_layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/recipient_label_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center_vertical" />
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/recipient_group_FL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_gravity="center_vertical"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="space_around"
app:showDivider="beginning|middle|end"
app:dividerDrawable="@drawable/divider">
<EditText
android:id="@+id/recipient_input_ET"
android:layout_width="wrap_content"
android:layout_height="32dp"
app:layout_flexGrow="1"
android:background="@android:color/transparent"
android:imeOptions="actionDone"
android:inputType="text"/>
</com.google.android.flexbox.FlexboxLayout>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recipients_list_RV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
现在的诀窍是向组中添加一个新筹码,但要放在倒数第二个位置。像这样:
private fun addChipToGroup(person: String, chipGroup: FlexboxLayout) {
val chip = Chip(context)
chip.text = person
chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.mipmap.ic_launcher_round)
chip.isCloseIconEnabled = true
chip.isClickable = true
chip.isCheckable = false
chipGroup.addView(chip as View, chipGroup.childCount - 1)
chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }
}