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); HashMapurl_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.
Link caído
ResponderEliminar