Revise gesture floating preview design

Bug: 7043127
Change-Id: Ibf9a6d57279263d9b60753e0eb734b658eeda9f2
main
Tadashi G. Takaoka 2012-09-05 19:03:02 +09:00
parent 8a599c420e
commit 71e2e8152f
10 changed files with 108 additions and 87 deletions

View File

@ -73,4 +73,10 @@
<dimen name="more_keys_keyboard_slide_allowance">53.76dp</dimen> <dimen name="more_keys_keyboard_slide_allowance">53.76dp</dimen>
<!-- popup_key_height x -1.0 --> <!-- popup_key_height x -1.0 -->
<dimen name="more_keys_keyboard_vertical_correction">-44.8dp</dimen> <dimen name="more_keys_keyboard_vertical_correction">-44.8dp</dimen>
<!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_size">23dp</dimen>
<dimen name="gesture_floating_preview_text_offset">54dp</dimen>
<dimen name="gesture_floating_preview_horizontal_padding">23dp</dimen>
<dimen name="gesture_floating_preview_vertical_padding">15dp</dimen>
</resources> </resources>

View File

@ -61,4 +61,10 @@
<dimen name="suggestions_strip_padding">252.0dp</dimen> <dimen name="suggestions_strip_padding">252.0dp</dimen>
<integer name="max_more_suggestions_row">5</integer> <integer name="max_more_suggestions_row">5</integer>
<fraction name="min_more_suggestions_width">50%</fraction> <fraction name="min_more_suggestions_width">50%</fraction>
<!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_size">26dp</dimen>
<dimen name="gesture_floating_preview_text_offset">76dp</dimen>
<dimen name="gesture_floating_preview_horizontal_padding">26dp</dimen>
<dimen name="gesture_floating_preview_vertical_padding">17dp</dimen>
</resources> </resources>

View File

@ -84,4 +84,13 @@
<dimen name="suggestion_padding">12dp</dimen> <dimen name="suggestion_padding">12dp</dimen>
<dimen name="suggestion_text_size">22dp</dimen> <dimen name="suggestion_text_size">22dp</dimen>
<dimen name="more_suggestions_hint_text_size">33dp</dimen> <dimen name="more_suggestions_hint_text_size">33dp</dimen>
<!-- Gesture preview trail parameters -->
<dimen name="gesture_preview_trail_width">2.5dp</dimen>
<!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_size">28dp</dimen>
<dimen name="gesture_floating_preview_text_offset">87dp</dimen>
<dimen name="gesture_floating_preview_horizontal_padding">28dp</dimen>
<dimen name="gesture_floating_preview_vertical_padding">19dp</dimen>
<dimen name="gesture_floating_preview_round_radius">3dp</dimen>
</resources> </resources>

View File

@ -64,4 +64,10 @@
<dimen name="suggestions_strip_padding">252.0dp</dimen> <dimen name="suggestions_strip_padding">252.0dp</dimen>
<fraction name="min_more_suggestions_width">50%</fraction> <fraction name="min_more_suggestions_width">50%</fraction>
<!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_size">32dp</dimen>
<dimen name="gesture_floating_preview_text_offset">100dp</dimen>
<dimen name="gesture_floating_preview_horizontal_padding">32dp</dimen>
<dimen name="gesture_floating_preview_vertical_padding">21dp</dimen>
</resources> </resources>

View File

@ -85,4 +85,13 @@
<dimen name="suggestion_padding">8dp</dimen> <dimen name="suggestion_padding">8dp</dimen>
<dimen name="suggestion_text_size">22dp</dimen> <dimen name="suggestion_text_size">22dp</dimen>
<dimen name="more_suggestions_hint_text_size">33dp</dimen> <dimen name="more_suggestions_hint_text_size">33dp</dimen>
<!-- Gesture preview trail parameters -->
<dimen name="gesture_preview_trail_width">2.5dp</dimen>
<!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_size">26dp</dimen>
<dimen name="gesture_floating_preview_text_offset">86dp</dimen>
<dimen name="gesture_floating_preview_horizontal_padding">26dp</dimen>
<dimen name="gesture_floating_preview_vertical_padding">17dp</dimen>
<dimen name="gesture_floating_preview_round_radius">3dp</dimen>
</resources> </resources>

View File

@ -77,12 +77,10 @@
<attr name="gestureFloatingPreviewTextSize" format="dimension" /> <attr name="gestureFloatingPreviewTextSize" format="dimension" />
<attr name="gestureFloatingPreviewTextColor" format="color" /> <attr name="gestureFloatingPreviewTextColor" format="color" />
<attr name="gestureFloatingPreviewTextOffset" format="dimension" /> <attr name="gestureFloatingPreviewTextOffset" format="dimension" />
<attr name="gestureFloatingPreviewTextShadingColor" format="color" /> <attr name="gestureFloatingPreviewColor" format="color" />
<attr name="gestureFloatingPreviewTextShadingBorder" format="dimension" /> <attr name="gestureFloatingPreviewHorizontalPadding" format="dimension" />
<attr name="gestureFloatingPreviewTextShadowColor" format="color" /> <attr name="gestureFloatingPreviewVerticalPadding" format="dimension" />
<attr name="gestureFloatingPreviewTextShadowBorder" format="dimension" /> <attr name="gestureFloatingPreviewRoundRadius" format="dimension" />
<attr name="gestureFloatingPreviewTextConnectorColor" format="color" />
<attr name="gestureFloatingPreviewTextConnectorWidth" format="dimension" />
<!-- Delay after gesture input and gesture floating preview text dismissing in millisecond --> <!-- Delay after gesture input and gesture floating preview text dismissing in millisecond -->
<attr name="gestureFloatingPreviewTextLingerTimeout" format="integer" /> <attr name="gestureFloatingPreviewTextLingerTimeout" format="integer" />
<!-- Delay after gesture trail starts fading out in millisecond. --> <!-- Delay after gesture trail starts fading out in millisecond. -->

View File

@ -99,13 +99,14 @@
<integer name="suggestions_count_in_strip">3</integer> <integer name="suggestions_count_in_strip">3</integer>
<fraction name="center_suggestion_percentile">36%</fraction> <fraction name="center_suggestion_percentile">36%</fraction>
<!-- Gesture preview parameters --> <!-- Gesture preview trail parameters -->
<dimen name="gesture_preview_trail_width">2.5dp</dimen> <dimen name="gesture_preview_trail_width">2.5dp</dimen>
<dimen name="gesture_floating_preview_text_size">35dp</dimen> <!-- Gesture floating preview text parameters -->
<dimen name="gesture_floating_preview_text_offset">75dp</dimen> <dimen name="gesture_floating_preview_text_size">24dp</dimen>
<dimen name="gesture_floating_preview_text_shadow_border">17.5dp</dimen> <dimen name="gesture_floating_preview_text_offset">73dp</dimen>
<dimen name="gesture_floating_preview_text_shading_border">7.5dp</dimen> <dimen name="gesture_floating_preview_horizontal_padding">24dp</dimen>
<dimen name="gesture_floating_preview_text_connector_width">1.0dp</dimen> <dimen name="gesture_floating_preview_vertical_padding">16dp</dimen>
<dimen name="gesture_floating_preview_round_radius">3dp</dimen>
<!-- Inset used in Accessibility mode to avoid accidental key presses when a finger slides off the screen. --> <!-- Inset used in Accessibility mode to avoid accidental key presses when a finger slides off the screen. -->
<dimen name="accessibility_edge_slop">8dp</dimen> <dimen name="accessibility_edge_slop">8dp</dimen>

View File

@ -66,14 +66,12 @@
<item name="backgroundDimAlpha">128</item> <item name="backgroundDimAlpha">128</item>
<!-- android:color/holo_blue_light=#FF33B5E5 --> <!-- android:color/holo_blue_light=#FF33B5E5 -->
<item name="gestureFloatingPreviewTextSize">@dimen/gesture_floating_preview_text_size</item> <item name="gestureFloatingPreviewTextSize">@dimen/gesture_floating_preview_text_size</item>
<item name="gestureFloatingPreviewTextColor">@android:color/white</item> <item name="gestureFloatingPreviewTextColor">@android:color/holo_blue_light</item>
<item name="gestureFloatingPreviewTextOffset">@dimen/gesture_floating_preview_text_offset</item> <item name="gestureFloatingPreviewTextOffset">@dimen/gesture_floating_preview_text_offset</item>
<item name="gestureFloatingPreviewTextShadingColor">@android:color/holo_blue_light</item> <item name="gestureFloatingPreviewColor">#C0000000</item>
<item name="gestureFloatingPreviewTextShadingBorder">@dimen/gesture_floating_preview_text_shading_border</item> <item name="gestureFloatingPreviewHorizontalPadding">@dimen/gesture_floating_preview_horizontal_padding</item>
<item name="gestureFloatingPreviewTextShadowColor">#FF252525</item> <item name="gestureFloatingPreviewVerticalPadding">@dimen/gesture_floating_preview_vertical_padding</item>
<item name="gestureFloatingPreviewTextShadowBorder">@dimen/gesture_floating_preview_text_shadow_border</item> <item name="gestureFloatingPreviewRoundRadius">@dimen/gesture_floating_preview_round_radius</item>
<item name="gestureFloatingPreviewTextConnectorColor">@android:color/white</item>
<item name="gestureFloatingPreviewTextConnectorWidth">@dimen/gesture_floating_preview_text_connector_width</item>
<item name="gestureFloatingPreviewTextLingerTimeout">@integer/config_gesture_floating_preview_text_linger_timeout</item> <item name="gestureFloatingPreviewTextLingerTimeout">@integer/config_gesture_floating_preview_text_linger_timeout</item>
<item name="gesturePreviewTrailFadeoutStartDelay">@integer/config_gesture_preview_trail_fadeout_start_delay</item> <item name="gesturePreviewTrailFadeoutStartDelay">@integer/config_gesture_preview_trail_fadeout_start_delay</item>
<item name="gesturePreviewTrailFadeoutDuration">@integer/config_gesture_preview_trail_fadeout_duration</item> <item name="gesturePreviewTrailFadeoutDuration">@integer/config_gesture_preview_trail_fadeout_duration</item>

View File

@ -71,12 +71,10 @@ import java.util.HashSet;
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextSize * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextSize
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextColor * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextColor
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextOffset * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextOffset
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadingColor * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewColor
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadingBorder * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewHorizontalPadding
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadowColor * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewVerticalPadding
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadowBorder * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewRoundRadius
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextConnectorColor
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextConnectorWidth
* @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextLingerTimeout * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextLingerTimeout
* @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutStartDelay * @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutStartDelay
* @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutDuration * @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutDuration

View File

@ -21,6 +21,8 @@ import android.content.res.TypedArray;
import android.graphics.Canvas; import android.graphics.Canvas;
import android.graphics.Paint; import android.graphics.Paint;
import android.graphics.Paint.Align; import android.graphics.Paint.Align;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Message; import android.os.Message;
import android.text.TextUtils; import android.text.TextUtils;
import android.util.AttributeSet; import android.util.AttributeSet;
@ -38,12 +40,10 @@ public class PreviewPlacerView extends RelativeLayout {
private final Paint mTextPaint; private final Paint mTextPaint;
private final int mGestureFloatingPreviewTextColor; private final int mGestureFloatingPreviewTextColor;
private final int mGestureFloatingPreviewTextOffset; private final int mGestureFloatingPreviewTextOffset;
private final int mGestureFloatingPreviewTextShadowColor; private final int mGestureFloatingPreviewColor;
private final int mGestureFloatingPreviewTextShadowBorder; private final float mGestureFloatingPreviewHorizontalPadding;
private final int mGestureFloatingPreviewTextShadingColor; private final float mGestureFloatingPreviewVerticalPadding;
private final int mGestureFloatingPreviewTextShadingBorder; private final float mGestureFloatingPreviewRoundRadius;
private final int mGestureFloatingPreviewTextConnectorColor;
private final int mGestureFloatingPreviewTextConnectorWidth;
/* package */ final int mGestureFloatingPreviewTextLingerTimeout; /* package */ final int mGestureFloatingPreviewTextLingerTimeout;
private int mXOrigin; private int mXOrigin;
@ -54,8 +54,12 @@ public class PreviewPlacerView extends RelativeLayout {
private final GesturePreviewTrailParams mGesturePreviewTrailParams; private final GesturePreviewTrailParams mGesturePreviewTrailParams;
private String mGestureFloatingPreviewText; private String mGestureFloatingPreviewText;
private final int mGestureFloatingPreviewTextHeight;
// {@link RectF} is needed for {@link Canvas#drawRoundRect(RectF, float, float, Paint)}.
private final RectF mGestureFloatingPreviewRectangle = new RectF();
private int mLastPointerX; private int mLastPointerX;
private int mLastPointerY; private int mLastPointerY;
private static final char[] TEXT_HEIGHT_REFERENCE_CHAR = { 'M' };
private boolean mDrawsGesturePreviewTrail; private boolean mDrawsGesturePreviewTrail;
private boolean mDrawsGestureFloatingPreviewText; private boolean mDrawsGestureFloatingPreviewText;
@ -132,18 +136,14 @@ public class PreviewPlacerView extends RelativeLayout {
R.styleable.KeyboardView_gestureFloatingPreviewTextColor, 0); R.styleable.KeyboardView_gestureFloatingPreviewTextColor, 0);
mGestureFloatingPreviewTextOffset = keyboardViewAttr.getDimensionPixelOffset( mGestureFloatingPreviewTextOffset = keyboardViewAttr.getDimensionPixelOffset(
R.styleable.KeyboardView_gestureFloatingPreviewTextOffset, 0); R.styleable.KeyboardView_gestureFloatingPreviewTextOffset, 0);
mGestureFloatingPreviewTextShadowColor = keyboardViewAttr.getColor( mGestureFloatingPreviewColor = keyboardViewAttr.getColor(
R.styleable.KeyboardView_gestureFloatingPreviewTextShadowColor, 0); R.styleable.KeyboardView_gestureFloatingPreviewColor, 0);
mGestureFloatingPreviewTextShadowBorder = keyboardViewAttr.getDimensionPixelSize( mGestureFloatingPreviewHorizontalPadding = keyboardViewAttr.getDimension(
R.styleable.KeyboardView_gestureFloatingPreviewTextShadowBorder, 0); R.styleable.KeyboardView_gestureFloatingPreviewHorizontalPadding, 0.0f);
mGestureFloatingPreviewTextShadingColor = keyboardViewAttr.getColor( mGestureFloatingPreviewVerticalPadding = keyboardViewAttr.getDimension(
R.styleable.KeyboardView_gestureFloatingPreviewTextShadingColor, 0); R.styleable.KeyboardView_gestureFloatingPreviewVerticalPadding, 0.0f);
mGestureFloatingPreviewTextShadingBorder = keyboardViewAttr.getDimensionPixelSize( mGestureFloatingPreviewRoundRadius = keyboardViewAttr.getDimension(
R.styleable.KeyboardView_gestureFloatingPreviewTextShadingBorder, 0); R.styleable.KeyboardView_gestureFloatingPreviewRoundRadius, 0.0f);
mGestureFloatingPreviewTextConnectorColor = keyboardViewAttr.getColor(
R.styleable.KeyboardView_gestureFloatingPreviewTextConnectorColor, 0);
mGestureFloatingPreviewTextConnectorWidth = keyboardViewAttr.getDimensionPixelSize(
R.styleable.KeyboardView_gestureFloatingPreviewTextConnectorWidth, 0);
mGestureFloatingPreviewTextLingerTimeout = keyboardViewAttr.getInt( mGestureFloatingPreviewTextLingerTimeout = keyboardViewAttr.getInt(
R.styleable.KeyboardView_gestureFloatingPreviewTextLingerTimeout, 0); R.styleable.KeyboardView_gestureFloatingPreviewTextLingerTimeout, 0);
final int gesturePreviewTrailColor = keyboardViewAttr.getColor( final int gesturePreviewTrailColor = keyboardViewAttr.getColor(
@ -155,18 +155,23 @@ public class PreviewPlacerView extends RelativeLayout {
mDrawingHandler = new DrawingHandler(this, mGesturePreviewTrailParams); mDrawingHandler = new DrawingHandler(this, mGesturePreviewTrailParams);
mGesturePaint = new Paint(); final Paint gesturePaint = new Paint();
mGesturePaint.setAntiAlias(true); gesturePaint.setAntiAlias(true);
mGesturePaint.setStyle(Paint.Style.STROKE); gesturePaint.setStyle(Paint.Style.STROKE);
mGesturePaint.setStrokeJoin(Paint.Join.ROUND); gesturePaint.setStrokeJoin(Paint.Join.ROUND);
mGesturePaint.setColor(gesturePreviewTrailColor); gesturePaint.setColor(gesturePreviewTrailColor);
mGesturePaint.setStrokeWidth(gesturePreviewTrailWidth); gesturePaint.setStrokeWidth(gesturePreviewTrailWidth);
mGesturePaint = gesturePaint;
mTextPaint = new Paint(); final Paint textPaint = new Paint();
mTextPaint.setAntiAlias(true); textPaint.setAntiAlias(true);
mTextPaint.setStrokeJoin(Paint.Join.ROUND); textPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTextAlign(Align.CENTER); textPaint.setTextAlign(Align.CENTER);
mTextPaint.setTextSize(gestureFloatingPreviewTextSize); textPaint.setTextSize(gestureFloatingPreviewTextSize);
mTextPaint = textPaint;
final Rect textRect = new Rect();
textPaint.getTextBounds(TEXT_HEIGHT_REFERENCE_CHAR, 0, 1, textRect);
mGestureFloatingPreviewTextHeight = textRect.height();
} }
public void setOrigin(final int x, final int y) { public void setOrigin(final int x, final int y) {
@ -242,45 +247,30 @@ public class PreviewPlacerView extends RelativeLayout {
} }
final Paint paint = mTextPaint; final Paint paint = mTextPaint;
final RectF rectangle = mGestureFloatingPreviewRectangle;
// TODO: Figure out how we should deal with the floating preview text with multiple moving // TODO: Figure out how we should deal with the floating preview text with multiple moving
// fingers. // fingers.
final int lastX = mLastPointerX;
final int lastY = mLastPointerY; // Paint the round rectangle background.
final int textSize = (int)paint.getTextSize(); final int textHeight = mGestureFloatingPreviewTextHeight;
final float textWidth = paint.measureText(gestureFloatingPreviewText);
final float hPad = mGestureFloatingPreviewHorizontalPadding;
final float vPad = mGestureFloatingPreviewVerticalPadding;
final float rectWidth = textWidth + hPad * 2.0f;
final float rectHeight = textHeight + vPad * 2.0f;
final int canvasWidth = canvas.getWidth(); final int canvasWidth = canvas.getWidth();
final float rectX = Math.min(Math.max(mLastPointerX - rectWidth / 2.0f, 0.0f),
final int halfTextWidth = (int)paint.measureText(gestureFloatingPreviewText) / 2 + textSize; canvasWidth - rectWidth);
final int textX = Math.min(Math.max(lastX, halfTextWidth), canvasWidth - halfTextWidth); final float rectY = mLastPointerY - mGestureFloatingPreviewTextOffset - rectHeight;
rectangle.set(rectX, rectY, rectX + rectWidth, rectY + rectHeight);
int textY = Math.max(-textSize, lastY - mGestureFloatingPreviewTextOffset); final float round = mGestureFloatingPreviewRoundRadius;
if (textY < 0) { paint.setColor(mGestureFloatingPreviewColor);
// Paint black text shadow if preview extends above keyboard region. canvas.drawRoundRect(rectangle, round, round, paint);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(mGestureFloatingPreviewTextShadowColor);
paint.setStrokeWidth(mGestureFloatingPreviewTextShadowBorder);
canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
}
// Paint the vertical line connecting the touch point to the preview text.
paint.setStyle(Paint.Style.STROKE);
paint.setColor(mGestureFloatingPreviewTextConnectorColor);
paint.setStrokeWidth(mGestureFloatingPreviewTextConnectorWidth);
final int lineTopY = textY - textSize / 4;
canvas.drawLine(lastX, lastY, lastX, lineTopY, paint);
if (lastX != textX) {
// Paint the horizontal line connection the touch point to the preview text.
canvas.drawLine(lastX, lineTopY, textX, lineTopY, paint);
}
// Paint the shading for the text preview
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(mGestureFloatingPreviewTextShadingColor);
paint.setStrokeWidth(mGestureFloatingPreviewTextShadingBorder);
canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
// Paint the text preview // Paint the text preview
paint.setColor(mGestureFloatingPreviewTextColor); paint.setColor(mGestureFloatingPreviewTextColor);
paint.setStyle(Paint.Style.FILL); final float textX = rectX + hPad + textWidth / 2.0f;
final float textY = rectY + vPad + textHeight;
canvas.drawText(gestureFloatingPreviewText, textX, textY, paint); canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
} }
} }