0

下面的代码正在产生这个。

图片

我想要这个布局:

应该是这样的

顶部的大 textView 占用了父级的全部内容,并且 textsize 使用 android:autoSizeTextType="uniform" 自动调整。我想将下面的 textViews 与实际文本对齐,而不是与 textView 的框架对齐。

<?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="match_parent"
android:background="@color/black"
tools:context=".DisplayActivity">

<TextView
    android:id="@+id/timeTextView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:autoSizeMaxTextSize="5000dp"
    android:autoSizeTextType="uniform"
    android:gravity="center_horizontal"
    android:text="2:01:04"
    android:textColor="@color/textColor"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/timeTextView2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginStart="148dp"
    android:text="2:01:05"

    android:textColor="@color/textColor"
    android:textSize="50dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintStart_toStartOf="@id/timeTextView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/timeTextView3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginEnd="152dp"
    android:text="2:01:07"
    android:textColor="@color/textColor"
    android:textSize="50dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toEndOf="@+id/timeTextView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintVertical_bias="0.0" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.59" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.75" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

 </androidx.constraintlayout.widget.ConstraintLayout>
4

2 回答 2

1

由于顶部TextView中文本的大小和相对位置将根据屏幕大小、方向和自动调整大小而改变,因此没有一组值可用于定位其他两个视图,也没有任何约束可以工作,所以在布局通过完成后,您将不得不通过代码使用顶部TextView的布局来解决此问题。布局将为您提供文本在 TextView 中的开始位置和结束位置的。有关详细信息,请参阅下面的评论。我为演示更改了一些布局。(这里有两种布局:一种是ConstraintLayout,另一种是TextView内部的它定义了文本的显示方式。)

在此处输入图像描述

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TextView tv;
    private Guideline guidelineStart;
    private Guideline guidelineEnd;
    private ConstraintLayout layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // This is the top TextView
        tv = findViewById(R.id.timeTextView);
        
        // Get the vertical start and end guidelines which are set to 0% and 100% to start. The
        // left bottom TextView is constrained to the guidelineStart and the right bottom
        // TextView is constrained to guidelineEnd.
        guidelineStart = findViewById(R.id.guidelineStart);
        guidelineEnd = findViewById(R.id.guidelineEnd);
        
        // This is our ConstraintLayout. We will wait for everthing to layout so we can get
        // good measurements.
        layout = findViewById(R.id.layout);
        layout.post(() -> {
            int layoutWidth = layout.getWidth();
            
            // Get the starting and ending positions from the Layout of the top TextView.
            float start = tv.getLayout().getLineLeft(0);
            float end = tv.getLayout().getLineRight(0);
            
            // Now set the start and end guidelines to shift our bottom two TextViews.
            // We could also use guidelines with pixel offsets.
            guidelineStart.setGuidelinePercent(start / layoutWidth);
            guidelineEnd.setGuidelinePercent(end / layoutWidth);
        });
    }
}

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <TextView
        android:id="@+id/timeTextView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:autoSizeMaxTextSize="5000dp"
        android:autoSizeTextType="uniform"
        android:gravity="center_horizontal"
        android:text="2:01:04"
        android:textColor="@color/textColor"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.15" />

    <TextView
        android:id="@+id/timeTextView2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="2:01:05"
        android:textColor="@color/textColor"
        android:textSize="25sp"
        android:visibility="visible"
        app:layout_constraintStart_toEndOf="@id/guidelineStart"
        app:layout_constraintTop_toBottomOf="@id/timeTextView" />

    <TextView
        android:id="@+id/timeTextView3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="2:01:07"
        android:textColor="@color/textColor"
        android:textSize="25sp"
        android:visibility="visible"
        app:layout_constraintEnd_toStartOf="@+id/guidelineEnd"
        app:layout_constraintTop_toBottomOf="@id/timeTextView" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>
于 2021-07-20T13:59:30.800 回答
0

Try this....

    <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="match_parent"
    android:background="@color/black">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline2">

    </RelativeLayout>

    <TextView
        android:id="@+id/timeTextView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:autoSizeMaxTextSize="5000dp"
        android:autoSizeTextType="uniform"
        android:gravity="center_horizontal"
        android:text="2:01:04"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="@+id/guideline6"
        app:layout_constraintStart_toStartOf="@+id/guideline5"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/timeTextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:text="2:01:05"
        android:textColor="@color/white"
        android:textSize="50dp"
        app:layout_constraintEnd_toEndOf="@+id/guideline3"
        app:layout_constraintStart_toStartOf="@+id/timeTextView"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/timeTextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="4dp"
        android:gravity="end"
        android:text="2:01:07"
        android:textColor="@color/white"
        android:textSize="50dp"
        app:layout_constraintEnd_toEndOf="@+id/timeTextView"
        app:layout_constraintStart_toEndOf="@+id/timeTextView"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />
   
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.59" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.75" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9" />

</androidx.constraintlayout.widget.ConstraintLayout>

here is how it will look enter image description here

Hope it work for you... :)

于 2021-07-20T09:29:57.640 回答