android - Fresco，如何为不同的设备缩放图像

Question

我正在使用 Fresco 构建一个应用程序图书馆，通过 Facebook。

如果我的应用程序可在不同设备之间使用，我在尝试理解如何使用 Fresco 实现 View 时遇到了问题。正如您在附图中看到的那样，我有一个 Nexus6、一个 NexusOne 和一个 Nexus7。

它们都具有相同的 Fresco Drawee，(200dp x 200dp)。正如我阅读 Fresco 的文档一样，修复图像大小是必要且强制性的。但是，我无法理解如何使用 Fresco 实现像使用 50% 图像宽度的 ImageView 这样简单的事情。

理想的结果是让图像使用一半的屏幕(宽度)，并为不同的文本留出剩余空间(显示标题+说明)。

通常我会使用权重来做到这一点，但是我不确定如何使用库来实现这一点，或者最佳实践是什么。

基于 this问题(和文档)，我不确定添加监听器是否是最佳选择。我只是不明白 Facebook 或其他使用此库的应用程序如何针对不同的设备执行此操作。

提前致谢

这个图片显示的代码基本如下:

            <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="10">

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/my_image_view"
                android:layout_width="200dp"
                android:layout_height="200dp"

                fresco:actualImageScaleType="focusCrop"
                fresco:backgroundImage="@drawable/user_icon"
                fresco:fadeDuration="300"
                fresco:placeholderImage="@color/common_action_bar_splitter"
                fresco:placeholderImageScaleType="fitCenter" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_toRightOf="@+id/my_image_view">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:text="Title 1" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:textColor="@color/menu_color"
                    android:text="Description 1" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:text="Title 2" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:textColor="@color/menu_color"
                    android:text="Description 2" />


            </LinearLayout>


        </RelativeLayout>

更新:

我也不知道如何获得全屏图像。如果我们必须指定尺寸或使用 match_parent，但在两者上使用 match_parent 将使用整个父级，我怎样才能得到类似于显示 Facebook 图片的图像？

我相信@Gueorgui Obregon 的想法是个好主意，但我仍然想知道问题是否出在将 50% 的屏幕用于图片的设计模式。例如，拿两个尺寸相同的手机型号(例如 MDPI)，但其中一个比另一个宽一点。使用尺寸方法，我得到的结果是在一部手机上它占据了屏幕的一半，但在另一部手机上，它会多一点/少一点。

总结:问题出在哪里？在设计 View 时按百分比思考是不是一个坏主意？我应该告诉我的设计师，Android 使用百分比是一个糟糕的设计理念吗？更重要的是，Facebook 如何才能实现像最后一张照片这样的效果(图片使用了大约 33% 的屏幕)？

Answer 1

您可以为不同屏幕的不同值文件夹使用dimensions.xml。

res/values/dimensions.xml
res/values-sw600dp/dimensions.xml -> 7+ inches
res/values-sw720dp/dimensions.xml -> 10+ inches

在每个维度上添加期望值

res/values/dimensions.xml

<dimen name="my_image_view_width">200dp</dimen>
<dimen name="my_image_view_height">200dp</dimen>

res/values-sw720dp/dimensions.xml

<dimen name="my_image_view_width">400dp</dimen>
<dimen name="my_image_view_height">400dp</dimen>

---

然后在你的SimpleDraweeView中简单地使用@dimen/my_image_view_width和@dimen/my_image_view_height

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="@dimen/my_image_view_width"
    android:layout_height="@dimen/my_image_view_height"
    fresco:actualImageScaleType="focusCrop"
    fresco:backgroundImage="@drawable/user_icon"
    fresco:fadeDuration="300"
    fresco:placeholderImage="@color/common_action_bar_splitter"
    fresco:placeholderImageScaleType="fitCenter" />

希望这对您有所帮助!