根据大小和图标在工具栏中居中或左对齐文本视图

问题描述 投票：0回答：3

我想处理 3 种在我的自定义工具栏（约束布局）中显示文本的情况。

  1. 如果文字很短，请放在中间
  2. 如果文本中等长度但开始重叠图标 - 将 textView 向左移动以填充空白空间
  3. 如果文本很长且不适合 - 向左对齐并在末尾设置椭圆。

我只是想知道它是否可以用 XML 完成。我试过分配一些约束/障碍但没有成功。屏幕来说明这 3 种情况。期待解决方案或指导如何解决这个问题。谢谢你！ :)

<?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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_insetEdge="top">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:barrierDirection="left"
        app:constraint_referenced_ids="icon1"/>

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:ellipsize="end"
        android:maxLines="1"
        android:gravity="center"
        android:text="Title title"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <tv.solocoo.solocoo_components.FontImageView
        android:id="@+id/icon1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/adaptive_icon"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/icon2"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/icon2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/adaptive_icon"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
android xml kotlin textview android-constraintlayout
3个回答
0
投票

我使用了您的布局，因为它删除了椭圆大小和引力，因此我可以通过编程方式设置它们

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/black"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_insetEdge="top">

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:barrierDirection="left"
    app:constraint_referenced_ids="icon1" />

<TextView
    android:id="@+id/toolbar_title"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:text="Short"
    android:textColor="@color/white"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/barrier"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/icon1"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:scaleType="centerInside"
    android:src="@drawable/baseline_cast_24"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/icon2"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/icon2"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:scaleType="centerInside"
    android:src="@drawable/baseline_cancel_24"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在活动中，我附加了 OnGlobalLayoutListener 并使用 this 答案来确定省略号是否可见，然后相应地更改了布局

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val toolbarText = findViewById<TextView>(R.id.toolbar_title)

    val listener = OnGlobalLayoutListener {
        val l = toolbarText.layout
        l?.let { layout ->
            val lines: Int = layout.lineCount
            if (lines > 0) if (layout.getEllipsisCount(lines - 1) > 0) {
                toolbarText.ellipsize = TextUtils.TruncateAt.END
                toolbarText.textAlignment = TEXT_ALIGNMENT_VIEW_START
                //if you want a padding at the start position
                toolbarText.setPadding(50, 0, 0,0 )
            } else {
                toolbarText.gravity = Gravity.CENTER
                toolbarText.ellipsize = TextUtils.TruncateAt.MIDDLE
                toolbarText.textAlignment = TEXT_ALIGNMENT_CENTER
            }
        }
    }
    val vto: ViewTreeObserver = toolbarText.viewTreeObserver

    vto.addOnGlobalLayoutListener (listener)
}

我的成绩是

0
投票

我只是想知道它是否可以用 XML 完成。

我不认为这仅靠 XML 是可以实现的；那是因为你会过度限制标题的宽度，你需要有两个结束约束，一个在父级的右侧（当文本很短时），另一个在左图标的左边缘（当文本宽度增加时）。哪一个会被考虑？

另外，它需要的包括一个条件约束：只有标题很短时才需要将标题约束到父端；否则将其约束到图标。 

ConstraintLayout
.

不提供哪个 AFAIK

不幸的是，最大。文档中的宽度约束限制为 

dp
中的固定大小，使用 
app:layout_constraintWidth_max
，或者使用 
layout_constraintWidth_percent
的父项的百分比。您不能将最大宽度限制为某个视图，甚至不能限制为父 AFAIK。

因此，您会考虑布局上的两个约束之一，并在需要时用另一个覆盖它。

假设默认情况下它受限于父级；然后将标题的宽度与剩余区域进行比较，直到 icon1 一侧；如果它更大，则以编程方式添加其他约束：

布局：

<?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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_insetEdge="top">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:ellipsize="end"
        android:maxLines="1"
        android:gravity="center"
        android:text="Title title"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <tv.solocoo.solocoo_components.FontImageView
        android:id="@+id/icon1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/adaptive_icon"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/icon2"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/icon2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/adaptive_icon"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

行为：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(...);

    ConstraintLayout root = findViewById(R.id.toolbar);
    TextView title = findViewById(R.id.toolbar_title);
    ImageView icon1 = findViewById(R.id.icon1);
    ImageView icon2 = findViewById(R.id.icon2);
    
    root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
        
            root.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            
            int maxWidthAllowed = root.getWidth() - (icon1.getWidth() + icon2.getWidth());
            
            if (title.getWidth() > maxWidthAllowed) {
            
                // change the end constraint to the start of icon1
                ConstraintSet set = new ConstraintSet();
                set.clone(root);
                set.connect(title.getId(), ConstraintSet.END, icon1.getId(), ConstraintSet.START, 0);
                set.applyTo(root);
            }

        }
    });

}
0
投票

我在一些程序化文本对齐方面遇到了类似的问题。对我有用的是将 textview（或组合子视图）的宽度设置为 match_parent，然后在我的列表适配器的 onBindViewHolder 方法中将视图的内部引力设置为正确的值。例如，对于框架布局中名为 example 的文本视图：

val textview = viewholder.textview
textview.text = "YOUR STRING"
//init your other views

val params = FrameLayout.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
)

params.gravity = if (/*check for text length*/) {
    //text should be center aligned
    //add ellipses?
    Gravity.CENTER_HORIZONTAL
} else { 
    //text should be left aligned
    Gravity.START 
}

textview.layoutParams = params

Java 代码如下所示：

TextView textview = holder.textview;
textview.setText("YOUR STRING")
//init your other views

FrameLayout.LayoutParams params = new 
    FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
);
if(/*DETERMINE STRING LENGTH*/) {
    //center align text
    params.gravity = Gravity.CENTER_HORIZONTAL;
} else {
    //left align text
    //add ellipses?
    params.gravity = Gravity.START
}

textview.setLayoutParams(params);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.