如何实现如下屏幕截图的viewpager？

This is implemented in whatsapp,how to add a view(for audio) dynamically into the view pager like this. i have implemented working example for images but how to do that when both image and audio files were there? Any code or working example will be much appreciated. Thank you in advance.

这是在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);
}

}

Activity goes here: in OnCreate i am calling async task to get the image/record's absolute paths from server,and adding those to list as of you are seeing "bitmaps" and "bitmapUrl" on post execute im adding the below code

活动在这里:在OnCreate中我调用异步任务来从服务器获取图像/记录的绝对路径,并将那些添加到列表中,你看到“bitmaps”和“bitmapUrl”在post执行时添加下面的代码

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

1 个解决方案

#1

the main.xml can be

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>

Create an xml with the following code

使用以下代码创建xml

<?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>

and inflate this inside your adapter class

并在你的适配器类中膨胀

    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);

        }
    }

and in activity

和活动

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);
        }
    });

}