如何动态调整约束布局中的textview大小以适应不同的屏幕大小？

时间：2018-07-04 07:28:10

标签： android android-layout user-interface responsive-design android-constraintlayout

屏幕截图

1）Samsung J6

2）Lenovo Vibe X3 6 inch screen

问题是，如在J6模型中那样，当更多屏幕可用时，如何调整歌词的文本视图以增加高度，而当屏幕空间较小时，如何降低歌词的文本视图呢？ 还是有什么方法可以避免J6模型中播放/暂停控制按钮下方的多余怪异空间？当我增加textview和按钮之间的空间时，J6变得正确，并且在lenovo模型中，按钮从屏幕上消失了？

我的XML代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="@drawable/bg"
    android:theme="@style/Base.Theme.AppCompat.Light.DarkActionBar"
    tools:context=".MainActivity">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="660dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="239dp"
        android:layout_height="240dp"
        android:layout_marginEnd="25dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="25dp"
        android:adjustViewBounds="false"
        android:scaleType="fitCenter"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/albumcover"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="34dp"
        android:layout_height="32dp"
        android:layout_marginLeft="25dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="32dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:srcCompat="@drawable/ic_baseline_surround_sound_24px" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="34dp"
        android:layout_height="32dp"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:srcCompat="@drawable/ic_baseline_more_vert_24px" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="Human Nature"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <SeekBar
        android:id="@+id/seekBar2"
        android:layout_width="402dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:progressTint="@color/colorAccent"
        android:thumbTint="@color/colorAccent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="43dp"
        android:layout_height="40dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekBar2"
        app:srcCompat="@drawable/ic_baseline_pause_24px" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="27dp"
        android:layout_height="27dp"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/imageView5"
        app:srcCompat="@drawable/ic_baseline_skip_next_24px" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="30dp"
        android:layout_height="26dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/imageView5"
        app:srcCompat="@drawable/ic_baseline_skip_previous_24px" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="36dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="36dp"
        android:layout_marginStart="8dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView7"
        app:srcCompat="@drawable/ic_baseline_shuffle_24px" />

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="36dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView6"
        app:layout_constraintTop_toTopOf="@+id/imageView6"
        app:srcCompat="@drawable/ic_baseline_repeat_24px" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="12dp"
        android:text="Housee De Racket"
        android:textAlignment="center"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="79dp"
        android:layout_marginTop="24dp"
        android:text="this space is for lyrics "
        android:textAlignment="center"
        android:textColor="#ffffff"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="25dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="8dp"
        android:text="01:23"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toTopOf="@+id/seekBar2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="8dp"
        android:text="01:24"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toTopOf="@+id/seekBar2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:layout_constraintVertical_bias="1.0" />


</android.support.constraint.ConstraintLayout>

</LinearLayout>

2 个答案:

答案 0 :(得分：0)

  1. 删除该LinearLayout;
  2. 使ConstraintLayout的高度达到match_parent；
  3. 您希望这些控制按钮在底部，因此请将底部约束设置为父级底部；
  4. ProgressBar从控制按钮的底部到顶部；
  5. 时间文本视图从控制按钮的底部到顶部；
  6. 像这样向上移动，因此您将只留下歌曲封面来填充剩余高度

答案 1 :(得分：0)

查看有关Autosizing TextViews

的内容

在确定如何调整文本视图大小时，实际上具有很大的灵活性。文档中的示例之一：

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:autoSizeTextType="uniform"
    android:autoSizeMinTextSize="12sp"
    android:autoSizeMaxTextSize="100sp"
    android:autoSizeStepGranularity="2sp" />
相关问题
最新问题