มุมมองเข้าสู่ระบบของฉันมีมุมมองย่อยซึ่งมีUIActivityView
และUILabel
คำว่า "ลงชื่อเข้าใช้ ... " มุมมองย่อยนี้มีมุมที่ไม่ถูกปัดเศษ ฉันจะทำให้พวกเขารอบได้อย่างไร
มีวิธีใดบ้างที่จะทำได้ภายใน xib ของฉัน?
มุมมองเข้าสู่ระบบของฉันมีมุมมองย่อยซึ่งมีUIActivityView
และUILabel
คำว่า "ลงชื่อเข้าใช้ ... " มุมมองย่อยนี้มีมุมที่ไม่ถูกปัดเศษ ฉันจะทำให้พวกเขารอบได้อย่างไร
มีวิธีใดบ้างที่จะทำได้ภายใน xib ของฉัน?
คำตอบ:
ลองสิ่งนี้
#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now :)
...
view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;
หมายเหตุ: หากคุณพยายามที่จะใช้มุมโค้งมนกับUIViewController
มุมมองของมันก็ไม่ควรนำไปใช้ในตัวสร้างมุมมองของตัวควบคุม แต่ใน-viewDidLoad
หลังจากที่view
มีการยกตัวอย่างจริง
คุณยังสามารถใช้คุณลักษณะกำหนดคุณสมบัติผู้ใช้รันไทม์ของตัวสร้างส่วนต่อประสานเพื่อตั้งค่าเส้นทางหลักlayer.cornerRadius
ให้เป็นค่า ตรวจสอบให้แน่ใจว่าคุณรวมQuartzCore
ไลบรารีไว้ด้วย
เคล็ดลับนี้ยังสามารถใช้ได้กับการตั้งค่า layer.borderWidth แต่มันจะไม่ทำงานlayer.borderColor
เช่นนี้คาดว่าจะCGColor
ไม่ได้เป็นUIColor
ไม่ได้เป็น
คุณจะไม่สามารถเห็นเอฟเฟกต์ในกระดานเรื่องราวได้เนื่องจากพารามิเตอร์เหล่านี้ได้รับการประเมินที่รันไทม์
Clip Subviews
ตัวเลือกในการดู IB ด้วยเช่นกัน
ตอนนี้คุณสามารถใช้หมวดหมู่ swift ใน UIView (รหัสตะโกนรูปภาพ) ด้วย @IBInspectable เพื่อแสดงผลลัพธ์ที่กระดานเรื่องราว (หากคุณกำลังใช้หมวดหมู่ให้ใช้ cornerRadius เท่านั้นและไม่ใช่ layer.cornerRadius เป็นเส้นทางหลัก
extension UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
}
@IBDesignable
เพื่อรับชมตัวอย่างสดใน IB! (เพิ่มเติมได้ที่nshipster.com/ibinspectable-ibdesignable )
คำตอบสั้น ๆ :
myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true // optional
หากคุณมาที่คำตอบนี้คุณอาจเห็นพอที่จะแก้ปัญหาของคุณแล้ว ฉันกำลังเพิ่มคำตอบนี้เพื่อให้คำอธิบายที่ชัดเจนยิ่งขึ้นว่าทำไมสิ่งที่พวกเขาทำ
หากคุณเริ่มต้นด้วยปกติUIView
มันมีมุมสี่เหลี่ยม
let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)
คุณสามารถให้มุมรอบโดยการเปลี่ยนคุณสมบัติของมุมมองcornerRadius
layer
blueView.layer.cornerRadius = 8
ค่ารัศมีที่มากขึ้นจะทำให้มุมมนยิ่งขึ้น
blueView.layer.cornerRadius = 25
และค่าที่น้อยลงจะทำให้มุมมนน้อยลง
blueView.layer.cornerRadius = 3
นี่อาจเพียงพอที่จะแก้ปัญหาของคุณที่นั่น อย่างไรก็ตามบางครั้งมุมมองสามารถมีมุมมองย่อยหรือ sublayer ที่อยู่นอกขอบเขตของมุมมอง ตัวอย่างเช่นถ้าฉันจะเพิ่มมุมมองย่อยเช่นนี้
let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)
หรือถ้าฉันจะเพิ่มเลเยอร์ย่อยแบบนี้
let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)
จากนั้นฉันก็จะจบลงด้วย
ตอนนี้ถ้าฉันไม่ต้องการให้สิ่งต่าง ๆ ห้อยอยู่นอกขอบเขตฉันสามารถทำได้
blueView.clipsToBounds = true
หรือสิ่งนี้
blueView.layer.masksToBounds = true
ซึ่งให้ผลลัพธ์นี้:
ทั้งสองclipsToBounds
และmasksToBounds
มีเทียบเท่า มันเป็นเพียงแค่ว่าคนแรกที่จะใช้กับและครั้งที่สองจะใช้กับUIView
CALayer
blueView.frame.size.height/2
) ให้ผลลัพธ์ในมุมที่โค้งมนอย่างสมบูรณ์
แนวทางที่แตกต่างจากที่ Ed Marty ทำ:
#import <QuartzCore/QuartzCore.h>
[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];
คุณต้องการ setMasksToBounds เพื่อให้โหลดวัตถุทั้งหมดจาก IB ... ฉันมีปัญหาเมื่อมุมมองของฉันถูกปัดเศษ แต่ไม่มีวัตถุจาก IB: /
สิ่งนี้แก้ไขได้ = D หวังว่าจะช่วยได้!
ตามที่อธิบายไว้ในโพสต์บล็อกนี่คือวิธีการปัดเศษมุมของ UIView:
+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
byRoundingCorners:rectCorner
cornerRadii:CGSizeMake(radius, radius)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
[view.layer setMask:maskLayer];
[maskLayer release];
}
ส่วนที่น่าสนใจเกี่ยวกับมันคือคุณสามารถเลือกมุมที่คุณต้องการปัดขึ้น
คุณต้องนำเข้าไฟล์ส่วนหัวก่อน <QuartzCore/QuartzCore.h>
#import QuartzCore/QuartzCore.h>
[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];
อย่าพลาดที่จะใช้ - setMasksToBounds
ไม่เช่นนั้นอาจไม่แสดงผล
คุณสามารถใช้UIView
คลาสที่กำหนดเองดังต่อไปนี้ซึ่งสามารถเปลี่ยนสีและความกว้างของเส้นขอบได้ เช่นนี้IBDesignalbe
คุณสามารถเปลี่ยนคุณสมบัติในตัวสร้างส่วนต่อประสานได้เช่นกัน
import UIKit
@IBDesignable public class RoundedView: UIView {
@IBInspectable var borderColor: UIColor = UIColor.white {
didSet {
layer.borderColor = borderColor.cgColor
}
}
@IBInspectable var borderWidth: CGFloat = 2.0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat = 0.0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
}
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];
view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);
view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;
[self.view addSubview:view];
[view release];
@IBDesignable
class DesignableView: UIView {
}
extension UIView
{
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
layer.cornerRadius
กลับสู่สถานะเดิมได้อย่างไร (เช่นกระดานเรื่องราวของ xcode รู้ได้อย่างไรว่าจะตั้งค่าได้อย่างไรcornerRadius
หลังจากUIView
เริ่มใช้งานดั้งเดิมแล้ว)
view.layer.cornerRadius = 25
view.layer.masksToBounds = true
ใน SwiftUI คุณสามารถใช้cornerRadius
ตัวดัดแปลงโดยตรงกับสิ่งที่View
คุณต้องการ ตัวอย่างของคำถามนี้:
Text("Signing In…")
.padding(16)
.background(Color.red)
.cornerRadius(50)
โปรดทราบว่าไม่มีเพชรเหมือนรัศมีดังนั้นแม้ว่าคุณจะตั้งมุมรัศมีมากกว่าครึ่งหนึ่งของความสูงมันจะกลมอย่างราบรื่น
ชำระเงิน คำตอบนี้เพื่อดูวิธีการปัดเศษมุมเฉพาะใน SwiftUI
โปรดนำเข้าQuartzcore framework
จากนั้นคุณต้องตั้งค่าsetMaskToBounds
เป็นTRUE
นี้สายสำคัญมาก
แล้ว: [[yourView layer] setCornerRadius:5.0f];
UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
// Create a white border with defined width
original.layer.borderColor = [UIColor yellowColor].CGColor;
original.layer.borderWidth = 1.5;
// Set image corner radius
original.layer.cornerRadius =cornerRadius;
// To enable corners to be "clipped"
[original setClipsToBounds:YES];
return original;
}
ทำสิ่งนี้โดยใช้โปรแกรมใน obj c
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];
view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);
[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]
[self.view addSubview:view];
เราสามารถทำสิ่งนี้ได้จากสโตริโอบอร์ด
layer.cornerRadius Number 5
ถ้ามุมแบบกลมไม่ทำงานในviewDidload ()ควรเขียนโค้ดในviewDidLayoutSubview ()
-(void)viewDidLayoutSubviews
{
viewTextfield.layer.cornerRadius = 10.0 ;
viewTextfield.layer.borderWidth = 1.0f;
viewTextfield.layer.masksToBounds = YES;
viewTextfield.layer.shadowRadius = 5;
viewTextfield.layer.shadowOpacity = 0.3;
viewTextfield.clipsToBounds = NO;
viewTextfield.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}
หวังว่านี่จะช่วยได้!
คุณยังสามารถใช้รูปภาพ:
UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
, 0
, maskingImage.size.width
, maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];
ตั้งค่ามุมทรัพย์สินอันตรายสำหรับการดูแบบรอบ
กำหนด masksToBounds ค่าบูลีนสำหรับรูปภาพจะยังไม่ถูกดึงออกนอกขอบเขตรัศมีมุม
view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;
ใช้ส่วนขยาย UIView:
extension UIView {
func addRoundedCornerToView(targetView : UIView?)
{
//UIView Corner Radius
targetView!.layer.cornerRadius = 5.0;
targetView!.layer.masksToBounds = true
//UIView Set up boarder
targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
targetView!.layer.borderWidth = 3.0;
//UIView Drop shadow
targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
targetView!.layer.shadowOpacity = 1.0
}
}
การใช้งาน:
override func viewWillAppear(animated: Bool) {
sampleView.addRoundedCornerToView(statusBarView)
}
ใน Swift 4.2 และ Xcode 10.1
let myView = UIView()
myView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
myView.myViewCorners()
//myView.myViewCorners(width: myView.frame.width)//Pass View width
view.addSubview(myView)
extension UIView {
//If you want only round corners
func myViewCorners() {
layer.cornerRadius = 10
layer.borderWidth = 1.0
layer.borderColor = UIColor.red.cgColor
layer.masksToBounds = true
}
//If you want complete round shape, enable above comment line
func myViewCorners(width:CGFloat) {
layer.cornerRadius = width/2
layer.borderWidth = 1.0
layer.borderColor = UIColor.red.cgColor
layer.masksToBounds = true
}
}
ON Xcode 6 ความพยายามของคุณ
self.layer.layer.cornerRadius = 5.0f;
หรือ
self.layer.layer.cornerRadius = 5.0f;
self.layer.clipsToBounds = YES;