Cómo asignar botones en diferentes lugares de 70 imágenes Separadamente?

Mi problema:

Tengo 70 imágenes, y en cada imagen quiero poner el botón transparente de tal manera que cuando el usuario hace tapping en él, reproduce un audio corto con respecto al punto de la imagen. Las imágenes se muestran en un ViewPager .

Mi solución:

Ahora lo que tengo en mente es que puedo crear 70 fragmentos cada uno que contiene la imagen respectiva como fondo y puedo asignar el botón en cada lugar fácilmente y asignar acciones a los botones que reproducirán su audio respectivo.

Pero

Esto no parece un buen enfoque para incluir 70 fragmentos en una sola aplicación.

Entonces, ¿cómo puedo lograr esto, y cuál sería un mejor enfoque que puedo usar?

Cualquier ayuda sería muy apreciada.

Gracias.

Sólo podemos tener un fragmento y crear una estructura de datos ArrayList de Map (Button, RelatedAudioFile) para la celebración de botones y archivos de audio relacionados. El índice ArrayList representa el número de página.

Ejemplo: Ahora vamos a decir que tenemos 3 viewPages. Como la mayoría del índice PagerAdapter comienza desde "0", digamos que Page-0 contiene 3 botones, Page-1 contiene 1 botón, Page-2 contiene 2 botones.

Pseudocódigo:

 class PagerHolder extends Fragment { //buttons list - here, arrayList index represents page number //and at each index we have map of buttons (buttons in each of these pages) and the related audio files private ArrayList<Map<Button, RelatedAudioFile>> pageButtonsList = new ArrayList<>(); //pager view private ViewPager viewPager; //pager adapter private PagerAdapter pagerAdapter; //current page number -- page in which we are in right now private int currentpageNumber = 0; //buttonListener -- one button listener for all the buttons in all the pages. private View.OnClickListener listener = new View.OnClickListener() { @Override public void onClick(View buttonView) { //here you can play the audio. //buttonView -- is the same button-object that was pressed. ((RelatedAudioFile)pageButtonsList.get(currentpageNumber).get(buttonView)).play(); } }; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); pagerAdapter = new PagerAdapter(getChildFragmentManager()); //add buttons to the list //page 0 buttons HashMap<Button, RelatedAudioFile> page0Buttons = new HashMap<>(); page0Buttons.put(new Button(context), new RelatedAudioFile()); page0Buttons.put(new Button(context), new RelatedAudioFile()); page0Buttons.put(new Button(context), new RelatedAudioFile()); pageButtonsList.add(page0Buttons) //Adding page 1 buttons: HashMap<Button, RelatedAudioFile> page1Buttons = new HashMap<>(); page1Buttons.put(new Button(context), new RelatedAudioFile()); pageButtonsList.add(page1Buttons); //Adding page 2 buttons: HashMap<Button, RelatedAudioFile> page2Buttons = new HashMap<>(); page2Buttons.put(new Button(context), new RelatedAudioFile()); page2Buttons.put(new Button(context), new RelatedAudioFile()); pageButtonsList.add(page2Buttons); for(Map<Button, RelatedAudioFile> pageButtons :pageButtonsList) { for(Button button : pageButtons.keySet()) { button.setOnClickListener(listener); } } } @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_editor_pager, container, false); viewPager = (ViewPager) v.findViewById(R.id.view_pager); viewPager.setAdapter(pagerAdapter); return v; } private class PagerAdapter extends FragmentPagerAdapter { private ButtonFragment buttonFragment; private PagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int pageNumber) { currentpageNumber = pageNumber; //pass the buttons to the fragment so that it can add these buttons to the screen buttonFragment = ButtonFragment.newInstance(pageButtonsList.get(pageNumber).keySet()); //to add buttons on screen programatically at certain position you can refer here: // http://stackoverflow.com/questions/3441475/android-change-absolute-position-of-a-view-programmatically } //number of pages @Override public int getCount() { return 70; } } 

No tienes que crear 70 fragmentos. En su lugar, sólo podría utilizar un ImageView como sigue:

 final List<Integer> list = new ArrayList<>(); list.add(R.drawable.img_0); list.add(R.drawable.img_1); ... list.add(R.drawable.img_69); ImageView img = (ImageView)findViewById(R.id.imageView); img.setBackgroundResource(list.get(yourIndex)); img.setOnClickListener(new OnClickListener());//plays the audio 

No es necesario declarar 70 fragmentos, simplemente crear un fragmento y en ese fragmento declarar arreglos globales de imágenes y sonido. Ahora, cuando se redirige aquí en el fragmento sólo pasar una variable entera en el argumento. Así que ahora puede mostrar la imagen desde la matriz utilizando esa variable entera y al hacer clic en el botón puede reproducir audio desde la matriz de sonido utilizando el mismo número entero.

Utilice este paginador de vista personalizada

 import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent; /** * Created by Jinesh on 06-01-2016. */ public class CustomViewPager extends ViewPager { private boolean enabled; public CustomViewPager(Context context, AttributeSet attrs) { super(context, attrs); this.enabled = true; } @Override public boolean onTouchEvent(MotionEvent event) { if (this.enabled) { return super.onTouchEvent(event); } return false; } @Override public boolean onInterceptTouchEvent(MotionEvent event) { /* if (this.enabled) { return super.onInterceptTouchEvent(event); } */ return false; } public void setPagingEnabled(boolean enabled) { this.enabled = enabled; } } 

Añadir esta etiqueta a tu xml

 <Your_package_name.CustomViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/vP_asq_Pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> 

A continuación, extienda PagerAdapter

 public class HomeAdapter extends PagerAdapter { public HomeAdapter(){ } @Override public int getCount() { return mItemList.size(); } @Override public Object instantiateItem(ViewGroup container, int position) { LayoutInflater inflater = (LayoutInflater) container.getContext().getSystemService(LAYOUT_INFLATER_SERVICE); v = inflater.inflate(R.layout.adapter_surveyquestion_view, null); /*do your operations on your views here store the 70 images in arraylist and return the size of the arraylist in getCount() method of the adapter.show different images each time in getView based on the position variable.*/ (container).addView(v); return v; } @Override public boolean isViewFromObject (View view, Object object){ return view == ((View) object); } @Override public void restoreState (Parcelable arg0, ClassLoader arg1){ } @Override public Parcelable saveState () { return null; } @Override public void destroyItem (ViewGroup container,int position, Object object){ container.removeView((View) object); } } 

Así haría yo. Por favor, tenga en cuenta que esta es una solución de clase única por ejemplo propósito, puede separar las clases

  • Esto mantendrá sólo 5 fragmentos a la vez
  • Pantalla se divide en 4 botones que puede establecer el valor alfa de los botones y el tamaño de acuerdo a la necesidad en la actualidad lo mantenía medio transparente, por ejemplo
  • Estoy utilizando Glide para cargar la imagen para evitar problemas de MOO debido a la carga de la imagen

Lo que parece

Introduzca aquí la descripción de la imagen

La solución :-

 package com.example.sample; import java.util.ArrayList; import com.bumptech.glide.Glide; import android.content.Context; import android.media.Ringtone; import android.media.RingtoneManager; import android.net.Uri; import android.os.Bundle; import android.os.Parcelable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.View.OnClickListener; import android.widget.FrameLayout; import android.widget.ImageView; public class MainActivity extends FragmentActivity { private static ArrayList<Integer> imageList = new ArrayList<Integer>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Load image data for (int i = 0; i < 70; i++) { imageList.add(R.drawable.ic_launcher); } if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()).commit(); } } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { public PlaceholderFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); ViewPager viewPager = (ViewPager) rootView .findViewById(R.id.image_pager); // Limit number of pages that should be retained to either // side of the current page viewPager.setOffscreenPageLimit(2); viewPager.setAdapter(new SongDetailAdapter(getActivity())); return rootView; } } public static class SongDetailAdapter extends PagerAdapter { Context mContext; LayoutInflater mLayoutInflater; public SongDetailAdapter(Context context) { mContext = context; mLayoutInflater = (LayoutInflater) mContext .getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public int getCount() { return imageList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == ((FrameLayout) object); } @Override public Object instantiateItem(ViewGroup container, final int position) { View itemView = mLayoutInflater.inflate( R.layout.image_place_holder, container, false); ImageView imageView = (ImageView) itemView .findViewById(R.id.background); itemView.findViewById(R.id.button1).setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { playSound(1); } }); itemView.findViewById(R.id.button2).setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { playSound(2); } }); itemView.findViewById(R.id.button3).setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { playSound(3); } }); itemView.findViewById(R.id.button4).setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { playSound(4); } }); Glide.with(mContext).load("").placeholder(imageList.get(position)) .crossFade(300).into(imageView); container.addView(itemView); return itemView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((FrameLayout) object); } @Override public Object instantiateItem(View arg0, int arg1) { // TODO Auto-generated method stub return null; } @Override public Parcelable saveState() { // TODO Auto-generated method stub return null; } /* * Play sound */ private void playSound(int buttonNumber) { switch (buttonNumber) { case 1: // play sound for Button1 case 2: // play sound for Button2 case 3: // play sound for Button3 case 4: // play sound for Button4 default: // play sound for Button n // Playing default notification here for example Uri notification = RingtoneManager .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); Ringtone r = RingtoneManager .getRingtone(mContext, notification); r.play(); break; } } } } 

Layouts

Actividad principal activity_main.xml

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.sample.MainActivity" tools:ignore="MergeRootFrame" /> 

Diseño del fragmento principal fragment_main.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="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.sample.MainActivity$PlaceholderFragment" > <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/image_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> 

Image titular de lugar con botones simulado imae_place_holder.xml

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:alpha=".5" android:background="@android:color/white" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:alpha=".5" android:background="@android:color/holo_green_light" android:text="Button" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:orientation="horizontal" > <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:alpha=".5" android:background="@android:color/holo_blue_light" android:text="Button" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0" android:alpha=".5" android:background="@android:color/holo_red_light" android:text="Button" /> </LinearLayout> </LinearLayout> </FrameLayout> 
  • IllegalStateException: No se puede cambiar ID de contenedor del fragmento
  • Diálogo con pestañas con fragmentos en el widget
  • Botón Atrás cerrar la aplicación incluso cuando se utiliza FragmentTransaction.addToBackStack ()
  • No hay animación al cambiar de fragmento a la actividad y volver
  • Cómo utilizar diferentes onKeyDown en fragmento de una misma actividad
  • Fragmento onResume () & onPause () no se llama en backstack
  • Cómo cambiar las pestañas programatically en android de fragmento?
  • Cómo configurar Custom ListView en Android Fragement?
  • Cómo evitar onCreateView () al deslizar en las pestañas
  • Excepción NullPointer en android.support.v4.app.FragmentManagerImpl.makeInactive
  • ActionBarActivity botón de retroceso no estallar de backstack
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.