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"?> <?xml version="1.0" encoding="UTF-8"?>
<issues format="4"> <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 <issue
id="HardCodedColor" id="HardCodedColor"
severity="Error" severity="Error"
@@ -1293,6 +1281,54 @@
column="5"/> column="5"/>
</issue> </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 <issue
id="HardCodedColor" id="HardCodedColor"
severity="Error" severity="Error"
@@ -2441,7 +2477,7 @@
errorLine2=" ~~~~~~~~~~~~~~~~~~~"> errorLine2=" ~~~~~~~~~~~~~~~~~~~">
<location <location
file="res/values/strings.xml" file="res/values/strings.xml"
line="5805" line="5883"
column="36"/> column="36"/>
</issue> </issue>
@@ -2473,7 +2509,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/styles.xml" file="res/values/styles.xml"
line="425" line="415"
column="44"/> column="44"/>
</issue> </issue>
@@ -2489,7 +2525,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/styles.xml" file="res/values/styles.xml"
line="431" line="421"
column="44"/> column="44"/>
</issue> </issue>
@@ -2505,7 +2541,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/styles.xml" file="res/values/styles.xml"
line="432" line="422"
column="44"/> column="44"/>
</issue> </issue>
@@ -2521,23 +2557,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/styles.xml" file="res/values/styles.xml"
line="467" line="457"
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"
column="34"/> column="34"/>
</issue> </issue>
@@ -2553,7 +2573,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="54" line="57"
column="39"/> column="39"/>
</issue> </issue>
@@ -2569,7 +2589,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="55" line="58"
column="40"/> column="40"/>
</issue> </issue>
@@ -2585,7 +2605,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="56" line="59"
column="38"/> column="38"/>
</issue> </issue>
@@ -2601,7 +2621,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="90" line="97"
column="47"/> column="47"/>
</issue> </issue>
@@ -2617,7 +2637,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="90" line="97"
column="47"/> column="47"/>
</issue> </issue>
@@ -2633,7 +2653,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="96" line="103"
column="40"/> column="40"/>
</issue> </issue>
@@ -2649,7 +2669,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="96" line="103"
column="40"/> column="40"/>
</issue> </issue>
@@ -2665,7 +2685,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="159" line="166"
column="45"/> column="45"/>
</issue> </issue>
@@ -2681,7 +2701,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="160" line="167"
column="49"/> column="49"/>
</issue> </issue>
@@ -2697,7 +2717,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="168" line="175"
column="45"/> column="45"/>
</issue> </issue>
@@ -2713,7 +2733,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="169" line="176"
column="49"/> column="49"/>
</issue> </issue>
@@ -2729,7 +2749,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="185" line="192"
column="39"/> column="39"/>
</issue> </issue>
@@ -2745,7 +2765,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="186" line="193"
column="40"/> column="40"/>
</issue> </issue>
@@ -2761,7 +2781,7 @@
errorLine2=" ^"> errorLine2=" ^">
<location <location
file="res/values/themes.xml" file="res/values/themes.xml"
line="187" line="194"
column="38"/> column="38"/>
</issue> </issue>

View File

@@ -128,5 +128,10 @@
<!-- launcher icon color --> <!-- launcher icon color -->
<color name="icon_launcher_setting_color">@*android:color/accent_device_default_light</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; package com.android.settings.wifi.qrcode;
import android.content.Context; import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas; import android.graphics.Canvas;
import android.graphics.Color; import android.graphics.Color;
import android.graphics.Paint; import android.graphics.Paint;
import android.graphics.Point; import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect; import android.graphics.Rect;
import android.graphics.RectF; import android.graphics.RectF;
import android.util.AttributeSet; import android.util.AttributeSet;
@@ -33,11 +36,26 @@ import com.android.settings.R;
* Draws the lines at the corner of the inner frame. * Draws the lines at the corner of the inner frame.
*/ */
public class QrDecorateView extends View { public class QrDecorateView extends View {
private static final float CORNER_STROKE_WIDTH = 3f; // 3dp private static final float CORNER_STROKE_WIDTH = 4f; // 4dp
private static final float CORNER_LINE_LENGTH = 20f; // 20dp 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; private boolean mFocused;
public QrDecorateView(Context context) { public QrDecorateView(Context context) {
@@ -54,78 +72,66 @@ public class QrDecorateView extends View {
public QrDecorateView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { public QrDecorateView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, 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; 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 @Override
protected void onDraw(Canvas canvas) { protected void onDraw(Canvas canvas) {
calculateFramePos(); // Set frame line color.
final float cornerLineLength = TypedValue.applyDimension( mStrokePaint.setColor(mFocused ? mFocusedCornerColor : mCornerColor);
TypedValue.COMPLEX_UNIT_DIP, // Draw background color.
CORNER_LINE_LENGTH, mMaskCanvas.drawColor(mBackgroundColor);
getResources().getDisplayMetrics() // Draw outer corner.
); mMaskCanvas.drawRoundRect(mOuterFrame, mRadius, mRadius, mStrokePaint);
mPaint.setColor(mFocused ? Color.GREEN : Color.WHITE); // Draw inner transparent corner.
drawCorner(mFrame, cornerLineLength, canvas); mMaskCanvas.drawRoundRect(mInnerFrame, mRadius, mRadius, mTransparentPaint);
super.onDraw(canvas);
}
private void drawCorner(RectF frame, float lineLength, Canvas canvas) { canvas.drawBitmap(mMaskBitmap, 0, 0, mBackgroundPaint);
final float strokeWidth = TypedValue.applyDimension( super.onDraw(canvas);
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);
} }
private void calculateFramePos() { private void calculateFramePos() {
final int centralX = getWidth() / 2; final int centralX = getWidth() / 2;
final int centralY = getHeight() / 2; final int centralY = getHeight() / 2;
final float halfFrameWidth = getWidth() / 3; final float cornerLineLength = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
mFrame = new RectF( CORNER_LINE_LENGTH, getResources().getDisplayMetrics()) / 2;
centralX - halfFrameWidth, final float strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
centralY - halfFrameWidth, CORNER_STROKE_WIDTH, getResources().getDisplayMetrics()) / 2;
centralX + halfFrameWidth,
centralY + halfFrameWidth); 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. // Draws green lines if focued. Otherwise, draws white lines.