Skip to content

GitLab

T
tangled
Commit 36dcabf1 authored by Gauthier Ambard's avatar Gauthier Ambard Committed by Commit Bot
Browse files
Options

[iOS] Put the QRCode scanner caption in scrollView 

This CL puts the caption in a scroll view, allowing it to be scrolled
when the font size is big.

Bug: 916068
Change-Id: I111e1d4e00ea2949c85964999106248dfebb433c
Reviewed-on: https://chromium-review.googlesource.com/c/1392187
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: default avatarOlivier Robin <olivierrobin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619926}
parent 8c393eaf
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 107 deletions
ios/chrome/browser/ui/qr_scanner/BUILD.gn
View file @ 36dcabf1
......@@ -27,6 +27,7 @@ source_set("qr_scanner") {
"//ios/chrome/browser/ui/icons",
"//ios/chrome/browser/ui/util",
"//ios/chrome/common:ios_app_bundle_id_prefix_buildflags",
"//ios/chrome/common/ui_util",
"//ios/third_party/material_components_ios",
"//ui/base",
]
......
ios/chrome/browser/ui/qr_scanner/qr_scanner_view.mm
View file @ 36dcabf1
......@@ -9,8 +9,8 @@
#include "base/numerics/math_constants.h"
#include "ios/chrome/browser/ui/icons/chrome_icon.h"
#include "ios/chrome/browser/ui/util/ui_util.h"
#import "ios/chrome/common/ui_util/constraints_ui_util.h"
#include "ios/chrome/grit/ios_strings.h"
#include "ios/third_party/material_components_ios/src/components/Buttons/src/MaterialButtons.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/base/l10n/l10n_util_mac.h"
......@@ -20,9 +20,6 @@
namespace {
// Padding for buttons in the QR scanner UI.
const CGFloat kButtonPadding = 16.0;
// Width and height of the QR scanner viewport.
const CGFloat kViewportSize_iPhone = 250.0;
const CGFloat kViewportSize_iPad = 300.0;
......@@ -230,7 +227,7 @@ CGFloat GetViewportSize() {
@interface QRScannerView () {
// A button to toggle the torch.
MDCFlatButton* _torchButton;
UIBarButtonItem* _torchButton;
// A view containing the preview layer for camera input.
VideoPreviewView* _previewView;
// A transparent overlay on top of the preview layer.
......@@ -245,36 +242,10 @@ CGFloat GetViewportSize() {
NSLayoutConstraint* _overlayHeightConstraint;
}
// Creates an image with template rendering mode for use in icons.
- (UIImage*)templateImageWithName:(NSString*)name;
// Creates an icon for torch turned on.
- (UIImage*)torchOnIcon;
// Creates an icon for torch turned off.
- (UIImage*)torchOffIcon;
// Sets common configuration properties of a button in the QR scanner UI and
// adds it to self.view.
- (void)configureButton:(MDCFlatButton*)button
withIcon:(UIImage*)icon
action:(SEL)action;
// Adds a close button.
- (void)addCloseButton;
// Adds a torch button and stores it in |_torchButton|.
- (void)addTorchButton;
// Adds a caption to the viewport.
- (void)addViewportCaptionLabel;
// Adds a preview view to |self| and configures its layout constraints.
- (void)setupPreviewView;
// Adds a transparent overlay with a viewport border to |self| and configures
// its layout constraints.
- (void)setupPreviewOverlayView;
@end
@implementation QRScannerView
@synthesize delegate = _delegate;
#pragma mark lifecycle
- (instancetype)initWithFrame:(CGRect)frame
......@@ -287,22 +258,10 @@ CGFloat GetViewportSize() {
_delegate = delegate;
[self setupPreviewView];
[self setupPreviewOverlayView];
[self addCloseButton];
[self addTorchButton];
[self addViewportCaptionLabel];
[self addSubviews];
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
NOTREACHED();
return nil;
}
- (instancetype)initWithCoder:(NSCoder*)coder {
NOTREACHED();
return nil;
}
#pragma mark UIView
// TODO(crbug.com/633577): Replace the preview overlay with a UIView which is
......@@ -343,7 +302,7 @@ CGFloat GetViewportSize() {
accessibilityValue = l10n_util::GetNSString(
IDS_IOS_QR_SCANNER_TORCH_OFF_ACCESSIBILITY_VALUE);
}
[_torchButton setImage:icon forState:UIControlStateNormal];
[_torchButton setImage:icon];
[_torchButton setAccessibilityValue:accessibilityValue];
}
......@@ -395,6 +354,7 @@ CGFloat GetViewportSize() {
#pragma mark private methods
// Creates an image with template rendering mode for use in icons.
- (UIImage*)templateImageWithName:(NSString*)name {
UIImage* image = [[UIImage imageNamed:name]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
......@@ -402,80 +362,67 @@ CGFloat GetViewportSize() {
return image;
}
// Creates an icon for torch turned on.
- (UIImage*)torchOnIcon {
UIImage* icon = [self templateImageWithName:@"qr_scanner_torch_on"];
return icon;
}
// Creates an icon for torch turned off.
- (UIImage*)torchOffIcon {
UIImage* icon = [self templateImageWithName:@"qr_scanner_torch_off"];
return icon;
}
- (void)configureButton:(MDCFlatButton*)button
withIcon:(UIImage*)icon
action:(SEL)action {
[button setTintColor:[UIColor whiteColor]];
[button setImage:icon forState:UIControlStateNormal];
[button setInkStyle:MDCInkStyleUnbounded];
[button addTarget:_delegate
action:action
forControlEvents:UIControlEventTouchUpInside];
[self addSubview:button];
}
- (void)addCloseButton {
MDCFlatButton* closeButton = [[MDCFlatButton alloc] initWithFrame:CGRectZero];
UIImage* closeIcon = [ChromeIcon closeIcon];
UIImage* closeButtonIcon =
[closeIcon imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[closeButton setAccessibilityLabel:[closeIcon accessibilityLabel]];
[closeButton setAccessibilityIdentifier:[closeIcon accessibilityIdentifier]];
[self configureButton:closeButton
withIcon:closeButtonIcon
// Adds the subviews.
- (void)addSubviews {
UIBarButtonItem* close =
[[UIBarButtonItem alloc] initWithImage:[ChromeIcon closeIcon]
style:UIBarButtonItemStylePlain
target:_delegate
action:@selector(dismissQRScannerView:)];
// Constraints for closeButton.
[closeButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[NSLayoutConstraint activateConstraints:@[
[[closeButton leadingAnchor] constraintEqualToAnchor:[self leadingAnchor]
constant:kButtonPadding],
[[closeButton bottomAnchor] constraintEqualToAnchor:[self bottomAnchor]
constant:-kButtonPadding]
]];
}
- (void)addTorchButton {
DCHECK(!_torchButton);
_torchButton = [[MDCFlatButton alloc] initWithFrame:CGRectZero];
[_torchButton setEnabled:NO];
[self configureButton:_torchButton
withIcon:[self torchOffIcon]
close.accessibilityLabel = [[ChromeIcon closeIcon] accessibilityLabel];
UIBarButtonItem* spacer = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
target:nil
action:nil];
_torchButton =
[[UIBarButtonItem alloc] initWithImage:[self torchOffIcon]
style:UIBarButtonItemStylePlain
target:_delegate
action:@selector(toggleTorch:)];
[_torchButton setAccessibilityIdentifier:@"qr_scanner_torch_button"];
[_torchButton setAccessibilityLabel:
l10n_util::GetNSString(
IDS_IOS_QR_SCANNER_TORCH_BUTTON_ACCESSIBILITY_LABEL)];
[_torchButton setAccessibilityValue:
l10n_util::GetNSString(
IDS_IOS_QR_SCANNER_TORCH_OFF_ACCESSIBILITY_VALUE)];
// Constraints for _torchButton.
[_torchButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[NSLayoutConstraint activateConstraints:@[
[[_torchButton trailingAnchor] constraintEqualToAnchor:[self trailingAnchor]
constant:-kButtonPadding],
[[_torchButton bottomAnchor] constraintEqualToAnchor:[self bottomAnchor]
constant:-kButtonPadding]
]];
}
_torchButton.enabled = NO;
_torchButton.accessibilityIdentifier = @"qr_scanner_torch_button";
_torchButton.accessibilityLabel = l10n_util::GetNSString(
IDS_IOS_QR_SCANNER_TORCH_BUTTON_ACCESSIBILITY_LABEL);
_torchButton.accessibilityValue =
l10n_util::GetNSString(IDS_IOS_QR_SCANNER_TORCH_OFF_ACCESSIBILITY_VALUE);
UIToolbar* toolbar = [[UIToolbar alloc] init];
toolbar.items = @[ close, spacer, _torchButton ];
toolbar.tintColor = UIColor.whiteColor;
[toolbar setBackgroundImage:[[UIImage alloc] init]
forToolbarPosition:UIToolbarPositionAny
barMetrics:UIBarMetricsDefault];
[toolbar setShadowImage:[[UIImage alloc] init]
forToolbarPosition:UIBarPositionAny];
[toolbar setBackgroundColor:[UIColor clearColor]];
toolbar.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:toolbar];
AddSameConstraintsToSides(self, toolbar,
LayoutSides::kLeading | LayoutSides::kTrailing);
[toolbar.bottomAnchor
constraintEqualToAnchor:self.safeAreaLayoutGuide.bottomAnchor]
.active = YES;
- (void)addViewportCaptionLabel {
UILabel* viewportCaption = [[UILabel alloc] init];
NSString* label = l10n_util::GetNSString(IDS_IOS_QR_SCANNER_VIEWPORT_CAPTION);
[viewportCaption setText:label];
[viewportCaption
setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleBody]];
[viewportCaption setAdjustsFontForContentSizeCategory:YES];
[viewportCaption setNumberOfLines:0];
[viewportCaption setTextAlignment:NSTextAlignmentCenter];
[viewportCaption setAccessibilityLabel:label];
......@@ -487,30 +434,47 @@ CGFloat GetViewportSize() {
[viewportCaption.layer setShadowOpacity:kViewportCaptionShadowOpacity];
[viewportCaption.layer setMasksToBounds:NO];
[viewportCaption.layer setShouldRasterize:YES];
[self addSubview:viewportCaption];
UIScrollView* scrollView = [[UIScrollView alloc] init];
scrollView.showsVerticalScrollIndicator = NO;
[self addSubview:scrollView];
[scrollView addSubview:viewportCaption];
// Constraints for viewportCaption.
[viewportCaption setTranslatesAutoresizingMaskIntoConstraints:NO];
scrollView.translatesAutoresizingMaskIntoConstraints = NO;
viewportCaption.translatesAutoresizingMaskIntoConstraints = NO;
[NSLayoutConstraint activateConstraints:@[
[[viewportCaption topAnchor]
constraintEqualToAnchor:[self centerYAnchor]
[scrollView.topAnchor
constraintEqualToAnchor:self.centerYAnchor
constant:GetViewportSize() / 2 +
kViewportCaptionVerticalPadding],
[scrollView.bottomAnchor constraintEqualToAnchor:toolbar.topAnchor],
[scrollView.leadingAnchor
constraintEqualToAnchor:self.leadingAnchor
constant:kViewportCaptionHorizontalPadding],
[viewportCaption.leadingAnchor
constraintEqualToAnchor:self.leadingAnchor
constant:kViewportCaptionHorizontalPadding],
[scrollView.trailingAnchor
constraintEqualToAnchor:self.trailingAnchor
constant:-kViewportCaptionHorizontalPadding],
[viewportCaption.trailingAnchor
constraintEqualToAnchor:self.trailingAnchor
constant:-kViewportCaptionHorizontalPadding],
]];
AddSameConstraints(scrollView, viewportCaption);
}
// Adds a preview view to |self| and configures its layout constraints.
- (void)setupPreviewView {
DCHECK(!_previewView);
_previewView = [[VideoPreviewView alloc] initWithFrame:self.frame];
[self insertSubview:_previewView atIndex:0];
}
// Adds a transparent overlay with a viewport border to |self| and configures
// its layout constraints.
- (void)setupPreviewOverlayView {
DCHECK(!_previewOverlay);
_previewOverlay = [[PreviewOverlayView alloc] initWithFrame:CGRectZero];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment