如何根据屏幕尺寸改变imageview

Question

我尝试将一个图像视图（个人资料图像）、2 个文本视图（用户名和电子邮件）添加到导航中 header。

这是导航的 xml 代码 header

<?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"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
    android:id="@+id/header_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

<TextView
    android:id="@+id/header_username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
    android:id="@+id/header_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>

我通过 picasso 加载图像视图，这是我加载它的代码。

private void setNavHeader() {
    User user = presenter.getUser();
    username.setText(user.getUsername());
    email.setText(user.getEmail());
    try {
        Picasso.with(this)
                .load(user.getUserImage())
                .error(R.drawable.ic_menu_camera)
                .resize(200, 200)
                .into(profileImage);
    }catch(Exception e){
        profileImage.setImageResource(R.drawable.ic_menu_camera);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(200, 200);
        profileImage.setLayoutParams(layoutParams);
    }
}

这是我的输出但是，它只适合我的 phone 屏幕尺寸。当我将屏幕尺寸更改为较小的屏幕尺寸时。个人资料图片将覆盖用户名和电子邮件。如何根据屏幕大小更改个人资料图片的大小，这样就不会遮住用户名和电子邮件？

Answer 1

首先，移除try and catch。隐藏此错误并不好，只需检查可能的 url 问题并手动设置图像，就像在缓存块中一样。如果您使用 String 或 Uri，请检查用户图像 url 是否为空或 null。

重点是您使用的是 LinearLayout，它会注意子视图不会重叠。如果您更改 ImageView 高度，您的 TextViews 可能会被切到底部，因为您的 android:layout_height="@dimen/nav_header_height" 值定义的 space 不够。

在 XML 中设置您想要的高度和宽度，例如：

<ImageView
    android:id="@+id/header_image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

只需找到您的正确尺寸/询问您的设计师（如果您与设计师合作）这张图片的合适尺寸是多少。这将更改 ImageView 的视图边界，显示的图像当然将取决于此大小。

你可以玩玩imageView的以下属性：

android:scaleType
android:adjustViewBounds

这会更改图像在 ImageView 范围内的显示方式。

使用 dp 而不是像素，这也需要注意，您的图像视图在不同的设备尺寸上得到很好的缩放。

您还可以使用 Picasso 函数，例如：

Picasso.with(this)
            .load(user.getUserImage())
            .error(R.drawable.ic_menu_camera)

            .placeholder(...)

            .resize(imageView.getMeasuredWidth(), imageView.getMeasuredHeight()) // <-- is needed for some functions

            .fit()// <--
            .centerCrop()// <--
            .centerInside()// <--

            .into(profileImage);

只需找到能为您提供最佳结果的函数即可。

如何根据屏幕尺寸改变imageview

How to change imageview according to screen size

xml

android

imageview

android-layout

screen-size