Slider en Android Nativo

Bueno hemos traído hoy un tutorial de Android que los ayudara a implementar un Slider nativo con un par de librerías como lo son picasso y slider.

Bueno lo primero que vamos hacer es crear un nuevo proyecto llamado (ejemplosliderimages), recuerden que el nombre lo pueden cambiar si lo desean.

Luego damos clic en siguiente, luego seleccionamos la opción de Blank Activity, damos nuevamente clic en siguiente y luego finalizar.

Listo una vez tengamos el proyecto creado vamos a incluir las librerías que necesitamos para que todo funcione bien.

Nos dirigimos a el archivo build.gradle donde colocamos dentro de dependencies lo siguente:

• compile 'com.squareup.picasso:picasso:2.5.2'
• compile 'com.nineoldandroids:library:2.4.0'
• compile 'com.daimajia.slider:library:1.1.5@aar'

Damos clic sobre Sync Now para que nuestro proyecto implemente las librerías. esto tardara un poco en sincronizar.

Una vez hecho lo anterior vamos a modificar el activity_main.xml agregando el siguiente código.

En layout vamos a crear un xml llamado item.xml con el siguiente codigo:

Ahora vamos a crear una clase al nivel de MainActivity llamada TransformerAdapter en la que vamos a colocar el siguiente codigo:

  

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.daimajia.slider.library.SliderLayout;

/**
 * Created by jcmolanoro on 07/07/2015.
 */
public class TransformerAdapter extends BaseAdapter {
    private Context mContext;
    public TransformerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public int getCount() {
        return SliderLayout.Transformer.values().length;
    }

    @Override
    public Object getItem(int position) {
        return SliderLayout.Transformer.values()[position].toString();
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView t = (TextView) LayoutInflater.from(mContext).inflate(R.layout.item,null);
        t.setText(getItem(position).toString());
        return t;
    }
}

Solo nos falta modificar el MainActivity, que es el encargado de implementar el Slider de nuestra app.

Vamos a implementar el BaseSliderView.OnSliderClickListener y ViewPagerEx.OnPageChangeListener.

Luego vamos a crear una variable privada private SliderLayout mDemoSlider;

Dentro de onCreate hacemos el llamado de nuestra vista mDemoSlider = (SliderLayout) findViewById(R.id.slider); y creamos un HashMap para hacer un arreglo de las imagenes que vamso a mostrar en nuestro Slider.

• HashMap url_maps = new HashMap();
• url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
• url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");

Luego de esto de damos la función al ListView para que al hacer clic sobre el nos cambie la animación del Slider.

Quedando nuestra clase de la siguiente manera.

  

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;

import java.util.HashMap;


public class MainActivity extends ActionBarActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{
    private SliderLayout mDemoSlider;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDemoSlider = (SliderLayout) findViewById(R.id.slider);
        HashMap url_maps = new HashMap();
        url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
        url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");
        url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");

        for(String name : url_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(url_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(MainActivity.this);

            //add your extra information
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);

            mDemoSlider.addSlider(textSliderView);
        }
        mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
        mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        mDemoSlider.setCustomAnimation(new DescriptionAnimation());
        mDemoSlider.setDuration(4000);
        mDemoSlider.addOnPageChangeListener(MainActivity.this);
        ListView l = (ListView) findViewById(R.id.transformers);
        l.setAdapter(new TransformerAdapter(this));
        l.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                mDemoSlider.setPresetTransformer(((TextView) view).getText().toString());
            }
        });
    }


    @Override
    public void onStop() {
        // To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
        mDemoSlider.stopAutoCycle();
        super.onStop();
    }

    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        Log.d("Slider Demo", "Page Changed: " + position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

al implementar las clases se nos crean nuevos métodos como lo son onStop(), onSliderClick(), onPageScrolled(), onPageSelected() y onPageScrollStateChanged().

Les dejo un vídeo y el código para que puedan trabajar este tutorial. no olviden comentar.

Video