Question

我希望我的textView与屏幕居中对齐，也不希望它与图像重叠。您能帮我使用约束吗？

<android.support.constraint.ConstraintLayout
    android:id="@+id/merge"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
      android:id="@+id/iv_close"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/paa_action_bar_back_margin"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:srcCompat="@drawable/vc_nav_bar_back" />

    <TextView
      android:id="@+id/tv_actionbar_page_title"
      style="@style/db_title_4.semibold"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="@{title}"
      android:textColor="@color/shade_grease"
      android:textSize="16sp"
      android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
      app:layout_constraintBottom_toBottomOf="@+id/iv_close"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="@+id/iv_close"
      tools:text="@tools:sample/lorem"
      tools:visibility="visible" />


  </android.support.constraint.ConstraintLayout>

Answer 1

您需要设置边距，例如marginTop，marginBottom，marginLeft，marginRight。例如：

<TextView
  android:id="@+id/tv_actionbar_page_title"
  style="@style/db_title_4.semibold"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@{title}"
  android:textColor="@color/shade_grease"
  android:textSize="16sp"
  android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
  app:layout_constraintBottom_toBottomOf="@+id/iv_close"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="@+id/iv_close"

  android:layout_marginTop="10dp"
  android:layout_marginBottom="10dp"
  android:layout_marginLeft="10dp"
  android:layout_marginRight="10dp"

  tools:text="@tools:sample/lorem"
  tools:visibility="visible" />

您可以配置不同的边距值，使其适合您的要求。或者，您甚至可以删除一些边距。最后，这取决于您和您的设计。

编辑：作为提醒约束，布局以相对的方式工作。一个对象取决于另一对象，因此请确保您的行/准则正确（在标记为constraint_toStartOf等的.xml中）

Answer 2

这应该有效。文字永远不会与图片重叠，图片会与开头对齐。

<android.support.constraint.ConstraintLayout android:id="@+id/merge"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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">

    <ImageView
        android:id="@+id/iv_close"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/paa_action_bar_back_margin"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_actionbar_page_title"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/vc_nav_bar_back" />

    <TextView
        android:id="@+id/tv_actionbar_page_title"
        style="@style/db_title_4.semibold"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@{title}"
        android:textColor="@color/shade_grease"
        android:textSize="16sp"
        android:visibility="@{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
        app:layout_constraintBottom_toBottomOf="@+id/iv_close"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iv_close"
        app:layout_constraintTop_toTopOf="@+id/iv_close"
        tools:text="@tools:sample/lorem"
        tools:visibility="visible" />


</android.support.constraint.ConstraintLayout>

Answer 3

尝试将文本视图限制为图像，并赋予其var input = require("read_line-sync"); class Multiple_choice { constructor(number,question,choices,user_ans,correct_ans) { this.number = number; //question number this.question = question; //display question number this.choices = choices; //display question choices this.user_ans = user_ans; // store user ans this.correct_ans = correct_ans; // validate user ans } } class Quiz{ quiz(category){// to store objects in different categories if (category==1){ for(var i=0;i<5;i++){ console.log(questions[i].number + questions[i].question + questions[i].choices + ???); // questions 1-5:History } } else if (category==2){ for(var i=5;i<10;i++){ console.log(questions[i].number + questions[i].question + questions[i].choices + ???); // questions 6-10: Chemistry } } else if (category==3){ for(var i=10;i<15;i++){ console.log(questions[i].number + questions[i].question + questions[i].choices +???); // question 11-15: Physics } } } var questions =[new Multiple_Choice("Question 1: \n","There was an early settlement long before the arrival of Stamford Raffles. It was located between the mouth of the Singapore River and a small watercourse known today as Stamford Canal. What was the original name of this stream?","A. Fresh Water Well\n B. Fresh Water Lake\n C. Fish Water Spring\n D. Fresh Water Spring",user_ans,correct_ans), new Multiple_Choice("Question 2: \n","When did the first junk transporting immigrants from China arrive in Singapore?","1820\n 1821\n 1822\n 1823",user_ans,correct_ans), new Multiple_Choice("Question 3: \n","The earliest mosque in Singapore is believed to be","A. Jamar mosque\n B. Omar mosque \n C. Al Abram mosque \n D. Hajj ah Fatima mosque",user_ans,correct_ans) new Multiple_Choice("Question 4: \n","The oldest Jewish synagogue is the Mag both built in 1878. It is located at","\n A. Queen Street\n B. Waterloo Street \n C. Victoria Street\n D. cool Street",user_ans,correct_ans), new Multiple_Choice("Question 5: \n","The Sikhs make up a small but significant proportion of the Indian population of Singapore. They began arriving in Singapore from as early as 1881. Committed to their religion, they set about establishing temples. Today, the Central Sikh Temple is an imposing building, capped by an impressive dome. Where is it located?","\n A. Queen Street\n B. Silas Street\n C. Town Road \n D. mayflower Road",user_ans,correct_ans), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice(), new Multiple_Choice()]; var name = new Quiz(); name.quiz();，以便仅根据可用空间进行扩展。

因为他的新宽度不是android:layout_width="0dp"，所以您的文本视图将不会与图像重叠，这就是为什么他只会根据自己的约束进行扩展。

因此您需要执行以下操作：

wrap_content

如果您希望文本视图的高度与图像视图的高度完全相同，请添加<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <ImageView android:id="@+id/iv_close" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher_background" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/tv_actionbar_page_title" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="8dp" android:gravity="center" android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda" android:textSize="16sp" app:layout_constraintBottom_toBottomOf="@+id/iv_close" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/iv_close" app:layout_constraintTop_toTopOf="@+id/iv_close" /> </android.support.constraint.ConstraintLayout>，现在当您的文本较长时，它将可以滚动并且不会垂直扩展。

它看起来像这样：

根据评论进行编辑：

您可以使用以下布局：

android:layout_height="0dp"

为了获得这种外观：

或者您可以使用以下布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


<TextView
    android:id="@+id/tv_actionbar_page_title"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/iv_close"
    app:layout_constraintVertical_bias="0.0" />

<ImageView
    android:id="@+id/iv_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

为了获得这种外观：

如何使视图中心对齐，而不重叠其他视图[仅约束布局]

3 个答案: