描画可能なイメージを効率的にする最も良い方法は？

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、私はこのすべてをオンザフライで学んでいて、約2週間はJavaを正しくコーディングしているので、答えは比較的単純です。

Answer 1

私はあなたの質問は、実際の答えを得るにはあまりにも広範であるが、ここではいくつかの考慮事項です怖い：

1）（指数関数的にお互いにネスト以上のビュー、レイアウト階層の深さを減らします）ゆっくりあなたのUIが取得します。どうして？ read here

2）は、すべてのこれらのビューをインスタンス化）の例PicassoまたはGlide

3のために、あなたのイメージをロードするためのライブラリを使用して、任意の時点でそれらの少量のみが表示されますので、しようと、おそらく非効率的です可能であればRecyclerViewを使用してください。

Answer 2

画像をスムーズに読み込む方法の1つです。 jpg形式の読み込みにも使用できます。 高解像度画像を効率的に表示するために使用することもできます。

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