26April
Quando precisamos usar fontes diferentes das originais em um aplicativo para iOS na Coderockr, procuramos recursos por aí, mas os materiais eram bem escassos e confusos, não tinha nada muito claro a respeito. Só conseguimos chegar ao resultado juntando vários materiais, um dizia que dava, mas não dizia como, outros simplesmente diziam para usar uma biblioteca, e um outro dizia que era só configurar o arquivo .plist de configurações do projeto. Pois bem, a partir do último citado, vou montar um passo-a-passo bem simples de como usar essas fontes a vontade em seu aplicativo, porém, com uma observação, segundo as documentações que li, isso só funciona em iOS > 4.0.
O Projeto e as Fontes
Para começar, crie um projeto “View Based”, eu chamei de Fonts, baixei umas fontes True Type de graça por aí, sugiro que faça o mesmo, pegue alguma fonte free. Após fazer o download da fonte, copie elas para dentro do projeto, de prefrerência para sua pasta “Resources” ou equivalente, mais ou menos assim:
Como estou usando o XCode 4, por padrão ele não cria uma pasta chamada Resources, mas eu criei por minha conta.
Feito isso, agora você precisa abrir o arquivo Fonts-Info.plist, para configurar estas fontes adicionais no seu projeto. Aberto o arquivo, clique com o botão direito do mouse e selecione a opção “Add Row”:
Agora precisamos definir qual será a configuração a ser adicionada, no caso da fonte, o nome dela é “Fonts provided by application”:
Ao selecionar essa opção, você vai notar que vai surgir uma seta no lado esquerdo da nova linha, isso significa que ele possui itens filhos, que nesse caso são as fontes adicionadas. Clique na seta e depois no ícone com o “+” para adicionar linhas filhas da atual, e no valor de cada uma coloque o nome do arquivo da fonte que você deseja usar:
Feito isso, o seu projeto já sabe que estas fontes estão disponíveis, porém, algumas fontes tendem a mudar um pouco seu nome do arquivo .ttf para o seu real uso no código, se você tiver dúvidas quanto a isso, basta listar as fontes disponíveis no sistema:
Ao executar o projeto, o código acima vai imprimir uma lista de todas as famílias de fontes disponíveis no seu ambiente. Algumas fontes tendem também a ter váriações dentro de sua família, para saber todas, é só fazer o seguinte:
No meu caso, o nome das fontes são Kaiser e caricature, exatamente assim, ao executar o projeto, esse código que substituiu o anterior, vai me listar as possíveis variações dessa fonte.
Usando as fontes
A essa altura, as fontes estão funcionando perfeitamente, então só falta usar. Crie labels, pode ser via interface builder ou via código mesmo, defina um texto para eles, e configure a fonte, no meu caso, criei via interface builder mesmo, e a configuração ficou assim:
O primeiro e segundo label, configurei com fontes diferentes, e o terceiro com a fonte padrão do sistema. O resultado disso é esse:
Bom, fica a dica para quem ainda recorta imagens por que acha que não dá para usar fontes que não sejam padrão do iOS SDK. Caso queira baixar o código do exemplo, é só fazer o download do código fonte aqui.
13April
Muito olhando pela iTunes App Store tenho notado uma coisa meio chata. Os botões dos aplicativos em alguns casos são mal feitos, mal feitos mfesmo, em alguns casos sem o mínimo interesse por parte de quem está desenvolvendo o projeto. Bom, com o artigo de hoje, espero ajudar as pessoas que acham que não podem fazer isso ou aquilo com os botões (UIButton) do UIKit.
Como o wordpress.com não tem (ou eu não achei) nenhum plugin ou configuração para inserir código fonte de forma decente, eu estou postando somente imagens, e ao final do artigo tem o link para o github.
Também, estou usando o interface builder no exemplo, por que é muito popular entre desenvolvedores em todos os níveis, na verdade, sem o interface builder esse exemplo ficaria mais “simples”, mas para quem consegue trabalhar bem sem ele, estes passos são bem simples.
Para começar, crie um projeto, pode ser do tipo View-Based, como a imagem abaixo:
Você pode dar o nome que quiser a ele, eu chamei de buttons:
Como primeira medida, abra o arquivo buttonsViewController.xib no Interface Builder, que aqui no XCode 4 é integrado a IDE (se você estiver usando uma versão anterior, não tem problema, ele abrirá o interface builder separado da IDE). Adicione seis botões para dentro da view, conforme a imagem abaixo:
Agora abra o arquivo buttonsViewController.h, e adicione as variáveis de saída (IBOutlet) e as propriedades para podermos manipular os botões a qualquer momento. O conteúdo do arquivo deve ficar da seguinte forma:
Bom, feito isso, abra o arquivo buttonsViewController.m e vamos continuar a implementação das saídas e propriedades, como temos objetos UIButton que estão criando referências novas aqui, no dealloc temos que fazer o release para não ter problema de leaks.
Certo, feito isso, podemos começar a brincadeira =). Para começar, você pode executar o projeto, ele deve rodar sem erros. Agora, devemos voltar ao código e começar as transformações. Para começar a brincadeira de verdade, volte ao arquivo buttonsViewController.xib, e ligue os botões da interface com as variáveis que criamos para ter acesso aos botões, para quem nunca fez isso, a sequência abaixo deve ajudar:
1 – Clique com o botão direito sobre o botão;
2 – Selecione o item “New Referencing Outlet” e o arraste até o “File’s Owner”;
3 – Selecione o outlet referente ao botão selecionado.
Repita isso para todos os botões que estão na interface.
Títulos
Primeiro, vá até o arquivo buttonsViewController.xib e altere a largura de todos os botões, aqui eu alterei eles para 150 de largura. Feito isso, vamos definir um título para eles via código mesmo no arquivo buttonsViewController.m:
O resultado ao executar o seu projeto agora deverá ser este:
Agora vamos começar a mexer no estilo dos botões, para começar vá novamente ao arquivo buttonsViewController.xib e atere o tipo de todos os seus botões para Custom, como na imagem:
Isso vai fazer com que os botões “sumam” no Interface Builder, não tem problema, pois eles sumiram por que não possuem nenhuma estilização.
1. Feedback Visual
Baixe a imagem abaixo, é o background do primeiro botão, e copie ele para dentro do grupo resources de seu projeto:
Bom, eu sei que não é um design muito bonito, mas isso não importa muito agora, importa é que agora vamos montar o primeiro botão com um nível bem básico de customização, a imagem é do tamanho do botão, e a fonte é simples, altere seu código para ficar igual ao mostrado abaixo:
Feita essa alteração simples, execute o projeto, o botão deverá se comportar de tal modo que ele muda seu estilo quando selecionado, e quando você “soltar” o botão, ele retorna ao estado normal. Essa é uma customização muito indicada pela Apple, pois dessa forma o usuário consegue ter um feedback visual ao selecionar um botão.
2. Menos imagem, mais código
Baixe esses dois filetes de imagem abaixo, usaremos esses filetes de 1px de largura para criar o background do próximo botão:
Depois de baixar a imagem, no topo do seu arquivo, onde tem os imports, faça o import do <QuartzCore/QuartzCore.h>, ao importar essa biblioteca, você libera uma série de customizações visuais em componentes do UIKit:
Feito o import, você só precisa alterar o código do segundo botão da seguinte forma:
Bom, o código acima é bem simples, eu configuro uma borda para o botão e cantos arredondados, o pulo do gato está no setClipsToBounds, que quando verdadeiro ele esconde qualquer coisa que fique fora da layer do elemento. Também definimos um background “esticado”, economia de espaço quando podemos esticar uma imagem pequena. O resultado é um botão com o comportamento igual ao do anterior, só que com mais código e menos imagens, dessa forma fica mais flexível criar botões de tamanhos diferentes com o mesmo estilo e comportamento.
3. Shadows
Um recurso interessante na hora de criar botões e que nos faz economizar imagens são as sombras (shadows). Sombras podem ser usadas tanto no texto, quanto no próprio corpo do botão, desde que o mesmo possua um background para “dar corpo” para ele mesmo. Para usar as sombras é bem simples, basta seguir o código abaixo:
Bom, para começar, para usar alguns recursos disponíveis na layer do botão, você deve ter importado já o QuartzCore, como fizemos antes. Na sequência, eu defini a cor de background e a borda do botão. Para trabalhar a sombra do botão eu tive que desativar o maskToBounds pois a sombra extrapola a layer do botão, defini cantos arredondados, e após isso eu configurei a sombra do botão. Após a sombra do botão eu usei apenas duas linhas para definir a sombra do texto. Executando o projeto, você deve ver algo assim (normal e selecionado):
4. Mais um estado: Selecionado
Outro estado interessante em alguns casos, é o “selecionado”, por exemplo, quando você seleciona um botão e quer deixar ele selecionado, como se algo fosse ativado/desativado por meio desse botão. Essa é uma metáfora visual exata, pois você não precisa dizer para o usuário selecionar o botão para desativar, ele vai saber, ou descobrir de primeira.
Bom, para o próximo exemplo, voltemos ao arquivo buttonsViewController.h, e vamos declarar um método que será usado pelo botão no final da declaração de nossa classe:
E agora, a implementação:
E agora, igual para ligar as outlets aos botões, vamos ligar o método ao botão no interface builder, arquivo buttonsViewController.xib:
1 – Selecione o botão 4 com o botão direto do mouse, selecione na lista “Send Events” o evento “Touch Up Inside”
2 – Arraste a linha até o “File’s Owner”
3 – Solte, e selecione o método selectButton
Feito isso, vamos dar uma estilizada de leve no botão, para percebermos a diferença. Peguei emprestado o background do primeiro botão.
Pronto, agora é só executar e ver a diferença entre o botão selecionado e não selecionado, tanto no texto quanto no background.
5. Desativar Botões
Para finalizar, vamos desativar um botão ao selecionar outro. Isso também é muito interessante, pois em alguns casos, temos funcionalidades que dependendem de outras, e caso uma deva desativar outra, a melhor forma de fazer isso é desativar o botão que não pode ser selecionado. Vamos começar criando mais um método:
Implementação:
Bom, faça a ligação do método aos botões 5 e 6 no interface builder como feito no botão anterior, e também configure a tag de cada botão, 5 para o botão 5 e 6 para o botão 6.
Também vamos colocar um estilo nos botões, bem básico, somente backgorundColor, e o texto para visualizar a mudança de estado, caso você tenha imagem para o background, você pode utilizá-lo para fornecer uma indicação visual mais forte:
Bom, é isso, executando e selecionando os botões 5 e 6 você verá eles se alternando entre ativos e desativados. Espero que esse artigo tenha ajudado a entender a importância dos botões na experiência final de sua aplicação.
Quer o código fonte do exemplo? Pegue aqui ó!
Como estou usando o XCode 4, por padrão ele não cria uma pasta chamada Resources, mas eu criei por minha conta.
