图像视图不在不同设备之间缩放
Image View Not Scaling Between Different Devices
我的activity结构如下:
填充有适配器和 CardView 布局的回收视图。
CardView 由包含一个图像和两个文本框的约束布局组成。
图像设置为从 URL 异步加载的可绘制对象。
这是一些代码:
图片加载:
try {
InputStream is = (InputStream) new URL(url).getContent();
Drawable d = Drawable.createFromStream(is, "src name");
Bitmap bitmap = ((BitmapDrawable) d).getBitmap();
Drawable temp = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, 300, 300, true));
return temp;
}
catch (Exception e) {
e.printStackTrace();
return null;
}
This is called later in a different function where vh is the ViewHolder:
vh.imageView.setImageDrawable(d);
卡片视图XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true"
app:contentPadding="16dp" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/playlist_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
etc...
RecyclerView XML:
<?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"
tools:context=".PlaylistChoose">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/playlist_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="1dp"
android:layout_marginEnd="1dp"
android:clickable="true"
android:focusable="auto"
android:foreground="?attr/selectableItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="@layout/custom_playlist_view" >
</androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>
目前,当我 运行 在虚拟设备上使用此代码时,图像显示正常,但是当我 运行 在 Galaxy S7 Edge 上使用该应用程序时,图像显得非常小。然后,我尝试将 Drawable temp = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, 300, 300, true));
中的高度和宽度从 300 增加到大约 1400,然后应用程序 运行 在 S7 上正常但虚拟设备现在显示的图像大得离谱。我有点困惑,因为图像位于设置为包装内容的约束布局内,并且两部手机的内容大小相同,所以我不明白为什么实际大小会有所不同...提前致谢!感谢任何帮助:)
部分图片:
AVD 1400:https://gyazo.com/1c4ab4ffb9266e191357dd3e0dcd2f5c
S7 1400: https://gyazo.com/fd87f094bf7f23933543369b206b794a
尝试在 ImageView 中添加 scaleType 和调整视图边界
<ImageView
android:id="@+id/playlist_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
我有点困惑,因为图像位于设置为包装内容的约束布局内,并且内容大小对于 phones 是相同的
不同 phone 的内容可能相同,但因为在 ImageView
上使用 wrap_content
时不同 phone 的屏幕尺寸不同,所以看起来不一样在所有设备上都一样。
如何修复:
有了 ConstraintLayout
你会想做这样的事情:
将其用作图像视图:
<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.25"
app:layout_constraintHeight_percent="0.25"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/your_image" />
现在,这将恰好其父级宽度和高度的 25%。
如果你想改变图片的大小,只需改变:
app:layout_constraintWidth_percent="0.25"
app:layout_constraintHeight_percent="0.25"
你可以使用
android:scaleType="fitXY"
<ImageView
android:id="@+id/playlist_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher" />
已解决!这是由于@ADM 的建议结合使用滑行库以及@Tamir Abutbul 的比例和约束百分比建议,我的图像现在可以正确加载:)
XML:
<ImageView
android:scaleType="fitXY"
app:layout_constraintHeight_percent="1"
app:layout_constraintWidth_percent="0.25"
android:id="@+id/playlist_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
滑行代码:
Glide.with(context).load(url).into(vh.imageView);
我的activity结构如下:
填充有适配器和 CardView 布局的回收视图。
CardView 由包含一个图像和两个文本框的约束布局组成。
图像设置为从 URL 异步加载的可绘制对象。
这是一些代码:
图片加载:
try {
InputStream is = (InputStream) new URL(url).getContent();
Drawable d = Drawable.createFromStream(is, "src name");
Bitmap bitmap = ((BitmapDrawable) d).getBitmap();
Drawable temp = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, 300, 300, true));
return temp;
}
catch (Exception e) {
e.printStackTrace();
return null;
}
This is called later in a different function where vh is the ViewHolder:
vh.imageView.setImageDrawable(d);
卡片视图XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true"
app:contentPadding="16dp" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/playlist_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
etc...
RecyclerView XML:
<?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"
tools:context=".PlaylistChoose">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/playlist_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="1dp"
android:layout_marginEnd="1dp"
android:clickable="true"
android:focusable="auto"
android:foreground="?attr/selectableItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="@layout/custom_playlist_view" >
</androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>
目前,当我 运行 在虚拟设备上使用此代码时,图像显示正常,但是当我 运行 在 Galaxy S7 Edge 上使用该应用程序时,图像显得非常小。然后,我尝试将 Drawable temp = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, 300, 300, true));
中的高度和宽度从 300 增加到大约 1400,然后应用程序 运行 在 S7 上正常但虚拟设备现在显示的图像大得离谱。我有点困惑,因为图像位于设置为包装内容的约束布局内,并且两部手机的内容大小相同,所以我不明白为什么实际大小会有所不同...提前致谢!感谢任何帮助:)
部分图片:
AVD 1400:https://gyazo.com/1c4ab4ffb9266e191357dd3e0dcd2f5c
S7 1400: https://gyazo.com/fd87f094bf7f23933543369b206b794a
尝试在 ImageView 中添加 scaleType 和调整视图边界
<ImageView
android:id="@+id/playlist_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
我有点困惑,因为图像位于设置为包装内容的约束布局内,并且内容大小对于 phones 是相同的
不同 phone 的内容可能相同,但因为在 ImageView
上使用 wrap_content
时不同 phone 的屏幕尺寸不同,所以看起来不一样在所有设备上都一样。
如何修复:
有了 ConstraintLayout
你会想做这样的事情:
将其用作图像视图:
<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.25"
app:layout_constraintHeight_percent="0.25"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/your_image" />
现在,这将恰好其父级宽度和高度的 25%。
如果你想改变图片的大小,只需改变:
app:layout_constraintWidth_percent="0.25"
app:layout_constraintHeight_percent="0.25"
你可以使用
android:scaleType="fitXY"
<ImageView
android:id="@+id/playlist_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher" />
已解决!这是由于@ADM 的建议结合使用滑行库以及@Tamir Abutbul 的比例和约束百分比建议,我的图像现在可以正确加载:)
XML:
<ImageView
android:scaleType="fitXY"
app:layout_constraintHeight_percent="1"
app:layout_constraintWidth_percent="0.25"
android:id="@+id/playlist_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/playlist_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_launcher" />
滑行代码:
Glide.with(context).load(url).into(vh.imageView);