【发布时间】:2017-11-18 06:30:53
【问题描述】:
下面是我的 MainActivity 屏幕设计
|Top Navigation Bar
|Content Area
|Bottom Navigation Bar
我想在内容区域显示背景图像。填满整个内容区域
我从下面的服务器获取背景图像是我的 JSON 响应,如果设备是手机或平板电脑,我选择 phonePortrait 或 tabletPortrait 图像来显示背景图像。如果设备是横向使用 tabletLandscape 图像。 Android 和 IOS 应用都使用此响应。
{
meta: {
timeToCache: 5
},
body: {
....
title: "LIVE this week",
description: "NBA",
phonePortrait: "https://xyx.com.au/home-nba-r1.jpg",
tabletPortrait: "https://xyx.com.au//home-nba-r2.jpg",
tabletLandscape: "https://xyx.com.au/home-nba-r3.jpg",
phoneSmallPortrait: "https://xyx.com.au/home-nba-r4.jpg",
....
}
}
我使用 Picasso 库将图像加载到背景图像视图中
Picasso.with(getContext())
.load(imageUrl)
.fit()
.into(back_img);
布局文件
<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:id="@+id/home_template_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="89dp">
<ImageView
android:id="@+id/back_img"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/loginbg"
android:contentDescription="@string/app_description"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"
app:layout_constraintTop_toTopOf="parent"
android:adjustViewBounds="true"
android:layout_marginTop="0dp"/>
....
</android.support.constraint.ConstraintLayout>
但问题是图像显示不正确(图像拉伸或剪切顶部),保持图像纵横比并显示为所有 android 屏幕尺寸的背景图像的最佳方法是什么
a) 对于纵向模式和横向模式,我是否需要为 mdpi/hdpi/xhpdi/xxhdpi 引入多个图像,如果需要,图像尺寸应该是多少?
b) 有没有其他方法可以让我使用单张图片在所有纵向模式下工作,而单张图片在横向模式下工作
c) 我尝试使用下面的代码,但仍然无法正确显示图像
/* DisplayMetrics displayMetrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int screenHeight = displayMetrics.heightPixels;
int screenWidth = displayMetrics.widthPixels;
int toolBarHeight = getActivity().findViewById(R.id.toolbar).getHeight();
int bottomBarHeight = getActivity().findViewById(R.id.tabs).getHeight();
int viewPortHeight = screenHeight - (toolBarHeight + bottomBarHeight);
Picasso
.with(getContext())
.load(imageUrl)
//.resize(screenWidth,viewPortHeight) // resizes the image to these dimensions (in pixel)
.fit()
.centerInside()
.into(parent_home_template_back_img);*/
【问题讨论】: