【问题标题】:Android Adding a button with multiline text inside MaterialButtonToggleGroup doesn't workAndroid 在 MaterialButtonToggleGroup 中添加带有多行文本的按钮不起作用
【发布时间】:2020-12-26 18:41:56
【问题描述】:

我试图在 MaterialButtonToggleGroup 中显示一个多行按钮,但它总是在换行符处显示 ... 但它在 MaterialButtonToggleGroup

我试过

  • 使用\n

  • 使用带有Html.form方法的<br/> HTML标签

    如下图所示,第一个按钮位于 MaterialButtonToggleGroup 之外,而第二个按钮位于其中。
<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:context=".conversation.ui.conversations.AddNewConversationFragment">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="20dp"
            android:background="@drawable/register_field_background"
            android:orientation="vertical"
            android:padding="10dp">


            <ImageView
                android:id="@+id/img_close"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_baseline_close_24"
                android:tint="@android:color/darker_gray"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/add_anyone"
                android:singleLine="false"
                android:maxLines="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/gray100"
                android:text="This is Multi Line Text &#10;Line2"
                android:textAllCaps="false"
                android:textColor="@color/gray700"
                app:iconTint="@color/gray700"
                />
            <com.google.android.material.button.MaterialButtonToggleGroup
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="10dp"
                android:orientation="vertical"
                app:checkedButton="@+id/button_add_native"
                app:layout_constraintBottom_toTopOf="@+id/tv_select_address"
                app:layout_constraintTop_toBottomOf="@+id/textView"
                app:selectionRequired="true"
                app:singleSelection="true">

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/add_anyone"
                    android:singleLine="false"
                    android:maxLines="2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/gray100"
                    android:text="This is Multi Line Text &#10;Line2"
                    android:textAllCaps="false"
                    android:textColor="@color/gray700"
                    app:iconTint="@color/gray700"
                    />

            </com.google.android.material.button.MaterialButtonToggleGroup>


            <TextView
                android:id="@+id/textView"
                style="@style/bottomSheetDialogHeader"
                android:layout_marginStart="16dp"
                android:letterSpacing="0.1"
                android:text="@string/add_conversation_dialog_title"
                android:textAllCaps="true"
                app:layout_constraintBottom_toBottomOf="@+id/img_close"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/img_close" />


            <com.google.android.material.button.MaterialButton
                android:id="@+id/tv_select_address"
                style="@style/LinguisticMainLayoutOrangeButton"
                android:paddingBottom="10dp"
                android:text="@string/start_chatting"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </RelativeLayout>
</layout>

【问题讨论】:

    标签: android android-button material-components-android


    【解决方案1】:

    这是一个预期的结果。您可以查看下面的源代码,其中覆盖了多行。

    您可以通过编程方式进行设置。比如:

        val button : MaterialButton = findViewById(R.id.add_anyone)
        button.maxLines = 2
    

    源代码:

    https://github.com/material-components/material-components-android/blob/e944d1b2a6ee5d9d5a338de0c0061f7b02790f77/lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java#L751-L754

      private void setupButtonChild(@NonNull MaterialButton buttonChild) {
        buttonChild.setMaxLines(1);
        buttonChild.setEllipsize(TruncateAt.END);
        buttonChild.setCheckable(true);
    

    【讨论】:

      【解决方案2】:

      供将来参考的替代技巧:

      1. 提供您自己的自定义类,我们将其命名为 CustomMaterialButtonToggleGroup,它扩展了 MaterialButtonToogleGroup

      示例:

      public class CustomMaterialButtonToggleGroup extends MaterialButtonToggleGroup {
          public CustomMaterialButtonToggleGroup(@NonNull Context context) {
              super(context);
          }
      
          public CustomMaterialButtonToggleGroup(@NonNull Context context, @Nullable AttributeSet attrs) {
              super(context, attrs);
          }
      
          public CustomMaterialButtonToggleGroup(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
              super(context, attrs, defStyleAttr);
          }
      
          @Override
          public void addView(View child, int index, ViewGroup.LayoutParams params) {
              super.addView(child, index, params);
              if(child instanceof MaterialButton)
              {
                  ((MaterialButton) child).setMaxLines(2);
              }
          }
      

      这样我们通过代码强制 MaterialToggleGroup 的子视图实现 maxLines!

      最后第二个奇怪的部分是:

      1. 转到定义按钮的活动/片段...并通过代码进行设置!

      示例:

      SampleButton.setText("Hey\nI'm multiline"); // notice the escape character of newline-> \n
      

      然后像往常一样将其提取到 strings.xml 中!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-11-07
        • 2020-02-23
        • 2020-09-17
        相关资源
        最近更新 更多