Desenvolvimento de aplicativos Android: Animações de listas
Introdução
O Android não fornece muitas opções de efeitos para animar listas. Contudo, na última atualização do uGuide Festival de Inverno 2014 foram acrescentadas algumas animações em quase todas os listviews do aplicativo.
Animação da ListView de Notícias uGuide Festival 2014
Neste artigo, explicaremos como criar um listview customizado e com esses efeitos de animação.
Criando o código
Usaremos o modelo da tela de notícias do uGuide Festival como exemplo para esse tutorial.
Bem, vamos começar pela criação da lista. Os efeitos serão a última coisa que veremos e são de fácil implementação.
A primeira coisa que faremos é criar um projeto Android. Para isso, no Eclipse (ADT) vá em File, New e em Android Application Project e crie um projeto com o nome e ícone que quiser. Depois de criar o projeto, uma Activity (no nosso caso MainActivity) e um arquivo xml referente ao layout dessa Activity terão sido criados.
Nessa Activity que vamos criar nossa lista. Lembrando que ela pode ser criada em qualquer Activity.
Antes de codificar, vamos criar nosso layout. Vá até a activity_main.xml e insira o código abaixo:
[sourcecode language=”xml”]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f1ecdb"
android:orientation="vertical" >
<ListView
android:id="@+id/news_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:divider="@android:color/transparent"
android:dividerHeight="5dp" />
</LinearLayout>
[/sourcecode]
Nesse xml, criamos apenas um LinearLayout e um ListView dentro dele. Simples e é só isso que precisamos para criar nossa lista. Agora criaremos um outro xml referente a um item da lista. Lá customizaremos o item como quisermos.
Então clicaremos, com o botão direito na pasta layout e iremos até New, Android XML File, escolheremos um RelativeLayout, daremos o nome de news_list_item e colocaremos o seguinte código:
[sourcecode language=”xml”]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="#f6f6f6"
android:descendantFocusability="blocksDescendants"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingLeft="5dp"
android:paddingRight="?android:attr/scrollbarSize" >
<ImageView
android:id="@+id/news_list_item_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:contentDescription="@string/app_name"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:padding="10dp"
android:scaleType="centerCrop"
android:src="@drawable/news_default" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/news_list_item_image"
android:gravity="right" >
<TextView
android:id="@+id/news_list_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:fadingEdge="horizontal"
android:padding="3dp"
android:textColor="#000000"
android:textSize="14sp" />
<TextView
android:id="@+id/news_list_item_author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/news_list_item_title"
android:contentDescription="@string/app_name"
android:gravity="left"
android:singleLine="true"
android:textColor="#484641"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
[/sourcecode]
Obs.: Onde está escrito android:src=”@drawable/news_default”, pode ser trocado por uma imagem de sua preferência.
O nosso layout ficará da seguinte maneira:
Agora vamos para a parte da programação.
Crie uma interface chamada Item e três classes chamadas SectionItem, NewsAdapter e por último NewsItem.
Em Item insira o seguinte código:
[sourcecode language=”java”]
public interface Item
{
public boolean isSection();
}
[/sourcecode]
Em SectionItem esse código:
[sourcecode language=”java”]
public class SectionItem implements Item
{
private final String title;
public SectionItem(String title)
{
this.title = title;
}
public String getTitle()
{
return title;
}
@Override
public boolean isSection()
{
return true;
}
}
[/sourcecode]
E em NewsItem esse código:
[sourcecode language=”java”]
public class NewsItem implements Item
{
public final int id;
public final String title;
public final String author;
public final String url;
public NewsItem(int id, String title, String author, String url)
{
this.id = id;
this.title = title;
this.author = author;
this.url = url;
}
@Override
public boolean isSection()
{
return false;
}
}
[/sourcecode]
O SectionItem será usado se precisar inserir uma seção entre os itens. No nosso caso inserimos as datas que as notícias foram criadas em cada seção. Já em NewsItem declaramos todas as variáveis que precisaremos para criar nosso item.
Agora sim, podemos criar nosso adapter.
Em NewsAdapter colocaremos o seguinte código:
[sourcecode language=”java”]
public class NewsAdapter extends ArrayAdapter<Item>
{
private Context context;
private List<Item> items;
private LayoutInflater inflater;
private Drawable drawable;
public NewsAdapter(Context context, List<Item> items)
{
super(context, 0, items);
this.context = context;
this.items = items;
this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
View view = convertView;
final Item item = items.get(position);
if(item != null)
{
if(item.isSection())
{
SectionItem section = (SectionItem)item;
view = inflater.inflate(R.layout.news_section, null);
view.setOnClickListener(null);
view.setOnLongClickListener(null);
view.setLongClickable(false);
final TextView sectionView = (TextView) view.findViewById(R.id.news_section_text);
sectionView.setText(section.getTitle());
}
else
{
NewsItem news = (NewsItem)item;
view = inflater.inflate(R.layout.news_list_item, null);
final TextView title = (TextView)view.findViewById(R.id.news_list_item_title);
final TextView subtitle = (TextView)view.findViewById(R.id.news_list_item_author);
ImageView image = (ImageView)view.findViewById(R.id.news_list_item_image);
if(title != null) title.setText(news.title);
if(subtitle != null) subtitle.setText(news.author);
}
}
return view;
}
}
[/sourcecode]
Agora sim estamos quase terminando, só falta colocarmos todos esses códigos para se comunicarem e inserir as animações. Por incrível que pareça, essa é a parte mais fácil. Vamos voltar para a MainActivity e colocaremos o seguinte código:
[sourcecode language=”java”]
public class MainActivity extends Activity
{
private List<Item> items;
private ListView listview;
private NewsAdapter adapter;
private SwingRightInAnimationAdapter swingRightInAnimationAdapter;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_news);
items = new ArrayList<Item>();
listview = (ListView) findViewById(R.id.news_list);
//Inserindo uma seção
items.add(new SectionItem("Hoje"));
//Inserindo uma notícia
items.add(new NewsItem(1, "Título da notícia", "Autor da notícia", "Url da imagem a ser exibida");
adapter = new NewsAdapter(this, items);
swingRightInAnimationAdapter = new SwingRightInAnimationAdapter(adapter);
swingRightInAnimationAdapter.setAbsListView(listview);
listview.setAdapter(swingRightInAnimationAdapter);
listview.setFastScrollEnabled(false);
}
}
[/sourcecode]
Ao colocarmos esse código, veremos uma série de erros. Pois bem, vamos consertá-los.
Para retirarmos os erros precisaremos de uma biblioteca, chama ListViewAnimations e como o nome já diz, serve para inserirmos animações em listviews.
Criando animações na listview
Faça o download da biblioteca desenvolvida por Niek Haarman, chamada ListViewAnimations.
Após fazer o download da mesma, extraia o arquivo no seu workspace e importe pelo Eclipse.
Para adicionar ao seu projeto, clique nele com o botão direito, vá em Properties e depois na guia Android. Na parte inferior da tela, clique em Add e se você importou o projeto corretamente, verá a ListViewAnimations. Clique sobre ela e depois em Ok. Após voltar para a guia Android clique em Ok novamente.
Adicionando a ListViewAnimations
Feito isso, poderá ser notado que os erros sumiram.
Pronto, temos agora um listview customizado e com animações.
Nesse código omitimos como tornar a lista clicável e como trocar a imagem da lista, mas estudando o código e dando uma olhada nos tutoriais da Google, não será muito difícil de descobrir.
Estudem também a biblioteca do Nharmaan e veja todos os efeitos que podem ser produzidos. Qualquer dúvidas, deixem aí nos comentários e tentaremos ajudar.
