最好的方式使繪圖圖像高效？

Question

我仍在學習如何構建Android應用程序，而我在設計中遇到的一個問題是如何一次顯示多個圖像，而不會崩潰和/或滯後。我看到有多個人建議你使用LazyLoaders，或者換掉我如何做，但我想知道我的特定設計的最佳方式是什麼，因爲它比較複雜。

設計大致如下：一個標題，包含文本和個人資料圖片。然後，裏面有一張3張卡片的水平滾動部分。每張卡包含9張照片的網格視圖（因此，3張卡片包含27張圖像。）除此之外，下面還有幾張圖片。

我已經更新了我的drawables，儘可能降低了分辨率，但沒有讓應用程序看起來很垃圾，但我仍然在爲延遲而苦苦掙扎。有沒有辦法讓卡片（以及隨後的圖片）在加載焦點時加載，還是有更好的加載圖片的方式，而不是使用我的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