Android 应用无法针对小型设备正确缩放
Android app not scaling properly for small devices
我正在制作一个 android 应用程序,其中某个布局未缩放 properly.The 卡片视图在每个视图上都发生冲突,我知道这是因为硬编码像素,但如果我不这样做我怎样才能实现这种类型的输出。
这是我的 XML 代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="221dp"
android:layout_height="144dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="161dp"
android:layout_height="146dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView25"
android:layout_width="143dp"
android:layout_height="133dp"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
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/culinary"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.072">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="122dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/music"
app:layout_constraintVertical_bias="0.009">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="99dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.974"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="60dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
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/photography"
app:layout_constraintVertical_bias="0.225">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="390dp"
android:layout_height="165dp"
android:layout_marginTop="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/handicrafts"
app:layout_constraintVertical_bias="0.034">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="77dp"
android:layout_height="124dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/acting"
app:layout_constraintHorizontal_bias="0.222"
app:layout_constraintStart_toEndOf="@+id/drawing"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.083">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</ScrollView>
这是所需的输出和我得到的输出:
请帮我解决这个问题!
在Android中,开发android应用程序时需要考虑不同屏幕尺寸的数量。
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
为了解决您的问题,我建议使用 ConstraintLayout with guidelines and Chains 来支持不同的屏幕尺寸。
这是一个布局示例,看起来与您想要的相同:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/button6"
app:layout_constraintDimensionRatio=""
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button9"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintStart_toEndOf="@+id/button8"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintBottom_toBottomOf="@+id/button6"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button6"
app:layout_constraintTop_toTopOf="@+id/button6" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button6" />
<Button
android:id="@+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button7" />
</android.support.constraint.ConstraintLayout>
它看起来像这样:
如果您是 android 的新手,我建议您从更简单的布局开始,因为 ConstraintLayout 有点棘手。它试图同时成为一切,这使得它使用起来很复杂。改为尝试 LinearLayout。我尝试编辑您的布局,结果如下。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="146dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView23"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView25"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView26"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
我正在制作一个 android 应用程序,其中某个布局未缩放 properly.The 卡片视图在每个视图上都发生冲突,我知道这是因为硬编码像素,但如果我不这样做我怎样才能实现这种类型的输出。
这是我的 XML 代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="221dp"
android:layout_height="144dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="161dp"
android:layout_height="146dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView25"
android:layout_width="143dp"
android:layout_height="133dp"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
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/culinary"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.072">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="122dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/music"
app:layout_constraintVertical_bias="0.009">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="99dp"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="400dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.974"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="146dp"
android:layout_height="128dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="60dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
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/photography"
app:layout_constraintVertical_bias="0.225">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="390dp"
android:layout_height="165dp"
android:layout_marginTop="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/handicrafts"
app:layout_constraintVertical_bias="0.034">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="77dp"
android:layout_height="124dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/acting"
app:layout_constraintHorizontal_bias="0.222"
app:layout_constraintStart_toEndOf="@+id/drawing"
app:layout_constraintTop_toBottomOf="@+id/photography"
app:layout_constraintVertical_bias="0.083">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</ScrollView>
这是所需的输出和我得到的输出:
请帮我解决这个问题!
在Android中,开发android应用程序时需要考虑不同屏幕尺寸的数量。
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
为了解决您的问题,我建议使用 ConstraintLayout with guidelines and Chains 来支持不同的屏幕尺寸。
这是一个布局示例,看起来与您想要的相同:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/button6"
app:layout_constraintDimensionRatio=""
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button9"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="@+id/button8"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintStart_toEndOf="@+id/button8"
app:layout_constraintTop_toTopOf="@+id/button8" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintBottom_toBottomOf="@+id/button6"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button6"
app:layout_constraintTop_toTopOf="@+id/button6" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button6" />
<Button
android:id="@+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button7" />
</android.support.constraint.ConstraintLayout>
它看起来像这样:
如果您是 android 的新手,我建议您从更简单的布局开始,因为 ConstraintLayout 有点棘手。它试图同时成为一切,这使得它使用起来很复杂。改为尝试 LinearLayout。我尝试编辑您的布局,结果如下。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="146dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/culinary"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView23"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/culinary" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/music"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView25"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:foregroundGravity="center"
app:srcCompat="@drawable/music" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/literature"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView26"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/literature" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/acting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drama" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/design"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView17"
android:layout_width="114dp"
android:layout_height="105dp"
android:layout_gravity="center"
app:srcCompat="@drawable/fashion" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.CardView
android:id="@+id/handicrafts"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/handicraft" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="@+id/drawing"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/drawing2" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/photography"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/photography1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/miscellanous"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:cardCornerRadius="17dp"
app:cardElevation="20dp">
<ImageView
android:id="@+id/imageView22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/misc" />
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>