›

UIView avec le bas en courbe

DarknightDarknight Membre
dans API UIKit #1

Bonjour, je souhaiterai pour un projet perso et pour en apprendre toujours plus sur l'environnement ios, construire une UIView en haut de mon UIVIewController et que le bas de cette UIView soit en courbe !!! 


J'ai demandé à  Google, regardé sur ce forum et bien d'autres mais la je sèche, j'ai effectivement beaucoup de mal avec CAShapeLayer et UIBezierPath.


 


Un petit screen !!!


 


Réponses

  • LarmeLarme Membre
    #2

    C'est ton code qui a fait la vue sur le screenshot ?


    Ton problème se décompose en effet en deux:


    - Créer la forme du masque que tu veux (courbe en bas) avec UIBezierPath


    - Faire un masque avec cette forme et l'appliquer.


     


    Actuellement quel est ton soucis ? Les deux ? Seulement un seul ?


  • DrakenDraken Membre
    octobre 2015 modifié #3

    Ton UIView sera forcément rectangulaire, mais tu peux avoir un fond transparent et dessiner n'importe quelle forme dedans.


  • colas_colas_ Membre
    #4

    Pour faire au plus simple, je créerais cette forme en pdf (ou en svg) et je ferai une UIImageView.

  • DarknightDarknight Membre
    #5

    Merci pour vos réponses, 


     


    Non la vue uploadé dans mon post a été fait avec soft pour réaliser des croquis.


    Oui avec une UIImageView il est vrai que c'est beaucoup moins compliqué, mais bon je suis aussi là  pour apprendre du coup je me suis jamais frotté au Core Graph ou autre.


     


    Pour UIBezierPath, c'est un peu lourd mais je suis du genre à  abandonner, je ne comprends pas la notion de "path" pour moi un "path" c'est un chemin du coup je m'embrouille.


    Quels méthode dois je utiliser, il y a tellement de méthodes.


    La création de masque ne devrait pas être trop compliqué. :-)

  • DrakenDraken Membre
    octobre 2015 modifié #6

    Un "path" est un chemin de tracé. Il permet de définir une forme à  partir d'une série de points. 


     


    Le plus simple c'est d'utiliser UIBezierPath permettant de tracer une courbe définie par un rectangle.



    
let pathCourbe = UIBezierPath(ovalInRect: rectangle)

    ça fait longtemps que je n'ai pas touché aux courbes de Béziers. A titre d'exercice, j'ai résolu ton problème en utilisant UIBezierPath(ovalInRect:).


     


    Tu veux le code (Swift 2.0), ou je te laisse trouver tout seul à  partir de cet indice ?


  • DarknightDarknight Membre
    #7

    Charnue quand bien même je suis arrivé à  peu prêt a faire ce que je voulais:



    
let ovalRect = CGRectMake(68, 35, 64, 45)
    
let ovalPath = UIBezierPath()
    
ovalPath.addArcWithCenter(CGPointMake(0.0, 0.0), radius: ovalRect.width / 2, startAngle: 0 * CGFloat(M_PI)/180, endAngle: -180 * CGFloat(M_PI)/180, clockwise: true)
    
ovalPath.addLineToPoint(CGPointMake(0.0, 0.0))
    
ovalPath.closePath()
    

    
var ovalTransform = CGAffineTransformMakeTranslation(CGRectGetMidX(ovalRect), CGRectGetMidY(ovalRect))
    
ovalTransform = CGAffineTransformScale(ovalTransform, 1, ovalRect.height / ovalRect.width)
    
ovalPath.applyTransform(ovalTransform)
    

    
UIColor.grayColor().setFill()
    
ovalPath.fill()

    Merci en tous cas à  vous tous.


     


    Draken, j'ai pu voir un lien dans votre footer 



     


     


    Des dizaines d'heures de tutoriels vidéo (en français) pour apprendre à  développer en Obj-C et Swift : http://pagesperso-sy...don/5I452-2014/

    Cela fait un moment que je regarde ces videos tout les matin dans les transports, c'est vous le monsieur des videos  :o  ?


  • DrakenDraken Membre
    octobre 2015 modifié #8

    Non, je ne suis que l'une des nombreuses personnes inscrites au MOOC de Fabrice Kordon. C'est quelqu'un de très sympathique. J'ai eu l'occasion de boire un verre avec lui dans un bar, pendant une réunion avec une dizaine de ces éléves.


     


    Voilà  ma solution :



    
// Dessin d'une Vue avec une courbe
    
//

// couleurDeFond : UIColor - Couleur de remplissage de la vue (vert par défaut)
    
// hauteurCourbe : hauteur de la courbe en % par rapport à  la hauteur de la vue (30% par défaut)
    
class ViewAvecCourbe: UIView {
    
var couleurDeFond = UIColor.greenColor()
    
var hauteurCourbe:CGFloat = 0.30
    

    
override init(frame: CGRect) {
    
super.init(frame: frame)
    
self.backgroundColor = UIColor.clearColor()
    
}
    

    
required init?(coder aDecoder: NSCoder) {
    
fatalError("init(coder:) has not been implemented")
    
}
    

    
override func drawRect(rect: CGRect) {
    
// Couleur de fond apparente
    
couleurDeFond.setFill()
    

    
// Dessin partie pleine
    
let rectangle = CGRectMake(0, 0, rect.width, rect.height*(1.0-hauteurCourbe))
    
let path1 = UIBezierPath(rect: rectangle)
    
path1.fill()
    

    
// Dessin courbe
    
let rectCourbe = CGRectMake(0, rect.height*(1.0-2*hauteurCourbe), rect.width, rect.height*2*hauteurCourbe)
    
let pathCourbe = UIBezierPath(ovalInRect: rectCourbe)
    
pathCourbe.fill()
    

    
}
    

    
}

    Exemple d'utilisation :



    
class ViewController: UIViewController {
    
let vueCourbe = ViewAvecCourbe()
    

    
override func viewDidLoad() {
    
super.viewDidLoad()
    

    
// Couleur vue principale
    
self.view.backgroundColor = UIColor.blueColor()
    

    
// Vue du haut = 20% de la hauteur de l'écran
    
let rect = self.view.bounds.size
    
vueCourbe.frame = CGRectMake(0, 0, rect.width, rect.height*0.20)
    

    
// On place la vue sur l'écran
    
self.view.addSubview(vueCourbe)
    

    
}
    

    
}
    
 

  • DarknightDarknight Membre
    #9

    Merci beaucoup pour ces réponses !!!  


Connectez-vous ou Inscrivez-vous pour répondre.