Mostrando postagens com marcador Swipe. Mostrar todas as postagens
Mostrando postagens com marcador Swipe. Mostrar todas as postagens

terça-feira, 30 de outubro de 2012

Gesto de Swipe no Android

Olá povo,

Recentemente precisei implementar a detecção do gesto de swipe em uma aplicação iOS que estava desenvolvendo. Achei super fácil e resolvi pesquisar como fazer o mesmo no Android. Eis que achei a solução abaixo. (Não me lembro o post original, quem souber, posta um comentário pls).
public class MainActivity extends Activity 
  implements OnClickListener, OnTouchListener {

  private GestureDetector gestureDetector;
  private TextView txtResultado;
    
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
        
    txtResultado = 
      (TextView)findViewById(R.id.txtResultado);
        
    gestureDetector = 
      new GestureDetector(this, new DetectorDeGesto());
    
    // Apesar da linha abaixo não fazer nada, 
    // não funcionou sem...
    findViewById(R.id.raizLayout).
      setOnClickListener(this);
    findViewById(R.id.raizLayout).
      setOnTouchListener(this);
  }

  @Override
  public void onClick(View v) {
    Log.d("NGVL", "onclick");
  }  
    
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    return gestureDetector.onTouchEvent(event);
  } 

  class DetectorDeGesto 
    extends SimpleOnGestureListener {
     
    private static final int DISTANCIA_MINIMA  = 120;
    private static final int DISTANCIA_MAXIMA  = 250;
    private static final int VELOCIDADE_MINIMA = 200;
     
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, 
      float velocityX, float velocityY) {
      try {
        boolean excedeuDistanciaEmY =
          Math.abs(e1.getY() - e2.getY()) 
          > DISTANCIA_MAXIMA;
               
        if (excedeuDistanciaEmY) return false;
                
        boolean velocidadeValida =
          Math.abs(velocityX) > VELOCIDADE_MINIMA;
                
        boolean swipeLeft = 
          e1.getX() - e2.getX() > DISTANCIA_MINIMA;
        boolean swipeRight =
          e2.getX() - e1.getX() > DISTANCIA_MINIMA;
                  
        // right to left swipe
        if(swipeLeft && velocidadeValida) {
          txtResultado.setText("Left Swipe");

        // left to right swipe
        }  else if (swipeRight && velocidadeValida) {
          txtResultado.setText("Right Swipe");
        }
      } catch (Exception e) {
      }
      return false;
    }
  }  
}
A classe SimpleOnGestureListener é uma classe básica do Android que consegue detectar diversos gestos simples como scroll, double tap, entre outros. Nossa classe DetectorDeGesto, herda dessa classe e sobrescreve o método onFling, que é chamado quando o usuário está deslizando o dedo sobre a tela (esse evento é armazenado em e2) e guarda a referência de quando o usuário pressionou o dedo sobre a tela inicialmente (armazenado em e1). Nesse método verificamos a direção que foi feito o swipe, bem como a velocidade que o movimento foi feito. As distâncias mínima e máxima para considerarmos o gesto válido, assim como a velocidade mínima estão definidas nas constantes da classe.
Nossa Activity implementa as interfaces View.OnClickListener e OnTouchListener. No método onTouch, delegamos o tratamento do evento de touch para o nosso detector de Gesto. Para que isso aconteça, no onCreate, criamos um GestureDetector (que é outra classe do próprio Android) passando o nosso detector de gestos. Em seguida, pegamos a referência da view que queremos tratar o evento de touch e setamos o onTouchListener e o onClickListener.
O arquivo de layout usado no projeto é mostrado abaixo:
<RelativeLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/raizLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <TextView
    android:id="@+id/txtResultado"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:textSize="40dp"
    tools:context=".MainActivity" />
</RelativeLayout>
Pronto! É só rodar a aplicação e testar SWIPE pra esquerda e direita.

Qualquer dúvida, é só deixar seus comentários.

4br4ç05,
nglauber

domingo, 16 de setembro de 2012

Paginação com Swipe no Android

Olá povo,

O versão 20 do plugin ADT (Android Development Toolkit) trouxe algumas novidades, entre elas, alguns templates de projetos que podemos optar na criação de um novo projeto Android. Hoje vou  explicar cada um desses templates e ver como utilizar o template que permite fazer uma paginação similar a do Google Play mostrada abaixo.


Note que a tela "Mais rentáveis" está em evidência, mas podemos notar que há uma opção a esquerda e outra a direita na parte superior. Esse é o intuito da paginação, que permitirá ao usuário exibir a próxima informação apenas deslizando para os lados. Vamos mostrar como fazer isso na sua aplicação.
Inicie a criação de um novo projeto e preencha os campos conforme abaixo e pressione Next.


Na segunda tela, há a opção de criarmos uma Activity em branco ou do tipo Mestre/Detalhe. A primeira cria uma Activity simples,  já a segunda, cria uma Activity que exibe uma listagem e os respectivos detalhes. Se a aplicação estiver executando em um tablet, a listagem e os detalhes de um item aparecem na mesma Activity, caso seja um smartphone, a listagem ficará em uma Activity e os detalhes serão exibidos em outra.
Selecione Blank Activity e clique em Next.
A próxima tela do assistente, solicita o nome da Activity que queremos criar, o nome do seu respectivo arquivo de layout e o título da Activity. Mas a informação mais interessante para nós aqui é o campo Navigation Type, que nos dá as seguintes opções:
A opção None não cria nenhuma opção pré-definida de navegação;
Selecionando Tabs, será criada uma estrutura básica de um Activity com abas usando uma ActionBar (que requer Android 4.1);
Tabs + Swipe é igual a anterior, mas será possível alternar entre as abas com o gesto de swipe (também requer Android 4.1);
Swipe Views + Title Strip permite alternar entre views usando swipe, e o título da view corrente é mostrado em um componente PageStrip;
A última opção é a Dropdown, que configura uma ActionBar onde o usuário poderá selecionar, através de um combobox, a tela que deseja abrir. Ao selecionar o item da lista, um Fragment será carregado (também requer Android 4.1)
Vamos utilizar a opção Swipe Views + Title Strip, pois funcionará em todas as versões do Android. Selecione-a e clique em Finish.
Uma coisa curiosa, é que para utilizar os templates acima, o assistente exige que seja selecionada a versão 4.0.1 do Android na primeira tela do assistente. Mas no caso do template que selecionamos, é possível fazer algumas alterações no projeto para que o mesmo funcione em aparelhos com versões anteriores. Tudo isso, graças a API de compatibilidade do Google (que fica na pasta libs do projeto).
1) Clique com o botão direito sobre o projeto e selecione Properties. Na tela que for exibida, selecione Android do lado esquerdo e em seguida, selecione Android 2.3 (API Level 10) e clique em OK.
2) A Activity dará erro, pois estamos importando duas classes que não existem no Android 2.3: android.app.ActionBar e android.app.FragmentTransaction. Remova esses dois imports.
3) Agora vá no AndroidManifest.xml e modifique o minSdkVersion para 10 (Android 2.3).
<uses-sdk
  android:minSdkVersion="10"
  android:targetSdkVersion="15"/>
4) Dará erro agora nas pastas values-v11, values-v14 e menu. Remova as três.
5) E para finalizar, remova o método onCreateOptionsMenu da sua Activity.

Pronto! Agora é só rodar no seu dispositivo 2.3, o resultado ficará como abaixo:
Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

P.S.: Post relacionado: http://nglauber.blogspot.com.br/2011/09/pagescroll.html