使drawable图像高效的最佳方法是什么？

Question

我还在学习如何构建Android应用程序，而我在设计中遇到的一个问题是如何一次显示多个图像，而不会出现崩溃和/或延迟。我见过很多人建议你使用LazyLoaders，或者换掉我是怎么做的，但是我想知道我的具体设计最好的方法是什么，因为它相对复杂。

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

我已经将我的drawables更新为尽可能低的res而不会让应用程序看起来像垃圾，但我仍然在努力解决滞后问题。有没有办法让卡片（以及随后的图像）在被拉焦后加载，或者是否有更好的加载图像的方式，而不是使用我的drawables？

以下是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）减少布局层次结构的深度，你嵌入的视图越多，你的ui会越快（指数）。为什么？ read here

2）使用库加载图片，例如Picasso或Glide

3）实例化所有这些视图可能效率低下，因为在任何给定时间只能看到少量视图，尽量使用RecyclerView

Answer 2

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

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