Trabalhando com pickerView em swift

Bom pessoal vamos trabalhar neste post com um pickerView, este componente é bem interessante e pode ser utilizado para alguns fins, neste post não vamos nos aprofundar muito no componente iremos basicamente criar um componente para selecionar valores dentro de nosso pickerView.

Vamos começar com nosso storyboard, não precisaremos da nada muito complexo apenas vamos colocar nosso pickerView e uma label, o label só estará la para quando selecionarmos um valor em nosso picker possamos ver o que selecionamos.

telaApp

Bom com nosso pickerView e o label devidamente ligados a nossa classe vamos ao código agora. Mas antes disso vamos ligar importar o delegate e o dataSource para nosso projeto para isso vamos mudar na declaração da classe, agora ficou da seguinte maneira:

class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate

É possível que ao importa-los você tenha recebido alguns erros, vamos ignora-los por enquanto pois basicamente o xcode está reclamando pois importamos, e não estamos usando.

Vamos agora implementar o delegate e o dataSource ao picker com apenas duas linhas de código dentro de nosso viewDidLoad:

PickerTeste.delegate = self

PickerTeste.dataSource = self

Antes de prosseguir, nós temos um pickerView, mas o que iremos mostrar nele ? Bom para isso iremos criar um array (caso ainda tenha alguma dúvida quanto aos arrays você pode dar uma olhada neste post onde trabalhamos um pouco mais com eles).

Nosso array está da seguinte maneira:

let arrayDados = [“categoria 1”,“categoria 2”,“categoria 3”,“categoria 4”,“categoria 5”,“categoria 6”,“categoria 7”,“categoria 8”,“categoria 9”,“categoria 10”,“categoria 11”]

Com nosso array criado podemos continuar, vamos criar os métodos necessários para nosso picker funcionar.

Assim como em uma tableView precisamos de um método que retorne quantos itens serão mostrados pelo componente, para nosso picker esse método é o numberOfRowsInComponent

a função completa fica assim:

func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

return arrayDados.count

}

Assim como fazemos quando usamos um array retornamos o count (numero de itens) do array, pois caso o array tenha um tamanho diferente (no caso de um valor ter sido inserido, ou retirado) não teremos problemas.

Caso tenha dúvidas sobre funções você pode dar uma olhada neste post onde trabalhamos com elas.

Com este método agora vamos atribuir o valor dos array ao picker, porém vamos fazer de maneira diferente, vamos atribuir valores customizados para nossas linhas do picker, com o seguinte método:

Por ela já estar comentado acredito que não será necessário explicar parte por parte do método.

func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView {

var pickerLabel = view as UILabel!

if view == nil {

pickerLabel = UILabel()

// alterando o background do label, baseando no valor da linha

let hue = CGFloat(row)/CGFloat(arrayDados.count)

pickerLabel.backgroundColor = UIColor(hue: hue, saturation: 1.0, brightness: 1.0, alpha: 1.0)

}

// atribuindo o valor correspondendo do array para a linha

let titleData = arrayDados[row]

// atribuindo fonte e tamanho de fonte para as linhas

let myTitle = NSAttributedString(string: titleData, attributes: [NSFontAttributeName:UIFont(name: “Georgia”, size: 26.0)!,NSForegroundColorAttributeName:UIColor.blackColor()])

pickerLabel!.attributedText = myTitle

// retorno do método

return pickerLabel

}

Por fim vamos fazer o método para que quando nosso usuário selecione uma linha esse valor seja passado para nosso label, para isso usamos um método igual ao de tableView, usamos o didSelectRow, para o pickerView o método completo fica assim:

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

labelTeste.text = arrayDados[row]

}

Lembrando que “labelteste” é o label que eu criei, se você tiver usado outro nome para seu label, você deverá alterar isso. Esses são apenas alguns métodos que temos a disposição para implementar em nosso pickerView, temos outros como por exemplo:

func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat

Onde podemos retornar um valor do tipo float para alterar o tamanho das linhas selecionadas, ou

func pickerView(pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat

Onde podemos retornar a largura da linha selecionada.

Bom espero ter ajudado, por hoje ficamos por aqui.

Como criar uma Activity no Android

Fala galera! Hoje vamos ver como criar uma Activity no Android.

Basicamente, Activity é uma classe que gerencia uma UI (interface com o usuário). Todas as aplicações Android começam por uma Activity. Ou seja, quando um aplicativo é iniciado, sua Activity principal é lançada.

Se você ainda não viu o último tutorial da série, clique no link a seguir: exibir mensagens no Android. Se você ainda continua é preguiçoso e apenas baixou o projeto, importe-o para sua workspace. Para tal, vá em File → Import… → Existing Projects into Workspace, dentro de General.

Ciclo de vida de uma Activity

Antes de começar, é muito importante conhecer o funcionamento de uma Activity. Observe o diagrama abaixo:

Como criar uma Activity no Android

A partir deste diagrama, fica mais fácil de entender o funcionamento. Implicitamente, ele introduz os estados que uma Activity pode assumir. Veja a próxima imagem:

Como criar uma Activity no Android

Segue uma breve explicação de cada método nativo da classe Activity:

  • onCreate(): É a primeira função a ser executada quando uma Activity é lançada. Geralmente é a responsável por carregar os layouts XML e outras operações de inicialização. É executada somente uma vez durante a “vida útil” da Activity.
  • onStart(): É chamada imediatamente após a onCreate() – e também quando uma Activity que estava em background volta a ter foco.
  • onResume(): Assim como a onStart(), é chamada na inicialização da Activity (logo após a própria onStart()) e também quando uma Activity volta a ter foco. Qual a diferença entre as duas? A onStart() só é chamada quando a Activity não estava mais visível na tela e volta a ter o foco, enquanto a onResume() sempre é chamada nas “retomadas de foco”.
  • onPause(): É a primeira função a ser invocada quando a Activity perde o foco (ou seja, uma outra Activity vem à frente).
  • onStop(): Análoga à onPause(), só é chamada quando a Activity fica completamente encoberta por outra Activity (não é mais visível).
  • onDestroy(): A última função a ser executada. Depois dela, a Activity é considerada “morta” – ou seja, nao pode mais ser relançada. Se o usuário voltar a requisitar essa Activity, outro objeto será contruído.
  • onRestart(): Chamada imediatamente antes da onStart(), quando uma Activity volta a ter o foco depois de estar em background.

Como criar uma Activity

Para criar uma nova Activity, são três passos básicos: criar o layout (como já visto neste link), criar a classe que estende a classe Activity, declarar essa nova classe no AndroidManifest.xml.

Vamos então alterar nosso projeto, de forma que a primeira tela seja apenas para listar os carros cadastrados no banco de dados.

Primeiramente, vamos alterar o arquivo activity_main.xml para que ele exiba somente a lista, e também um botão para cadastrar novos veículos.
PS: Não se esqueça de criar a constante “cadastrar” no arquivo /res/values/strings.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
 
   <Button
       android:id="@+id/cadastrar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/cadastrar" />
 
   <ListView
       android:id="@+id/lista"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >
   </ListView>
 
</LinearLayout>

Vamos atualizar nossa Activity principal ListaCarros, fazendo as adaptações para o novo layout.

public class ListaCarros extends ActionBarActivity {
                Button cadastrar;
                ListView lista;
                List listaCarros;
                ArrayAdapter<String[]> adaptador;
                Dados dados;
                Cursor carros;
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                               super.onCreate(savedInstanceState);
                               setContentView(R.layout.activity_main);
                               cadastrar = (Button) findViewById(R.id.cadastrar);
                               lista = (ListView) findViewById(R.id.lista);
                               listaCarros = new ArrayList();
                               adaptador = new Adaptador();
                               dados = new Dados(this);
                               cadastrar.setOnClickListener(new OnClickListener() {
                                               @Override
                                               public void onClick(View v) {
                                                               Intent i = new Intent(ListaCarros.this, CadastrarCarros.class);
                                                               startActivity(i);
                                               }
                               });
                               lista.setAdapter(adaptador);
                               atualizaLista();
                }
                @Override
                public boolean onCreateOptionsMenu(Menu menu) {
                               // Inflate the menu; this adds items to the action bar if it is present.
                               getMenuInflater().inflate(R.menu.main, menu);
                               return true;
                }
                @Override
                public boolean onOptionsItemSelected(MenuItem item) {
                               // Handle action bar item clicks here. The action bar will
                               // automatically handle clicks on the Home/Up button, so long
                               // as you specify a parent activity in AndroidManifest.xml.
                               int id = item.getItemId();
                               if (id == R.id.action_settings) {
                                               return true;
                               }
                               return super.onOptionsItemSelected(item);
                }
                // Classe responsável por criar um adaptador para as linhas do ListView
                class Adaptador extends ArrayAdapter {
                               Adaptador() {
                                               // Chama o construtor da classe ArrayAdapter, passando a classe
                                               // atual,
                                               // um layout padrão e a lista dos itens que serão adicionados.
                                               super(ListaCarros.this, android.R.layout.simple_list_item_1,
                                                                              listaCarros);
                               }
                               // Vamos sobrepor o método getView, pois é aqui que vamos chamar nosso
                               // layout
                               // customizado
                               @Override
                               public View getView(int position, View convertView, ViewGroup parent) {
                                               // Instanciando os itens necessários: linha atual, classe
                                               // Armazenador
                                               // e o conteúdo que será inserido
                                               View linha = convertView;
                                               Armazenador armazenador = null;
                                               final String[] item_linha = (String[]) listaCarros.get(position);
                                               // Neste trecho é que chamaos nosso layout. Usamos o método
                                               // getLayoutInflater()
                                               // e depois indicamos o layout. Também já inserimos os dados na
                                               // posição atual
                                               // através da classe Armazenador.
                                               if (linha == null) {
                                                               LayoutInflater inflater = getLayoutInflater();
                                                               linha = inflater.inflate(R.layout.linha_carro, null);
                                                               armazenador = new Armazenador(linha, position);
                                                               linha.setTag(armazenador);
                                               } else {
                                                               armazenador = (Armazenador) linha.getTag();
                                               }
                                               // Agora sim, vamos jogar os dados nos seus respectivos campos do
                                               // layout da linha
                                               armazenador.popularFormulario((String[]) listaCarros.get(position));
                                               // Retorno obrigatório do método
                                               return linha;
                               }
                }
                // Classe responsável por "jogar" os dados nos campos corretos
                class Armazenador {
                               // Declaração dos campos
                               private TextView nomeCarro = null;
                               private TextView anoCarro = null;
                               private TextView corCarro = null;
                               // Construtor que instancia os campos
                               Armazenador(View linha, int position) {
                                               nomeCarro = (TextView) linha.findViewById(R.id.nomeCarro);
                                               anoCarro = (TextView) linha.findViewById(R.id.anoCarro);
                                               corCarro = (TextView) linha.findViewById(R.id.corCarro);
                               }
                               // Método para "jogar" os textos nos respectivos campos
                               void popularFormulario(String[] c) {
                                               nomeCarro.setText(c[0]);
                                               anoCarro.setText(c[1]);
                                               corCarro.setText(c[2]);
                               }
                }
                private void atualizaLista() {
                               adaptador.clear(); // Limpa o adaptador para evitar duplicados
                               carros = dados.obterTodos();
                               carros.moveToFirst(); // Move o ponteiro para o primeiro registro
                               while (!carros.isAfterLast()) {
                                               String veiculo = carros.getString(1).toString();
                                               String ano = carros.getString(2).toString();
                                               String cor = carros.getString(3).toString();
                                               String id = String.valueOf(carros.getInt(0));
                                               String[] c = { veiculo, ano, cor, id }; // Cria um array com os
                                                                                                                                                                                                            // dados do carro
                                               adaptador.add(c); // Adiciona no ArrayList
                                               carros.moveToNext(); // Move o ponteiro para o próximo registro
                               }
                               adaptador.notifyDataSetChanged(); // Atualiza a lista
                }
}

Vamos então criar nosso layout para cadastrar os novos veículos. Vamos chama-lo de cadastrar.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
 
   <EditText
       android:id="@+id/veiculo"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/veiculo" >
 
       <requestFocus />
   </EditText>
 
   <EditText
       android:id="@+id/ano"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:ems="10"
       android:hint="@string/ano" />
 
   <EditText
       android:id="@+id/cor"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:ems="10"
       android:hint="@string/cor" />
 
   <Button
       android:id="@+id/salvar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/salvar" />
 
   <Button
       android:id="@+id/listar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/listar" />
 
</LinearLayout>

Como criar uma Activity no Android

E agora, vamos criar a nova Activity CadastrarCarros, que será a nova responsável por inserir os registros no banco de dados.

public class CadastrarCarros extends ActionBarActivity {
                EditText veiculo, ano, cor;
                Button salvar, listar;
                Dados dados;
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                               super.onCreate(savedInstanceState);
                               setContentView(R.layout.cadastrar);
                               veiculo = (EditText) findViewById(R.id.veiculo);
                               ano = (EditText) findViewById(R.id.ano);
                               cor = (EditText) findViewById(R.id.cor);
                               salvar = (Button) findViewById(R.id.salvar);
                               listar = (Button) findViewById(R.id.listar);
                               dados = new Dados(this);
                               salvar.setOnClickListener(new OnClickListener() {
                                               @Override
                                               public void onClick(View v) {
                                                               dados.inserir(veiculo.getText().toString(), ano.getText()
                                                                                                              .toString(), cor.getText().toString());
                                                                              Toast.makeText(CadastrarCarros.this,
                                                                                                              "Registro inserido com sucesso!",
                                                                                                              Toast.LENGTH_SHORT).show();
                                                               veiculo.setText(null);
                                                               ano.setText(null);
                                                              cor.setText(null);
                                               }
                               });
                               listar.setOnClickListener(new OnClickListener() {
                                               @Override
                                               public void onClick(View v) {
                                                               Intent i = new Intent(CadastrarCarros.this, ListaCarros.class);
                                                               startActivity(i);
                                               }
                               });
                }
                @Override
                public boolean onCreateOptionsMenu(Menu menu) {
                               // Inflate the menu; this adds items to the action bar if it is present.
                               getMenuInflater().inflate(R.menu.main, menu);
                               return true;
                }
                @Override
                public boolean onOptionsItemSelected(MenuItem item) {
                               // Handle action bar item clicks here. The action bar will
                               // automatically handle clicks on the Home/Up button, so long
                               // as you specify a parent activity in AndroidManifest.xml.
                               int id = item.getItemId();
                               if (id == R.id.action_settings) {
                                               return true;
                               }
                               return super.onOptionsItemSelected(item);
                }
}

Como criar uma Activity no Android

E não podemos nos esquecer de declarar a nova Activity no arquivo AndroidManifest.xml.

<activity android:name="br.com.yesbr.tutorial.CadastrarCarros" ></activity>

Rode a aplicação e veja como ficou.

E no final das contas, como criar uma Activity no Android?

Para criar uma nova Activity, devemos instanciar um objeto da classe Intent, passando como parâmetros o contexto atual da aplicação e a nova classe que será chamada. As ações foram inseridas nas ações dos botões Cadastrar na classe ListaCarros e Salvar na classe CadastrarCarros. Depois, chamamos o método startActivity(), passando como parâmetro o objeto Intent que foi criado.

Considerações Finais

Agora que já sabemos como criar várias Activities, podemos separar as ações da nossa aplicação em várias telas. Porém, ainda não foi criada a parte de edição dos dados, e iremos ver essa etapa no próximo tutorial, quando veremos como passar parâmetros para uma Activity.

Baixe o projeto atual aqui.

Falou, galera!

Funções em swift introdução ao conceito

Nesse post vamos aprender a trabalhar com funções, usando suas principais variações, como por exemplo usando funções com retorno ou com múltiplos valores.

Primeiramente vamos explicar o que é uma função, quando temos um trecho que código que usamos em vários lugares de nosso projeto, nós podemos simplesmente copiar e colar ele, ou fazer algo mais decente, que seria criar uma função, a função não é nada mais que um trecho de código que precisa ser usado em vários pontos, podemos passar variáveis para serem usadas dentro de funções, ou trabalhar usando seu retorno (quando existir).

Nossa primeira função será uma simples, sem retorno, e sem parâmetros, uma função assim pode ser usada para por exemplo para fazer uma conta, ou realizar determinada ação, em swift nossa função mais simples é assim:

func minhaFuncaoSemRetornoParametro() {

println(“Nessa função não passamos nenhum parametro e tambem não temos retorno”)

}

Embora não seja muito usada ela pode ser útil, outra função que podemos utilizar é uma função com parâmetros, um parâmetros é uma variável que podemos usar em nossa função, por exemplo, nosso código precisa executar uma mesma equação em vários pontos diferentes do projeto, porém nem sempre esses valores serão os mesmos, para esse tipo de situação podemos simplesmente criar uma função que receba parâmetros, que por sua vez podem ser alterados a cada vez que chamamos nossa função.

func minhaFuncaoComParametro(stringPassada: String) {

println(“Essa função vai mostrar a String passada, e não tem retorno”)

println(\(stringPassada))

}

Nesta função quando a chamamos, podemos alterar o valor da variável “stringPassada”, quando alteramos esse valor nossa função passa a trabalhar com o valor passado para a variável.

Até aqui, tudo bem, porém e se precisarmos passar vários valores de uma única vez? Para isso temos funções com vários parâmetros.

func minhaFuncaoComMultiplosParametros(stringPassada: String, inteiroPassado: Int){

println(“A string passada foi \(stringPassada), o inteiro passado \(inteiroPassado))

}

nessa função podemos passar vários parâmetros de uma única vez.

Outro aspecto interessante sobre as funções é seu retorno, quando criamos uma função com retorno é como se o código passasse as variáveis para a função, e não se interessa pelo que acontece la dentro apenas se interessa no que a função vai retornar.

func minhaFuncaoComRetorno() -> (Int){

return 10

}

Nessa função temos uma estrutura um pouco diferente das anteriores temos nosso → (int) isso significa que nossa função terá um retorno do tipo inteiro (int) porém podemos usar vários outros tipos de variáveis como strings booleanos e afins.

Juntando tudo

Vamos criar agora uma função completa agora abordando tudo o que falamos nesse post.

func minhaFuncaoComRetornoComParametros(primeiroValor: Int, segundoValor: Int) -> (String) {

var variavel: Int

variavel = primeiroValor + segundoValor

return (“O valor Passado é \(variavel))

}

Nessa função agora passamos 2 parâmetros, do tipo inteiro, e retornamos uma string.

Mas como chamar nossas funções?

Para chamar nossa função é algo extremamente simples em swift, precisamos apenas escrever o nome dela (se a função estiver na mesma classe que você esta trabalhando), e para pegar apenas o retorno de nossa função? Como fazer?

println(\(minhaFuncaoComRetorno()))

É uma maneira simples de exemplificar como podemos trabalhar com o retorno das funções.

Exibir mensagens no Android

Fala galera! No tutorial de hoje vamos aprender a exibir mensagens no Android.

Se você ainda não viu o último tutorial da série, clique no link a seguir: manipulando dados do banco no Android. Se você ainda continua é preguiçoso e apenas baixou o projeto, importe-o para sua workspace. Para tal, vá em File → Import… → Existing Projects into Workspace, dentro de General.

Exibir mensagens no Android

Vamos exibir mensagens no Android sempre que uma ação for executada em nosso projeto: cadastro, alteração ou exclusão de registros do banco. Para tal, vamos estudar duas classes: AlertDialog e Toast.

Toast exibe uma mensagem rápida ao usuário em uma pequena janela. Ela fica visível por um tempo determinado, e depois desaparece. Não tem interação com o usuário, sendo utilizado apenas para informações rápidas.

Exibir mensagens no Android

AlertDialog nada mais é que uma caixa de diálogo. Ela não ocupa toda a tela e é normalmente utilizada para eventos modais, requerendo uma interação por parte dos usuários antes de prosseguir. Ele pode exibir um título, até três botões, uma lista de itens selecionáveis, ou algum layout personalizado.

Exibir mensagens no Android

Como você já deve ter percebido, um AlertDialog já foi implementado em nosso projeto. Ao clicar em algum item da lista de carros, uma caixa de diálogo aparece na tela questionando qual ação deverá ser tomada. Então, vamos implementar a classe Toast. Ela é muito simples, e pode ser implementada com apenas uma linha de código.

Primeiro, vamos adicionar logo após o método inserir() na ação do botão Salvar.

Toast.makeText(ListaCarros.this, "Registro inserido com sucesso!", Toast.LENGTH_SHORT).show();

E também depois do método alterar() no mesmo botão.

Toast.makeText(ListaCarros.this, "Registro alterado com sucesso!", Toast.LENGTH_SHORT).show();

E por último, após o método excluir() no nosso AlertDialog.

Toast.makeText(ListaCarros.this, "Registro inserido com sucesso!", Toast.LENGTH_SHORT).show();

E agora, execute o código e realize alguma das três operações para ver o resultado.

Exibir mensagens no Android

Considerações Finais

Nosso projeto está simples, porém bem funcional. A classe Toast é bem simples de se implementar, sem necessidade de conhecimento mais aprofundado.
No próximo tutorial, vamos aprender a criar novas telas no Android.

Baixe o projeto atual aqui.

Até mais!