如何实现像下面的屏幕截图一样的viewpager？

Question

这是在whatsapp中实现的，如何将视图（对于音频）动态添加到视图分页器中，如下所示。 我已经实现了图像的工作示例，但如何做到这一点，当图像和音频文件都在那里？ 任何代码或工作示例将不胜感激。 预先感谢您。

public class download_data_adapter extends PagerAdapter { 
private Context context; 
private List<Bitmap> data; 
private List<String> path; 

ImageButton btnplaypause; 
private SeekBar seekBarProgress; 
Button btnCancel; 
private MediaPlayer mediaPlayer; 
private PopupWindow pwindo; 
private int mediaFileLengthInMilliseconds; 
private final Handler handler = new Handler(); 


public download_data_adapter(Context c, List<Bitmap> b,List<String> s) { 

    context = c; 
    data = b; 
    path = s; 

} 

@Override 
public int getCount() { 
    if (data.size() <= 0) 
     return 1; 
    return data.size(); 
} 

@Override 
public boolean isViewFromObject(View view, Object object) { 
    return view == ((ImageView) object); 
} 

@Override 
public Object instantiateItem(final ViewGroup container, int position) { 

    final TouchImageView imageView = new TouchImageView(context); 
    int padding = 5; 
    imageView.setPadding(padding, padding, padding, padding); 
    imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 
    imageView.setImageBitmap(data.get(position)); 
    imageView.setTag(path.get(position)); 

    imageView.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 

      if (imageView.getTag().toString().endsWith(".mp3")) { 

       initiatePopupWindow(imageView.getTag().toString()); 

      } 
     } 

     private void initiatePopupWindow(final String tag) { 
      try { 

       LayoutInflater inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE); 
       View layout = inflater.inflate(R.layout.audio_play_layout,(ViewGroup) container. findViewById(R.id.rlAudioLayout)); 
       pwindo = new PopupWindow(layout,ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT,true); 
       pwindo.showAtLocation(layout, Gravity.CENTER,0, 0); 

       btnCancel = (Button) layout.findViewById(R.id.btnCancel); 
       btnCancel.setOnClickListener(new View.OnClickListener() { 

          @Override 
          public void onClick(View arg0) { 
           mediaPlayer.pause(); 
           pwindo.dismiss(); 
          } 
         }); 
       seekBarProgress = (SeekBar) layout.findViewById(R.id.SeekBarTestPlay); 
       seekBarProgress.setMax(99); 
       seekBarProgress.setOnTouchListener(new OnTouchListener() { 

          @Override 
          public boolean onTouch(View v, 
            MotionEvent event) { 
           if (mediaPlayer.isPlaying()) { 
            SeekBar sb = (SeekBar) v; 
            int playPositionInMillisecconds = (mediaFileLengthInMilliseconds/100) 
              * sb.getProgress(); 
            mediaPlayer 
              .seekTo(playPositionInMillisecconds); 
           } 
           return false; 
          } 
         }); 
       mediaPlayer = new MediaPlayer(); 
       mediaPlayer .setOnBufferingUpdateListener(new OnBufferingUpdateListener() { 

          @Override 
          public void onBufferingUpdate(
            MediaPlayer arg0, 
            int percent) { 
           seekBarProgress.setSecondaryProgress(percent); 

          } 
         }); 
       mediaPlayer.setOnCompletionListener(new OnCompletionListener() { 

          @Override 
          public void onCompletion(
            MediaPlayer arg0) { 
           btnplaypause 
             .setImageResource(R.drawable.button_play); 

          } 
         }); 
       btnplaypause = (ImageButton) layout.findViewById(R.id.btnPlayPause); 
       btnplaypause.setOnClickListener(new View.OnClickListener() { 

          @Override 
          public void onClick(View v) { 

           try { 
            mediaPlayer 
              .setDataSource(tag); 
            mediaPlayer.prepare(); 
           } catch (Exception e) { 
            e.printStackTrace(); 
           } 

           mediaFileLengthInMilliseconds = mediaPlayer 
             .getDuration(); 

           if (!mediaPlayer.isPlaying()) { 
            mediaPlayer.start(); 
            btnplaypause 
              .setImageResource(R.drawable.button_pause); 
           } else { 
            mediaPlayer.pause(); 
            btnplaypause.setImageResource(R.drawable.button_play); 
           } 

           primarySeekBarProgressUpdater(); 

          } 
         }); 

      } catch (Exception e) { 
       e.printStackTrace(); 
      } 

     } 

     private void primarySeekBarProgressUpdater() { 
      seekBarProgress.setProgress((int) (((float) mediaPlayer 
        .getCurrentPosition()/mediaFileLengthInMilliseconds) * 100)); 
      if (mediaPlayer.isPlaying()) { 
       Runnable notification = new Runnable() { 
        public void run() { 
         primarySeekBarProgressUpdater(); 
        } 
       }; 
       handler.postDelayed(notification, 1000); 
      } 
     } 

    }); 
    ((ViewPager) container).addView(imageView, 0); 


    return imageView; 

} 

@Override 
public void destroyItem(ViewGroup container, int position, Object object) { 
    ((ViewPager) container).removeView((ImageView) object); 
} 

}

活动放在这里： 在OnCreate中我打电话异步任务从服务器获取图像/记录的绝对路径，并将这些列表添加到列表中，您将看到“位图”和“bi” tmapUrl”上后执行IM添加以下代码

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); 
     adapter = new download_data_adapter(context,bitmaps,bitmapUrl); 
     viewPager.setAdapter(adapter); 

Answer 1

main.xml中可以是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 

    > 

<RelativeLayout 
     android:id="@+id/wrapper1" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/titlebarsize" 
     android:background="@color/red"> 

<SeekBar 
      android:id="@+id/progressrecord" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 

       android:background="@drawable/violetborderbox" 
      android:thumb="@drawable/playbtn" 
      android:progressDrawable="@drawable/seekbar_progress" 


      android:paddingLeft="35dp" 

      android:paddingRight="35dp"/> 
</RelativeLayout> 
<RelativeLayout 
     android:id="@+id/wrapper2" 
     android:layout_below="@+id/wrapper1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/violetbg" 
     android:orientation="vertical" 
     > 

     <android.support.v4.view.ViewPager 
      android:id="@+id/pager" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:layout_marginBottom="200dp" 
      app:matchChildWidth="@+id/vg_cover" 
      /> 



</RelativeLayout> 

用下面的代码

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="2" 
    android:orientation="horizontal" > 
    <ImageView 
     android:id="@+id/imageone" 
     android:layout_height="match_parent" 
     android:layout_width="0dp" 
     android:layout_weight="1" 

     /> 

</LinearLayout> 

创建一个XML和膨胀这里面你的适配器类

public class ViewPagerAdapter extends PagerAdapter { 
     // Declare Variables 
     Context context; 

     int[] flagone; 

     LayoutInflater inflater; 


     public ViewPagerAdapter(Context context,int[] flagsone) { 
      this.context = context; 
      this.flagone = flagsone; 


     } 

     @Override 
     public int getCount() { 
      return flag.length; 
     } 

     @Override 
     public boolean isViewFromObject(View view, Object object) { 
      return view == ((RelativeLayout) object); 
     } 

     @Override 
     public Object instantiateItem(ViewGroup container, int position) { 

      // Declare Variables 

      ImageView imgone; 
      Button button; 

      inflater = (LayoutInflater) context 
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      View itemView = inflater.inflate(R.layout.viewpager_image, container, 
        false); 

      // Capture position and set to the TextViews 

      // Locate the ImageView in viewpager_item.xml 
      imgone = (ImageView) itemView.findViewById(R.id.imageone); 

      // Capture position and set to the ImageView 
      imgone.setImageResource(flagone[position]); 


      // Add viewpager_item.xml to ViewPager 
      ((ViewPager) container).addView(itemView); 

      return itemView; 
     } 

     @Override 
     public void destroyItem(ViewGroup container, int position, Object object) { 
      // Remove viewpager_item.xml from ViewPager 
      ((ViewPager) container).removeView((RelativeLayout) object); 

     } 
    } 

和活性

onCreate(){ 

int imagelist1={R.drawable.image1}; 
int imagelist2={R.drawable.image2}; 
ViewPagerAdapter adapter = new ViewPagerAdapter(mContext, imagelist1,imaglist2); 

        // Binds the Adapter to the ViewPager 
        myViewPager.setAdapter(adapter); 

viewPager.setOnPageChangeListener(new OnPageChangeListener() { 

     @Override 
     public void onPageSelected(int position) { 
      // TODO Auto-generated method stub 

      //System.out.println("new page selected"+position);  
      pageposition=position; 


     } 

     @Override 
     public void onPageScrolled(int i, float v, int i2) { 
      // TODO Auto-generated method stub 




     } 

     @Override 
     public void onPageScrollStateChanged(int arg0) { 
      // TODO Auto-generated method stub 
      try{ 


       imageview.setVisibility(View.GONE); 
       imagebutton.setVisibility(View.VISIBLE); 
     } 
    }); 

}