2016-03-08 20 views
12
Android Studio 2.0 beta 6 

は、私はそれが20dpになるように、現在の場所であるから、上から右と20dpからツールバー内ImageView (ivSettings)を移動するためにViewPropertyAnimatorを使用しようとしています取得します。 ImageView (ivSearch) 20dpを左上から上に移動します。親のレイアウトの幅

イメージビューはToolbarに含まれています。

これは初期状態で、アイコンをツールバーの上部の角に移動したいとします。

enter image description here

私が使用していたコードは、幅を取得し、ivSettingsが右から20dpであることを取得するための値を減算するために、このです。

final DisplayMetrics displayMetrics = new DisplayMetrics(); 
getActivity().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); 
final float widthPx = displayMetrics.widthPixels; 

ivSearch.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .x(20) 
    .y(20) 
    .setDuration(250) 
    .start(); 

ivSettings.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .x(widthPx - 160) 
    .y(20) 
    .setDuration(250) 
    .start(); 

しかし、これをさまざまな画面サイズで試したところ、正確な幅の計算はできません。これを行うより良い方法はありますか?私は問題はアニメーターの方法は、値は、生のピクセル値であることを期待しているということであると考えている任意の提案

+0

代わりにツールバーから幅を使用してみてください。 – Piyush

+0

toolbar.getWidth()は常に0を返すようにwidthを 'match_parent'に設定しました。 – ant2009

+0

dpをピクセルに変換していますか、widthPx - 160は各デバイスの幅を計算する式ですか? – Piyush

答えて

7

効果を得るには、translationXtranslationYプロパティを使用することができます。これらのプロパティは、ビューの元のX座標とY座標からのオフセットとして機能します。

本質的に、translationXはaの値が正の値の場合はaの値を、Xの値が負の値の場合は、左に移動します。同様に、translationYは、Y座標から負の値の場合は、正の場合は下に向かって、上の場合は上に移動します。

最後に、検索アイコンの左上隅と、各ビューのゼロ埋め込みの設定アイコンの右上隅に到達することを前提としています。

検索アイコンの場合は、ツールバーの左上隅に配置することをおすすめします。次に、translationXとtranslationYの両方を20pに設定します。それはあなたのイメージと同じ場所に検索アイコンを配置する必要があります。検索アイコンを左上に移動するには、translationX & Yを20dpから0dpにアニメートするだけです。

設定アイコンで同じ操作を繰り返しますが、translationXを-20dpに、translationYを20dpに設定します。これにより、画像と同じ位置に配置されます。両方の値を0にアニメートして、目的のアニメーションを実現します。

ここに参考になるアニメーションコードがあります。

ivSearch.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .translationX(0) // Takes value in pixels. From 20dp to 0dp 
    .translationY(0) // Takes value in pixels. From 20dp to 0dp 
    .setDuration(250) 
    .start(); 

ivSettings.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .translationX(0) // Takes value in pixels. From -20dp to 0dp 
    .translationY(0) // Takes value in pixels. From 20dp to 0dp 
    .setDuration(250) 
    .start(); 

// To get pixels from dp 
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics()); 

このアプローチの大きな点は、親の次元を知る必要がなくなったことです。あなたが気にするのは、translationXtranslationYで指定したオフセットだけです。

5

ため

感謝します。コードは、中密度の画面で意図したとおりに機能するように見えます。例えば。 hdpi画面では、20pxの代わりに30pxを同じ場所に配置する必要があります。高密度スクリーン上に存在するコードは、アイコンをエッジに近づけるでしょう...

これは、予想されるdp値を生のピクセル値に変換し、アニメーションに使用する必要があることを意味します。 dpをpxに変換してすべてのデバイスで正しいようにする便利な方法があります。私は、ギアの左側が160dpになるようにしたいと考えています(160dpの値にはxプロパティのギアイメージの幅も含める必要があるため、ギアの左側を具体的に言います)。画像の左側から)。 160dp =歯車のイメージ幅+希望の右マージン距離。 ic_gearというリソースがあるとします。 Drawable drawable = getResources()。getDrawable(R.drawable.ic_gear); float bitmapWidth = getIntrinsicWidth();

float rawPX20DPValue = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()); 

float rawPXLeftOffset = rawPX20DPValue + bitmapWidth; 

ivSearch.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .x(rawPX20DPValue) 
    .y(rawPX20DPValue) 
    .setDuration(250) 
    .start(); 


ivSettings.animate() 
    .setInterpolator(new AccelerateInterpolator()) 
    .x(widthPx - rawPXLeftOffset) 
    .y(rawPX20DPValue) 
    .setDuration(250) 
    .start(); 

移動前にギアと検索アイコンのオフセット(パディング)もチェックすると、最終結果にも影響が出る可能性があります。

+0

160の価値は、私が周りを遊んでいたものでした。私がしようとしているのは、左のいずれかがツールバーの左側から20dpになり、右のものがツールバーの右側から20dpになるように、両方のイメージをアニメートすることです。私がやってみたいことは、ツールバーの全幅を計算し、右の余白から20dpになるように値を減算することです。もっと理解していただければ幸いです。ありがとう。 – ant2009

+0

@ ant2009私はあなたにイメージサイズの計算を与えるためにそれを更新しました。 ImageViewにパディングがある場合は、それを計算に追加する必要があることに注意してください。あなたにさらなる助けが必要な場合は私に知らせてください:) –

関連する問題