Criando um App de controle alpha da imagem com Swift IOS

  • Home
  • Swift IOS
  • Criando um App de controle alpha da imagem com Swift IOS

HellYeah!

Vamos criar um app legal para aprendermos como usar o slider do Swift!

Inicialmente criaremos um projeto Single View Application e salvamos no local desejado, no meu caso sempre salvo na mesa, já que é um projeto temporário de aprendizado.

Captura de Tela 2015-11-04 às 00.26.39

Após de ter criado nosso projeto iremos primeiro configurar para iphone 4-inch, iremos fazer os testes no iphone 5s.

Captura de Tela 2015-11-04 às 01.17.43

Agora iremos configurar nossa tela do app. Iremos utilizar um novo componente que se chama Slider, com ele nós iremos brincar um pouco e aprender os conceitos que ele usa em sua aplicação.

Também adicionaremos uma imagem. Escolhemos a imagem que queremos, clicaremos e arrastaremos a imagem escolhida para dentro de Assets.xcassets (ele vai fazer a importação automaticamente).

Captura de Tela 2015-11-04 às 01.20.35

Agora nós iremos procurar na library o Image View e depois nos atributos escolheremos a imagem que nos colocamos e importamos para Assets.xcassets.

Captura de Tela 2015-11-04 às 01.21.49

Captura de Tela 2015-11-04 às 01.22.40

Feito isso vocês irão configurar o slider, imagem e no final adicionar um label para que fique dessa maneira.

Captura de Tela 2015-11-04 às 01.24.52

Vamos agora para o código.

Iremos fazer a conexão dos seguintes elementos: Slider, Image e label.

No slider vamos criar 2 conexões, uma @IBOulet para identificar o valor do slider, e depois um @IBAction para executar o que queremos quando o slider for modificado. Para quem não lembra como conectar nos iremos clicaremos no Main.storyboard e em Show the Assistent Editor, com o control pressionado clicaremos no objeto e levaremos para o código.

// Identificar o valor do slider
    @IBOutlet weak var sliderValue: UISlider!

// Ação de movimento do slider
    @IBAction func sliderAction(sender: AnyObject) {
}

Depois criaremos mais dou @IBOutlet que será do da imagem e do label

// Identificar a imagem
    @IBOutlet weak var imgView: UIImageView!
    
    // Identificar label
    @IBOutlet weak var lbNumberOpc: UILabel!

Já temos as conexões que iremos utilizar nesse projeto agora temos que zerar a label para que quando o aplicativo for iniciado não apareça nada.

Faremos isso dentro da viewDidLoad(), dentro dela que conterá o que for preciso quando o app for carregado. Adicionaremos o seguinte:

// Zerar Label
        lbNumberOpc.text = ""

Isso vai servir para quando for iniciado o app não tenha nada dentro do label.

Captura de Tela 2015-11-04 às 01.35.08

Agora vamos criar a func para que quando for mudado o slider ele mude a opacidade da imagem.

@IBAction func sliderAction(sender: AnyObject) {
        /* primeiro faremos a chamada do imgView e definiremos
        o alpha dele (alpha defini a ipacidade do objeto), e
        colocaremos ele para receber o valor do slider. Para
        que isso ocorra temos que primeiro transformar o valor
        recebido em CGFloat pois o alpha só recebe nesse
        formato. Iremos aplicar o CGFloat() e dentro 
        especificaremos de onde vem no caso sliderValue e
        completaremos falando para o Swift que iremos
        pegar apenas o value dele.
        */
        imgView.alpha = CGFloat(sliderValue.value)
        
        // Aqui nós iremos exibir o value do slider no label
        lbNumberOpc.text = String(sliderValue.value)
        
        // Se 1 exibe a mensagem
        if imgView.alpha == 1 {
            lbNumberOpc.text = "Full"
        }
        
        // Se 0 exibe a mensagem
        if imgView.alpha == 0 {
            lbNumberOpc.text = "Blank"
        }
    }

Nosso aplicativo terá a seguinte organização no código.

//
//  ViewController.swift
//  sliderImg
//
//  Created by Tiago Serra on 04/11/15.
//  Copyright © 2015 Tiago Serra. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    // Identificar o valor do slider
    @IBOutlet weak var sliderValue: UISlider!
    
    // Identificar a imagem
    @IBOutlet weak var imgView: UIImageView!
    
    // Identificar label
    @IBOutlet weak var lbNumberOpc: UILabel!
    
    // Ação de movimento do slider
    @IBAction func sliderAction(sender: AnyObject) {
        /* primeiro faremos a chamada do imgView e definiremos
        o alpha dele (alpha defini a ipacidade do objeto), e
        colocaremos ele para receber o valor do slider. Para
        que isso ocorra temos que primeiro transformar o valor
        recebido em CGFloat pois o alpha só recebe nesse
        formato. Iremos aplicar o CGFloat() e dentro 
        especificaremos de onde vem no caso sliderValue e
        completaremos falando para o Swift que iremos
        pegar apenas o value dele.
        */
        imgView.alpha = CGFloat(sliderValue.value)
        
        // Aqui nós iremos exibir o value do slider no label
        lbNumberOpc.text = String(sliderValue.value)
        
        // Se 1 exibe a mensagem
        if imgView.alpha == 1 {
            lbNumberOpc.text = "Full"
        }
        
        // Se 0 exibe a mensagem
        if imgView.alpha == 0 {
            lbNumberOpc.text = "Blank"
        }
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Zerar Label
        lbNumberOpc.text = ""
        
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Captura de Tela 2015-11-04 às 01.41.41

Captura de Tela 2015-11-04 às 01.41.45

Vamos rodar e ver nossa aplicação.

Captura de Tela 2015-11-04 às 01.43.05

 

Muito bem galerinha, em breve irei escrever mais sobre Swift.

Para quem quiser os arquivos da aula clica no github abaixo

https://github.com/bycreator/Swift-IOS

HellYeah!! e até mais!

fonte: http://tiagoserra.com.br/criando-um-app-de-controle-alpha-da-imagem-com-swift-ios/

Deixar um comentário