diff options
| -rw-r--r-- | docs/html/training/wearables/ui/lists.jd | 51 |
1 files changed, 17 insertions, 34 deletions
diff --git a/docs/html/training/wearables/ui/lists.jd b/docs/html/training/wearables/ui/lists.jd index 1d6e8ed717d1..20f8bbd59da5 100644 --- a/docs/html/training/wearables/ui/lists.jd +++ b/docs/html/training/wearables/ui/lists.jd @@ -82,20 +82,21 @@ the list is displayed properly on both round and square devices:</p> <p>In many cases, each list item consists of an icon and a description. The <em>Notifications</em> sample from the Android SDK implements a custom layout that extends {@link android.widget.LinearLayout} to incorporate these two elements inside each list item. -This layout also implements the methods in the <code>WearableListView.Item</code> interface -to animate the item's icon and fade the text in response to events from +This layout also implements the methods in the +<code>WearableListView.OnCenterProximityListener</code> interface +to change the color of the item's icon and fade the text in response to events from <code>WearableListView</code> as the user scrolls through the list.</p> <pre> public class WearableListItemLayout extends LinearLayout - implements WearableListView.Item { + implements WearableListView.OnCenterProximityListener { + + private ImageView mCircle; + private TextView mName; private final float mFadedTextAlpha; private final int mFadedCircleColor; private final int mChosenCircleColor; - private ImageView mCircle; - private float mScale; - private TextView mName; public WearableListItemLayout(Context context) { this(context, null); @@ -108,6 +109,7 @@ public class WearableListItemLayout extends LinearLayout public WearableListItemLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); + mFadedTextAlpha = getResources() .getInteger(R.integer.action_text_faded_alpha) / 100f; mFadedCircleColor = getResources().getColor(R.color.grey); @@ -124,46 +126,27 @@ public class WearableListItemLayout extends LinearLayout mName = (TextView) findViewById(R.id.name); } - // Provide scaling values for WearableListView animations @Override - public float getProximityMinValue() { - return 1f; - } - - @Override - public float getProximityMaxValue() { - return 1.6f; - } - - @Override - public float getCurrentProximityValue() { - return mScale; - } - - // Scale the icon for WearableListView animations - @Override - public void setScalingAnimatorValue(float scale) { - mScale = scale; - mCircle.setScaleX(scale); - mCircle.setScaleY(scale); - } - - // Change color of the icon, remove fading from the text - @Override - public void onScaleUpStart() { + public void onCenterPosition(boolean animate) { mName.setAlpha(1f); ((GradientDrawable) mCircle.getDrawable()).setColor(mChosenCircleColor); } - // Change the color of the icon, fade the text @Override - public void onScaleDownStart() { + public void onNonCenterPosition(boolean animate) { ((GradientDrawable) mCircle.getDrawable()).setColor(mFadedCircleColor); mName.setAlpha(mFadedTextAlpha); } } </pre> +<p>You can also create animator objects to enlarge the icon of the center item in the list. You can +use the <code>onCenterPosition()</code> and <code>onNonCenterPosition()</code> callback methods +in the <code>WearableListView.OnCenterProximityListener</code> interface to manage your +animators. For more information about animators, see +<a href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Animating with +ObjectAnimator</a>.</p> + <h2 id="layout-def">Create a Layout Definition for Items</h2> |