Refine decorate view of QR Code scanner

1.Draw rounded corner line.
2.Paint 70% white transparency background.

Bug: 118797380
Test: make RunSettingsRoboTests
Change-Id: I1192e32cf4ec801a3efcad4287c2e547deeac3bf
This commit is contained in:
Johnson Lu
2018-12-24 17:29:06 +08:00
parent c149976966
commit 0b0dec957d
3 changed files with 144 additions and 113 deletions

View File

@@ -1,18 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<issues format="4">
<issue
id="LintError"
severity="Error"
message="No `.class` files were found in project &quot;.&quot;, so none of the classfile based checks could be run. Does the project need to be built first?"
category="Lint"
priority="10"
summary="Lint Failure"
explanation="This issue type represents a problem running lint itself. Examples include failure to find bytecode for source files (which means certain detectors could not be run), parsing errors in lint configuration files, etc.&#xA;These errors are not errors in your own code, but they are shown to make it clear that some checks were not completed.">
<location
file="."/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
@@ -1293,6 +1281,54 @@
column="5"/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
message="Avoid using hardcoded color"
category="Correctness"
priority="4"
summary="Using hardcoded color"
explanation="Hardcoded color values are bad because theme changes cannot be uniformly applied.Instead use the theme specific colors such as `?android:attr/textColorPrimary` in attributes.&#xA;This ensures that a theme change from a light to a dark theme can be uniformlyapplied across the app."
errorLine1=" &lt;color name=&quot;qr_corner_line_color&quot;>#ffdadce0&lt;/color>"
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
<location
file="res/values/colors.xml"
line="133"
column="5"/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
message="Avoid using hardcoded color"
category="Correctness"
priority="4"
summary="Using hardcoded color"
explanation="Hardcoded color values are bad because theme changes cannot be uniformly applied.Instead use the theme specific colors such as `?android:attr/textColorPrimary` in attributes.&#xA;This ensures that a theme change from a light to a dark theme can be uniformlyapplied across the app."
errorLine1=" &lt;color name=&quot;qr_focused_corner_line_color&quot;>#ff1a73e8&lt;/color>"
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
<location
file="res/values/colors.xml"
line="134"
column="5"/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
message="Avoid using hardcoded color"
category="Correctness"
priority="4"
summary="Using hardcoded color"
explanation="Hardcoded color values are bad because theme changes cannot be uniformly applied.Instead use the theme specific colors such as `?android:attr/textColorPrimary` in attributes.&#xA;This ensures that a theme change from a light to a dark theme can be uniformlyapplied across the app."
errorLine1=" &lt;color name=&quot;qr_background_color&quot;>#b3ffffff&lt;/color> &lt;!-- 70% white transparency -->"
errorLine2=" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
<location
file="res/values/colors.xml"
line="135"
column="5"/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
@@ -2441,7 +2477,7 @@
errorLine2=" ~~~~~~~~~~~~~~~~~~~">
<location
file="res/values/strings.xml"
line="5805"
line="5883"
column="36"/>
</issue>
@@ -2473,7 +2509,7 @@
errorLine2=" ^">
<location
file="res/values/styles.xml"
line="425"
line="415"
column="44"/>
</issue>
@@ -2489,7 +2525,7 @@
errorLine2=" ^">
<location
file="res/values/styles.xml"
line="431"
line="421"
column="44"/>
</issue>
@@ -2505,7 +2541,7 @@
errorLine2=" ^">
<location
file="res/values/styles.xml"
line="432"
line="422"
column="44"/>
</issue>
@@ -2521,23 +2557,7 @@
errorLine2=" ^">
<location
file="res/values/styles.xml"
line="467"
column="34"/>
</issue>
<issue
id="HardCodedColor"
severity="Error"
message="Avoid using hardcoded color"
category="Correctness"
priority="4"
summary="Using hardcoded color"
explanation="Hardcoded color values are bad because theme changes cannot be uniformly applied.Instead use the theme specific colors such as `?android:attr/textColorPrimary` in attributes.&#xA;This ensures that a theme change from a light to a dark theme can be uniformlyapplied across the app."
errorLine1=" &lt;item name=&quot;strokeColor&quot;>@color/homepage_card_stroke_color&lt;/item>"
errorLine2=" ^">
<location
file="res/values/styles.xml"
line="474"
line="457"
column="34"/>
</issue>
@@ -2553,7 +2573,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="54"
line="57"
column="39"/>
</issue>
@@ -2569,7 +2589,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="55"
line="58"
column="40"/>
</issue>
@@ -2585,7 +2605,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="56"
line="59"
column="38"/>
</issue>
@@ -2601,7 +2621,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="90"
line="97"
column="47"/>
</issue>
@@ -2617,7 +2637,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="90"
line="97"
column="47"/>
</issue>
@@ -2633,7 +2653,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="96"
line="103"
column="40"/>
</issue>
@@ -2649,7 +2669,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="96"
line="103"
column="40"/>
</issue>
@@ -2665,7 +2685,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="159"
line="166"
column="45"/>
</issue>
@@ -2681,7 +2701,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="160"
line="167"
column="49"/>
</issue>
@@ -2697,7 +2717,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="168"
line="175"
column="45"/>
</issue>
@@ -2713,7 +2733,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="169"
line="176"
column="49"/>
</issue>
@@ -2729,7 +2749,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="185"
line="192"
column="39"/>
</issue>
@@ -2745,7 +2765,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="186"
line="193"
column="40"/>
</issue>
@@ -2761,7 +2781,7 @@
errorLine2=" ^">
<location
file="res/values/themes.xml"
line="187"
line="194"
column="38"/>
</issue>

View File

@@ -128,5 +128,10 @@
<!-- launcher icon color -->
<color name="icon_launcher_setting_color">@*android:color/accent_device_default_light</color>
</resources>
<!-- QR code scanner colors -->
<color name="qr_corner_line_color">#ffdadce0</color>
<color name="qr_focused_corner_line_color">#ff1a73e8</color>
<color name="qr_background_color">#b3ffffff</color> <!-- 70% white transparency -->
<!-- End of QR code scanner colors -->
</resources>

View File

@@ -17,10 +17,13 @@
package com.android.settings.wifi.qrcode;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
@@ -33,11 +36,26 @@ import com.android.settings.R;
* Draws the lines at the corner of the inner frame.
*/
public class QrDecorateView extends View {
private static final float CORNER_STROKE_WIDTH = 3f; // 3dp
private static final float CORNER_LINE_LENGTH = 20f; // 20dp
private static final float CORNER_STROKE_WIDTH = 4f; // 4dp
private static final float CORNER_LINE_LENGTH = 264f; // 264dp
private static final float CORNER_RADIUS = 16f; // 16dp
final private int mCornerColor;
final private int mFocusedCornerColor;
final private int mBackgroundColor;
final private Paint mStrokePaint;
final private Paint mTransparentPaint;
final private Paint mBackgroundPaint;
final private float mRadius;
private Bitmap mMaskBitmap;
private Canvas mMaskCanvas;
private RectF mOuterFrame;
private RectF mInnerFrame;
final private Paint mPaint;
private RectF mFrame;
private boolean mFocused;
public QrDecorateView(Context context) {
@@ -54,78 +72,66 @@ public class QrDecorateView extends View {
public QrDecorateView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
final float strokeWidth = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
CORNER_STROKE_WIDTH,
getResources().getDisplayMetrics()
);
mPaint = new Paint();
mPaint.setStrokeWidth(strokeWidth);
mFocused = false;
mRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS,
getResources().getDisplayMetrics());
mCornerColor = context.getResources().getColor(R.color.qr_corner_line_color);
mFocusedCornerColor = context.getResources().getColor(R.color.qr_focused_corner_line_color);
mBackgroundColor = context.getResources().getColor(R.color.qr_background_color);
mStrokePaint = new Paint();
mStrokePaint.setAntiAlias(true);
mTransparentPaint = new Paint();
mTransparentPaint.setAntiAlias(true);
mTransparentPaint.setColor(getResources().getColor(android.R.color.transparent));
mTransparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mBackgroundPaint = new Paint();
mBackgroundPaint.setColor(mBackgroundColor);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if(mMaskBitmap == null) {
mMaskBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
mMaskCanvas = new Canvas(mMaskBitmap);
}
calculateFramePos();
}
@Override
protected void onDraw(Canvas canvas) {
calculateFramePos();
final float cornerLineLength = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
CORNER_LINE_LENGTH,
getResources().getDisplayMetrics()
);
mPaint.setColor(mFocused ? Color.GREEN : Color.WHITE);
drawCorner(mFrame, cornerLineLength, canvas);
super.onDraw(canvas);
}
// Set frame line color.
mStrokePaint.setColor(mFocused ? mFocusedCornerColor : mCornerColor);
// Draw background color.
mMaskCanvas.drawColor(mBackgroundColor);
// Draw outer corner.
mMaskCanvas.drawRoundRect(mOuterFrame, mRadius, mRadius, mStrokePaint);
// Draw inner transparent corner.
mMaskCanvas.drawRoundRect(mInnerFrame, mRadius, mRadius, mTransparentPaint);
private void drawCorner(RectF frame, float lineLength, Canvas canvas) {
final float strokeWidth = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
CORNER_STROKE_WIDTH,
getResources().getDisplayMetrics()
);
// Draw top-left corner.
canvas.drawLine(
frame.left - strokeWidth / 2,
frame.top,
frame.left + lineLength,
frame.top,
mPaint);
canvas.drawLine(frame.left, frame.top, frame.left, frame.top + lineLength, mPaint);
// Draw top-right corner.
canvas.drawLine(
frame.right + strokeWidth / 2,
frame.top,
frame.right - lineLength,
frame.top,
mPaint);
canvas.drawLine(frame.right, frame.top, frame.right, frame.top + lineLength, mPaint);
// Draw bottom-left corner.
canvas.drawLine(
frame.left - strokeWidth / 2,
frame.bottom,
frame.left + lineLength,
frame.bottom,
mPaint);
canvas.drawLine(frame.left, frame.bottom, frame.left, frame.bottom - lineLength, mPaint);
// Draw bottom-right corner.
canvas.drawLine(
frame.right + strokeWidth / 2,
frame.bottom,
frame.right - lineLength,
frame.bottom,
mPaint);
canvas.drawLine(frame.right, frame.bottom, frame.right, frame.bottom - lineLength, mPaint);
canvas.drawBitmap(mMaskBitmap, 0, 0, mBackgroundPaint);
super.onDraw(canvas);
}
private void calculateFramePos() {
final int centralX = getWidth() / 2;
final int centralY = getHeight() / 2;
final float halfFrameWidth = getWidth() / 3;
mFrame = new RectF(
centralX - halfFrameWidth,
centralY - halfFrameWidth,
centralX + halfFrameWidth,
centralY + halfFrameWidth);
final float cornerLineLength = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
CORNER_LINE_LENGTH, getResources().getDisplayMetrics()) / 2;
final float strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
CORNER_STROKE_WIDTH, getResources().getDisplayMetrics()) / 2;
mOuterFrame = new RectF(centralX - cornerLineLength, centralY - cornerLineLength,
centralX + cornerLineLength, centralY + cornerLineLength);
mInnerFrame = new RectF(mOuterFrame.left + strokeWidth, mOuterFrame.top + strokeWidth,
mOuterFrame.right - strokeWidth, mOuterFrame.bottom - strokeWidth);
}
// Draws green lines if focued. Otherwise, draws white lines.