RecyclerView.LayoutManagerについてのAndroidまたはもう一度の馬力

著者によると、この記事は、このようなエキサイティングな分野で最初の一歩を踏み出しているAndroid開発者を始めたばかりの人に役立つかもしれません。 この記事の主題の歴史は、トレーニングプロジェクトにいわゆる「すごい効果」を与えるというアイデアから始まりました。 これがどれほど成功したかを判断できます。 私は猫の下ですべての好奇心を尋ねます。



このすべての不名誉を伴うデモプロジェクトは、GitHubのリンクにあります。



私たちが興味を持っている画面は、最愛のRecyclerViewに基づいています。 しかし、ハイライトは、リストをスクロールすると、1つの完全に表示される上部要素が特別な方法で拡大縮小されることです。 この機能の特徴は、リストアイテムを構成するコンポーネントのスケーリングが異なることです。



ただし、一度見たほうがいいです。





リスト項目を詳細に検討してください。 プロジェクトでは、CardViewから継承されたクラスLaunchItemViewとして実装されます。 そのマークアップには、次のコンポーネントが含まれています。

• 画像-指定された高さ（スケーリング）で画像をレンダリングするように設計されたScaledImageViewクラス。
• 見出し。
• 説明文。

図 2.リスト項目の構造（LaunchItemView）。



リストをスクロールする過程で、次のことが発生します。

1. 要素の高さは、最小値（装飾付きのタイトルの高さに等しい）から最大値（装飾付きのタイトルと説明テキストを表示できる高さに等しい）に変化します。
2. 画像の高さは要素の高さから装飾を引いたものに等しく、幅はそれに比例して変化します。
3. 要素内の相対位置と説明テキストのサイズは変更されません。
4. スケーリング値は、装飾の対象となるすべてのコンテンツを表示するのに十分な最小サイズによって上から制限され、装飾の対象となるタイトルを表示するのに十分な最小サイズによって下から制限されます。
5. 境界値以外のスケーリングは、上部の完全に表示されるリストアイテムに適用されます。 その上にある要素には最大スケール、下にある要素-最小要素があります。

したがって、上方向にスクロールすると、要素のコンテンツが徐々に拡大され、イメージが比例的に拡大されます。 下にスクロールすると、逆の効果が見られます。



RecyclerViewのLayoutManagerと2つの追加コンポーネントを作成して、このようにタスクを設定します。 しかし、まず最初に。

LaunchLayoutManager

私のトレーニングプロジェクトはスペースの問題に専念しているため、コンポーネントには対応する名前が付けられています。



任意のLayoutManagerを作成するトピックを研究して、このトピックに関する2つの良い記事を見つけました[1、2]。 内容を繰り返しません。 代わりに、決定の最も興味深い点について説明します。



問題の分解を実行して、2つの主要な段階を特定しました。

1. 画面上に完全または部分的に表示される最初と最後の要素のインデックスを決定します。
2. 必要なスケーリングで可視要素をレンダリングします。

一般に、リストアイテムの場所とサイズは次のとおりです。









図3. RecyclerViewとその要素。

可視要素のインデックスの閉じた間隔の定義

図 3からvisibleは、3から11までのインデックスを持つ要素です。 さらに、このアルゴリズムによれば、インデックス0〜3の要素は最大サイズ、要素5〜12は最小サイズ、インデックス4の要素は最小と最大の中間です。



ご想像のとおり、可視要素の最小および最大インデックスを決定する際の重要なポイントの1つは、可視領域の上部境界に対してリストがスクロールされるオフセットです。



これらの値を決定するために設計されたcalculateVisiblePositionsメソッドを検討してください。

1 private void calculateVisiblePositions() { 2 if (mBigViewHeight != 0) { 3 mMaximumOffset = (getItemCount() - 1) * mBigViewHeight; 4 mFirstVisibleViewPosition = mOffset / mBigViewHeight; 5 if (mFirstVisibleViewPosition > getItemCount() - 1) { 6 mFirstVisibleViewPosition = 0; 7 mOffset = 0; 8 } 9 10 mLastVisibleViewPosition = mFirstVisibleViewPosition; 11 int emptyHeight = getHeight(); 12 mFirstVisibleViewTopValue = mBigViewHeight * mFirstVisibleViewPosition - mOffset; 13 int firstVisibleViewBottomValue = mFirstVisibleViewTopValue + mBigViewHeight; 14 emptyHeight -= firstVisibleViewBottomValue; 15 int secondVisibleViewHeight = getViewHeightByTopValue(firstVisibleViewBottomValue); 16 if (emptyHeight - secondVisibleViewHeight >= 0) { 17 emptyHeight -= secondVisibleViewHeight; 18 mLastVisibleViewPosition++; 19 int smallViewPosCount = emptyHeight / mSmallViewHeight; 20 mLastVisibleViewPosition += smallViewPosCount; 21 emptyHeight -= smallViewPosCount * mSmallViewHeight; 22 if (emptyHeight > 0) { 23 mLastVisibleViewPosition++; 24 } 25 } 26 if (mLastVisibleViewPosition > getItemCount() - 1) { 27 mLastVisibleViewPosition = getItemCount() - 1; 28 } 29 Timber.d("calculateVisiblePositions mFirstVisibleViewPosition:%d, mLastVisibleViewPosition:%d", mFirstVisibleViewPosition, mLastVisibleViewPosition); 30 } 31 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2行目-すべてのコンテンツ（見出し、テキストと画像の説明）を表示する最大サイズの要素の高さが決定されているかどうかを確認します。 そうでない場合は、続行しても意味がありません。



行3-リストのすべての要素をスクロールアップするスペースの量を計算します。ただし、1つを除き、最大許容オフセットです。 この値は、scrollVerticallyByメソッドのオフセット値を制限します。



行4-最初の可視要素のインデックスを計算します。 変数mFirstVisibleViewPositionは整数型に属するため、小数部分を破棄することにより、部分的に表示される最初の要素のケースを自動的に考慮します。



5〜8行目-最初に表示されている要素のインデックスが、リスト内で最後に使用可能な要素のインデックスを超えているかどうかがチェックされます。 これは、たとえば、リストが最初にスクロールアップされ、次にフィルターを適用するなどして要素の数が減少した場合に発生する可能性があります。 この場合、リストを最初に「巻き戻す」だけです。



10行目-最初の表示要素のインデックスを、最後のインデックスを見つけるための開始点として使用します。



行11-表示領域の高さを設定します。 この値は、可視要素の最大インデックスの検索中に減少します。



行12、13-最初の要素の描画長方形の上下の座標を決定します。



14行目-最初の要素の可視部分のサイズだけ、空き可視領域の量を減らします。 つまり 仮想的に最初の要素を画面に配置するかのように。



行15-2番目の表示要素の高さを計算します。 この要素は、スケーリングの対象となる可能性があります（アルゴリズムの条項5を参照）。 getViewHeightByTopValueメソッドの詳細を以下に説明します。



16行目-画面上の2番目の要素の「仮想配置」の後にまだ空きスペースがあるかどうかを確認します。



17行目-残りの空き容量を修正します。



18行目-最後に表示されている要素のインデックスをインクリメントします。



19行目-残りの空き領域に収まり、同時に完全に見える最小サイズの要素の最大数を計算します。



20行目-最後に表示された要素のインデックスを計算値で増やします。



21〜24行目-別の要素を部分的に配置する場所があるかどうかを確認します。 その場合、インデックスをもう1つ増やします。



次に、画面上の位置に応じて2番目の表示要素の高さを計算する方法について説明します。この要素の表示長方形の上部座標です。

 1 private int getViewHeightByTopValue(int topValue) { 2 topValue -= mTopAndBottomMargins; 3 if (topValue > mBigViewHeight) { 4 topValue = mBigViewHeight; 5 } else if (topValue < 0) { 6 topValue = 0; 7 } 8 float scale = 1 - (float) topValue / mBigViewHeight; 9 int height = (int) (mSmallViewHeight + scale * (mBigViewHeight - mSmallViewHeight)); 10 Timber.d("getViewHeightByTopValue topValue:%d, scale:%f, height:%d", topValue, scale, height); 11 return height; 12 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2行目-下マージンと上マージンをドロップします。



行3〜7-スケールを正しく計算するために、topの値の上から要素の最大の高さまで、および下からゼロまでを制限します。



8行目-スケーリング係数を計算します。これは、最大に展開された要素に対して1の値をとり、最小値に対して0を取ります。 この特定の結果を正確にするには、3〜7行目の制限が必要です。



9行目-スケーリング係数を考慮して、最小高さの追加として要素の高さを計算し、最大高さと最小高さの差を計算します。 つまり 係数0-最小高さ、および1-最小+（最大-最小）=最大。



これで、描画する要素の最初と最後のインデックスがわかりました。 それをする時間です！

必要なスケーリングで要素を描画する

レンダリングプロセスは本質的に周期的であるため、レンダリングの直前に、既存のRecyclerView要素でキャッシュをウォームアップします（もしあれば）。 このような手法は[1、2]で説明されており、ここでは詳しく説明しません。



fillDownメソッドを検討します。このメソッドは、使用可能な可視領域に沿って上から下に移動する要素を描画するように設計されています。

 1 private void fillDown(RecyclerView.Recycler recycler) { 2 boolean isViewFromCache; 3 int topValue = mFirstVisibleViewTopValue; 4 int bottomValue; 5 int viewHeight; 6 try { 7 for (int curPos = mFirstVisibleViewPosition; curPos <= mLastVisibleViewPosition; curPos++) { 8 isViewFromCache = true; 9 View view = mViewCache.get(curPos); 10 if (view == null) { 11 isViewFromCache = false; 12 view = recycler.getViewForPosition(curPos); 13 } else { 14 mViewCache.remove(curPos); 15 } 16 viewHeight = getViewHeightByTopValue(topValue); 17 bottomValue = topValue + viewHeight; 18 if (view instanceof LaunchItemView) { 19 ((LaunchItemView) view).updateContentSize(viewHeight); 20 } 21 if (isViewFromCache) { 22 if (view.getTop() != topValue) { 23 view.setTop(topValue); 24 } 25 if (view.getBottom() != bottomValue - mTopAndBottomMargins) { 26 view.setBottom(bottomValue - mTopAndBottomMargins); 27 } 28 attachView(view); 29 } else { 30 layoutView(view, topValue, bottomValue); 31 } 32 topValue = bottomValue; 33 } 34 } catch (Throwable throwable) { 35 Timber.d(throwable); 36 } 37 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3行目-最初の可視要素の上部座標で変数topValueを開始します。 この価値のストーブから、私たちは踊り続けます。



7行目-描画する要素のインデックスによってサイクルを開始します。



8行目-キャッシュに必要なアイテムが見つかると楽観的です。



9行目-キャッシュを調べます（希望がある場合）。



10-12行目-キャッシュに必要な要素が見つからなかった場合、RecyclerView.Recyclerクラスのインスタンスからそれを要求します。これは、特定の位置のアダプターからのデータで初期化されたビューを返します。



14行目-要素がまだキャッシュ内にあった場合、そこから削除します。



行16-画面上の位置に応じて要素の高さを計算します。



17行目-要素の下の境界線を計算します。



18〜20行目-実行方法がわかっている場合、要素のコンテンツをスケーリングします。



21行目-現在のビュー（キャッシュから取得）が以前にレンダリングされたかどうか、または新しいインスタンスを取得したかどうかを理解することが重要です。 これら2つのオプションには、異なるアプローチが必要です。



行22〜28-ビューがキャッシュから取得される場合、必要に応じて、上部と下部の座標の値を変更し、ビューをアタッチします。



30行目-ビューがキャッシュからではない場合、要素を表示するには、layoutViewメソッドを使用します。これについては以下で説明します。



行32-topValueを新しく描画されたビューの下側の境界にシフトして、この値がループの次の反復の開始点になるようにします。



次に、RecyclerView.Recyclerクラスのインスタンスから取得した新しいリストアイテムを表示するように設計されたlayoutViewメソッドについて説明します。

 1 private void layoutView(View view, int top, int bottom) { 2 addView(view); 3 measureChildWithMargins(view, 0, 0); 4 int decoratedMeasuredWidth = getDecoratedMeasuredWidth(view); 5 RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams(); 6 7 layoutDecorated(view, 8 layoutParams.leftMargin, 9 top + layoutParams.topMargin, 10 decoratedMeasuredWidth + layoutParams.rightMargin, 11 bottom + layoutParams.bottomMargin); 12 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2行目-RecyclerViewにビューを追加します。



3行目-ビューを測定します。



行4-ビューの幅を定義します。



5行目-ビューレイアウトオプションを取得します。



行7-実際に受信した座標でビューを描画します。

コンテンツのスケーリング

リスト項目の構造全体のうち、画像のみがスケーリングの対象です。 このスケーリングのロジックは、Viewから継承されたScaledImageViewクラスにカプセル化されています。



この場合、スケーリングは任意の時点で必要であり、ユーザーがリストをどれだけ集中的にスクロールするかなど、制御できない外部要因に依存します。 これはリアクティブプログラミングパラダイムに非常に自然に適合するため、RxJavaとホットデータソースで練習する機会を逃すことはできませんでした。



PublishProcessorを使用して、目的の画像の高さを決定する整数値のストリームを作成します。

 private PublishProcessor<Integer> mScalePublishProcessor;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、スケーリングを実行するには、必要な値を持つ別のストリーム要素を生成するだけです。

 public void setImageHeight(int height) { mScalePublishProcessor.onNext(height); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、このストリームの非同期処理がどのように行われるかを以下に示します。

 1 private void initObserver() { 2 mScalePublishProcessor 3 .filter(value -> value > 0 && value != mBitmapHeight && mOriginalBitmap != null) 4 .onBackpressureBuffer(1, 5 () -> Timber.d("initObserver: buffer overflow"), BackpressureOverflowStrategy.DROP_OLDEST) 6 .observeOn(Schedulers.computation(), false, 1) 7 .map(this::createScaledBitmap) 8 .map(this::setScaledBitmap) 9 .subscribe( 10 (value) -> { 11 invalidate(); 12 Timber.d("initObserver invalidate ThreadId:%d", Thread.currentThread().getId()); 13 }, Timber::d); 14 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行3-初期フィルタリングを実行します。

• ゼロ以下の値を破棄します。
• 値が以前にスケーリングされた画像の高さと等しい値は考慮しません。 つまり スケーリングが不要になった場合。
• 元の画像が初期化されていないときは拡大縮小しないでください。 初期化については、setBitmapメソッドで後述します。

4行目-バッファーサイズ1エレメントのバックプレッシャーと、バッファーから古いエレメントを絞り出す戦略を使用します。 このため、スケーリングに最も関連する高さの値を常に取得します。 私たちの場合、これは非常に重要です。なぜなら、ユーザーのアクション（たとえば、リストの集中的なスクロール）に応答して、要素を処理するよりも速く要素を生成する（スケーリングを実行する）ホットソースがあるためです。 このような状況では、値をバッファに蓄積してこれらの要素を順番に処理することは意味がありません。これらの要素は既に古くなっているため、ユーザーはすでにこの状態を「押しつぶし」ています。



効果を説明および強化するために、画像のスケーリング方法（createScaledBitmap）に25ミリ秒の遅延を追加し、以下の2つの視覚化を行いました。背圧なし（左）と背圧あり（右）。 左側のインターフェースは明らかにユーザーのアクションの背後にあり、何らかの独自の生活を送っています。 正しい-スケーリング方法の追加の遅延により滑らかさが失われましたが、応答性はありません。





6行目-バッファーのサイズで作業をSchedulers.computation（）ストリームに転送します。



7行目-スケーリングを実行します（以下の方法の説明を参照）。



8行目-表示するスケーリング画像を設定します。



9行目-ストリームをサブスクライブします。



11行目-スケーリングの最後に、要素を再描画します。



createScaledBitmapメソッド。目的のサイズの画像の取得に直接関与します。

 1 private Bitmap createScaledBitmap (Integer value) { 2 Timber.d("createScaledBitmap value:%d", value); 3 if (value > mHeightSpecSize) { 4 value = mHeightSpecSize; 5 } 6 return Bitmap.createScaledBitmap(mOriginalBitmap, value, value, false); 7 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行3〜5-最大高さをビューサイズに制限します。これは、onMeasureメソッドで計算されます。



6行目-元の画像から目的のサイズの画像を作成します。



setScaledBitmapメソッドでは、ビューに表示するためにスケーリングされた画像を保存します。

 1 private Boolean setScaledBitmap(Bitmap bitmap) { 2 try { 3 mBitmapLock.lock(); 4 if (bitmap != mDrawBitmap && mDrawBitmap != null) { 5 mDrawBitmap.recycle(); 6 } 7 mDrawBitmap = bitmap; 8 mBitmapHeight = bitmap.getHeight(); 9 } catch (Throwable throwable) { 10 Timber.d(throwable); 11 } 12 mBitmapLock.unlock(); 13 return true; 14 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行3、12-ロックを使用して、画面に描画される画像を含む変数へのアクセスを同期します。



行4〜6-以前に作成したイメージを使用します。



7〜8行目-新しい画像とそのサイズを覚えておいてください。



setBitmapメソッドは、元の画像を設定します。

 1 public void setBitmap(Bitmap bitmap) { 2 if (bitmap != null) { 3 mOriginalBitmap = Bitmap.createScaledBitmap(bitmap, mWidthSpecSize, mHeightSpecSize, false); 4 if (bitmap != mOriginalBitmap) { 5 bitmap.recycle(); 6 } 7 int height = mBitmapHeight; 8 mBitmapHeight = 0; 9 setImageHeight(height); 10 } 11 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行3-元の画像を拡大縮小して寸法を表示します。 これにより、元の画像のサイズがビューよりも大きい場合、createScaledBitmapメソッドでスケーリングを実行するときにリソースを節約できます。



4-6行目-古い元の画像を破棄します。



7〜9行目-initObserverメソッドのフィルターを克服するためにスケーリングの高さをゼロに設定し、ストリーム要素を生成して新しいイメージを目的のスケールで再描画します。

まとめ

記事の一部として、トレーニングプロジェクトの作業中に思いついたいくつかのアイデアを明確に述べようとしました。 デモプロジェクトは、GitHubにあります。 コメント、提案、提案、批判とともに、コメントしてください。

関連リンク

1. Android向けレシピ：LayoutManagerを美味しくする方法
2. RecyclerView LayoutManagerの構築-パート1