Question

我有一个使用ConstraintLayout创建的设计。在设计窗格上还可以，但是当我在模拟器上运行它时就不一样了。下面是它在设计视图上的外观图像

下一个是它在模拟器上的外观。

清单清单

 <activity

    android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"
 android:name=".WelcomeActivity" />

我已经安装了这些 implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0'

compileSdkVersion 28
minSdkVersion 16
targetSdkVersion 28

我为AppCompatActivity类扩展了WecomeActivity。我也尝试过使缓存无效并重新启动，但是它不起作用。我不知道是什么原因造成的。感谢您的帮助。

这是代码。

activity_welcome.yml

<?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"
 tools:context=".WelcomeActivity">

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="96dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:text="@string/safe"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="45dp"
    android:layout_height="20dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="20dp"
    android:text="@string/cheap"
    app:layout_constraintBottom_toTopOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="411dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:contentDescription="@string/todo"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.515"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    tools:srcCompat="@drawable/guliver_go_logo" />

<TextView
    android:id="@+id/textView"
    android:layout_width="70dp"
    android:layout_height="20dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:text="@string/convinient"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<Button
    android:id="@+id/welcome_login_button"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="141dp"
    android:layout_height="63dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="88dp"
    android:layout_weight="1"
    android:background="@drawable/button_login_rounded"
    android:text="@string/start_phone_auth"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="20sp"
    app:backgroundTint="@color/login_button_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.275"
    app:layout_constraintStart_toStartOf="parent" />

 <Button
    android:id="@+id/welcome_call_button"

 style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
    android:layout_width="141dp"
    android:layout_height="63dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="9dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="88dp"
    android:layout_weight="1"
    android:background="@drawable/button_call_rounded"
    android:drawablePadding="5dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    app:backgroundTint="@color/call_button_color"
    app:icon="@drawable/ic_call"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.83"
    app:layout_constraintStart_toStartOf="parent" />

 </android.support.constraint.ConstraintLayout>

Answer 1

这是布局，因为您可能缺少图像约束或分配了错误的图像约束。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <ImageView
            android:layout_width="0dp"
            android:layout_height="400dp" tools:srcCompat="@tools:sample/avatars[1]"
            android:id="@+id/imageView" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text One"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView" android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text Two"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textView" android:layout_marginTop="8dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView3" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <Button
            android:text="Phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintBaseline_toBaselineOf="@+id/button2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"/>
    <Button
            android:text="Call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
            app:layout_constraintStart_toEndOf="@+id/button" android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>


</android.support.constraint.ConstraintLayout>

或使用工具栏将主题设置为 Theme.MaterialComponents.Light.NoActionBar ，而不是此 Theme.MaterialComponents.Light.DarkActionBar 。然后申请

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/toolbar" app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
            android:layout_width="0dp"
            android:layout_height="400dp" tools:srcCompat="@tools:sample/avatars[1]"
            android:id="@+id/imageView" app:layout_constraintTop_toBottomOf="@id/toolbar"
            android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text One"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView" android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text Two"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textView" android:layout_marginTop="8dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView3" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <Button
            android:text="Phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintBaseline_toBaselineOf="@+id/button2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"/>
    <Button
            android:text="Call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
            app:layout_constraintStart_toEndOf="@+id/button" android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>


</android.support.constraint.ConstraintLayout>

对于小屏幕手机，在ConstraintLayout之后添加ScrollView （仅当您的开发的手机屏幕<5.0时）。

设计视图上的UI在模拟器中未显示相同

1 个答案: