使可绘制图像高效的最佳方法？

Question

我仍在学习如何构建 Android 应用，我在设计中经常遇到的一个问题是如何一次显示多张图片，而不会崩溃和/或延迟。我看到很多人建议你使用 LazyLoaders，或者换掉我的做法，但我想知道我的具体设计的最佳方式是什么，因为它相对复杂。

设计大致如下：一个标题，带有文字和头像。然后，一个水平滚动部分，里面有 3 张卡片。每张卡片包含 9 张照片的网格视图（因此，3 张卡片包含 27 张图片。）除此之外，下面还有一些图片。

我已将我的可绘制对象更新为尽可能低分辨率，而不会让应用看起来很垃圾，但我仍在努力解决延迟问题。有没有办法让卡片（以及随后的图像）在它们被拉到焦点后加载，或者有没有更好的加载图像的方法，而不是使用我的可绘制对象？

以下是 XML 的外观：

<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:theme="@style/WaveTheme"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/wave_drawer_background"
    android:textColor="@color/wave_drawer_primary_text"
    android:titleTextColor="@color/wave_drawer_primary_text"
    android:subtitleTextColor="@color/wave_drawer_primary_text"
    android:elevation="4dp" />

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    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="275dp"
            android:background="#EEE"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:background="#EEE"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="300dp"
                    android:layout_height="75dp"
                    android:layout_marginTop="5dp"
                    android:background="#EEE"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="300dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginTop="5dp"
                        android:layout_height="55dp"
                        android:layout_marginRight="5dp"
                        android:orientation="vertical"
                        >

                        <android.support.v7.widget.AppCompatTextView
                            android:layout_width="match_parent"
                            android:id="@+id/dashDate"
                            android:text="@string/currentDate"
                            android:paddingLeft="15dp"
                            android:paddingTop="0dp"
                            android:layout_marginTop="5dp"
                            android:textSize="12dp"
                            fontPath="fonts/Montserrat-SemiBold.otf"
                            android:textAllCaps="true"
                            android:textColor="#9e9e9e"
                            android:layout_height="15dp" />

                        <android.support.v7.widget.AppCompatTextView
                            android:layout_width="match_parent"
                            android:text="FOR YOU"
                            android:paddingLeft="15dp"
                            android:textSize="30dp"
                            android:includeFontPadding="false"
                            fontPath="fonts/Montserrat-Bold.otf"
                            android:textAllCaps="true"
                            android:textColor="#000"
                            android:layout_height="40dp" />

                    </LinearLayout>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="75dp"
                    android:layout_gravity="right"
                    android:background="#EEE"
                    android:layout_marginTop="5dp"
                    android:orientation="horizontal"
                    android:layout_marginRight="20dp">

                    <LinearLayout
                        android:layout_width="35dp"
                        android:layout_gravity="center_vertical"
                        android:layout_height="35dp"
                        android:layout_marginTop="5dp"
                        android:layout_marginRight="5dp"
                        >

                        <de.hdodenhof.circleimageview.CircleImageView
                            xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:id="@+id/profile_image"
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/temp_profile"
                            />

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="match_parent">

                <HorizontalScrollView
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:scrollbars="none">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="330dp"
                            android:layout_height="180dp"
                            android:orientation="vertical"
                            android:layout_marginLeft="10dp"
                            android:background="@drawable/layout_bg">

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="100dp"
                                android:orientation="horizontal"
                                android:columnCount="3"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                android:layout_marginTop="15dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/topcharts"
                                    android:layout_height="100dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="125dp"/>

                                <GridLayout
                                    android:orientation="vertical">
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/zedd"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/symphony"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                </GridLayout>

                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/calvinharris"
                                    android:layout_height="100dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="125dp"/>
                            </GridLayout>

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="50dp"
                                android:orientation="horizontal"
                                android:columnCount="5"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/imtheone"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/littlemix2"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/kygo2"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/gallawaygirl"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/runup"
                                    android:layout_height="50dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="62.5dp"/>
                            </GridLayout>
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="330dp"
                            android:layout_height="180dp"
                            android:orientation="vertical"
                            android:layout_marginLeft="10dp"
                            android:background="@drawable/layout_bg">

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="100dp"
                                android:orientation="horizontal"
                                android:columnCount="3"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                android:layout_marginTop="15dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/oldbutgoldnew"
                                    android:layout_height="100dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="145dp"/>

                                <GridLayout
                                    android:orientation="vertical">
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/derulo"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/jordan"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                </GridLayout>

                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/beyonce"
                                    android:layout_height="100dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="105dp"/>
                            </GridLayout>

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="50dp"
                                android:orientation="horizontal"
                                android:columnCount="5"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/mama"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/ruby"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/slim"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/spice"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/viva"
                                    android:layout_height="50dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="62.5dp"/>
                            </GridLayout>
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="330dp"
                            android:layout_height="180dp"
                            android:orientation="vertical"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:background="@drawable/layout_bg">

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="100dp"
                                android:orientation="horizontal"
                                android:columnCount="3"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                android:layout_marginTop="15dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/bedtime"
                                    android:layout_height="100dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="125dp"/>

                                <GridLayout
                                    android:orientation="vertical">
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/zedd"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                    <com.makeramen.roundedimageview.RoundedImageView
                                        app:riv_corner_radius="3dip"
                                        android:src="@drawable/symphony"
                                        android:layout_height="50dp"
                                        android:scaleType="centerCrop"
                                        android:padding="1dp"
                                        android:layout_width="62.5dp"/>
                                </GridLayout>

                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="5dip"
                                    android:src="@drawable/calvinharris"
                                    android:layout_height="100dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="125dp"/>
                            </GridLayout>

                            <GridLayout
                                android:layout_width="310dp"
                                android:layout_height="50dp"
                                android:orientation="horizontal"
                                android:columnCount="5"
                                android:layout_marginRight="10dp"
                                android:layout_marginLeft="10dp"
                                >
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/imtheone"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/littlemix2"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/kygo2"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/gallawaygirl"
                                    android:layout_height="50dp"
                                    android:scaleType="centerCrop"
                                    android:padding="1dp"
                                    android:layout_width="62.5dp"/>
                                <com.makeramen.roundedimageview.RoundedImageView
                                    app:riv_corner_radius="3dip"
                                    android:src="@drawable/runup"
                                    android:layout_height="50dp"
                                    android:padding="1dp"
                                    android:scaleType="centerCrop"
                                    android:layout_width="62.5dp"/>
                            </GridLayout>


                        </LinearLayout>

                    </LinearLayout>

                </HorizontalScrollView>

            </LinearLayout>

        </LinearLayout>

XML 从那里继续，但上面是导致问题的原因。

PS，请回答相对简单的答案，因为我正在快速学习所有这些，并且只正确编码 Java 大约 2 周！

Answer 1

恐怕您的问题过于宽泛，无法得到实际答案，但这里有一些注意事项：

1) 减少布局层次结构的深度，相互嵌套的视图越多，用户界面的（指数）速度就会越慢。为什么？ read here

2) 使用库加载图像，例如 Picasso 或 Glide

3) 实例化所有这些视图可能效率低下，因为在任何给定时间只有一小部分可见，尽可能尝试使用RecyclerView

Answer 2

这是平滑加载图像的方法之一。也可用于加载 jpg 格式。 它还可用于减少高分辨率图像以有效显示。

https://developer.android.com/topic/performance/graphics/load-bitmap.html