使用Viewpager制作图片阅读器（1）-简单实现

最新推荐文章于 2024-05-04 14:25:41 发布

hewence1

最新推荐文章于 2024-05-04 14:25:41 发布

阅读量712

点赞数 1

本文链接：https://blog.csdn.net/hewence1/article/details/38942491

版权

</pre>制作的图片阅读器，先做最简单的功能：</p><p></p><p>1.使用Viewpager把本地资源图片都加载进来</p><p>         先准备几十张图片放在资源文件下，并设置全局的变量，跟全局数据的类如下：</p><pre class="html" name="code">public class DataConfig {
    public static final int[] ALL_IMAGE_IDS= {
        R.drawable.photo0,
        R.drawable.photo1,
        R.drawable.photo2,
        R.drawable.photo3,
        R.drawable.photo4,
        R.drawable.photo5,
        R.drawable.photo6,
        R.drawable.photo7,
        R.drawable.photo8,
        R.drawable.photo9,
        R.drawable.photo10,
        R.drawable.photo11,
        R.drawable.photo12,
        R.drawable.photo13,
        R.drawable.photo14,
        R.drawable.photo15,
        R.drawable.photo16,
        R.drawable.photo17,
        R.drawable.photo18,
        R.drawable.photo19,
        R.drawable.photo20,
        R.drawable.photo21,
        R.drawable.photo22,
        R.drawable.photo23,
        R.drawable.photo24,
        R.drawable.photo25,
        R.drawable.photo26,
        R.drawable.photo27,
        R.drawable.photo28,
        R.drawable.photo29,
        R.drawable.photo30,
        R.drawable.photo31,
        R.drawable.photo32,
        R.drawable.photo33,
        R.drawable.photo34,
        R.drawable.photo35,
        R.drawable.photo36,
        R.drawable.photo37,
        R.drawable.photo38,
        R.drawable.photo39,
        R.drawable.photo40,
        R.drawable.photo41,
        R.drawable.photo42,
        R.drawable.photo43,
        R.drawable.photo44,
        R.drawable.photo45,
        R.drawable.photo46,
        R.drawable.photo47,
    };
}

</pre><pre class="html" name="code">Activity的代码直接贴上来不废话：

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

    private void initViews() {
        mViewPager = (ViewPager)findViewById(R.id.view_pager);
        mViewPager.setAdapter(new ViewPagerAdapter(MainActivity.this, mImageLoader));
        mTextView = (TextView)findViewById(R.id.text);
        mTextView.setText("1/" +  DataConfig.ALL_IMAGE_IDS.length);
    }

布局文件：

<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"
    tools:context=".MainActivity" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </android.support.v4.view.ViewPager>
	<TextView 
	    android:id="@+id/text"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignParentBottom="true"
	    android:layout_centerHorizontal="true"
	    android:textColor="#ffff0000"/>
</RelativeLayout>

  mTextView用于显示下面的图片数跟当前页：（默认“1/48”）

  在 initViews里面setAdapter就可以把图片加载上去，当前要Adapter进行重写：

public class ViewPagerAdapter extends PagerAdapter{
    Context mContext = null;
    private ImageLoader mImageLoader = null;
    
    public ViewPagerAdapter(Context context, ImageLoader imageLoader){
        mContext = context;
        mImageLoader = imageLoader;
    }
    
    @Override
    public int getCount() {
       return DataConfig.ALL_IMAGE_IDS.length;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        View view = (View)object;
        container.removeView(view);
    }
    
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        int id = DataConfig.ALL_IMAGE_IDS[position];
       
        View view = null;
        view = LayoutInflater.from(mContext).inflate(R.layout.details, null);
        ImageView imageView = (ImageView)view.findViewById(R.id.image);
        imageView.setImageResource(id);
        container.addView(view);

        return view;
    }

}

在instantiateItem（） 里面把每一页的布局给加进来，并设置ImageView的id：

details.xml代码：

<pre class="html" name="code"><?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
</ImageView>

这样就可以显示出来如图的效果了：

    <img src="https://img-blog.csdn.net/20140830105824795?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGV3ZW5jZTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 到了这里会发现 始终显示1/48  因为我们都没有改变过textView的内容：

 我们想要的结果是滑动一页更新一下当前页，接下来我们监听一下viewpager就可以实现该功能：

 修改initViews的代码（增加监听翻页）

private void initViews() {
        mViewPager = (ViewPager)findViewById(R.id.view_pager);
        mViewPager.setAdapter(new ViewPagerAdapter(MainActivity.this, mImageLoader));
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position ) {
                LogUtils.i(TAG , "onPageSelected  position = " + position);
                mTextView.setText( (position + 1) + "/" +  DataConfig.ALL_IMAGE_IDS.length);
            }
            
            @Override
            public void onPageScrolled(int position, float arg1, int arg2) {
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                
            }
        });
            mTextView = (TextView)findViewById(R.id.text);
        mTextView.setText("1/" +  DataConfig.ALL_IMAGE_IDS.length);
    }

  这样每翻页就可以知道当前在那页了！

接下来实现无限循环：

  无限循环其实跟简单，在ViewPagerAdapter return Integer.MAX_VALUE就可以了，

@Override
    public int getCount() {
       // return DataConfig.ALL_IMAGE_IDS.length;
        return Integer.MAX_VALUE;
    }

到这里view也要跟着设置一下，否则数据在instantiateItem（）在中就越界了：

修改instantiateItem（）中的代码2行代码就可以

int index = position % DataConfig.ALL_IMAGE_IDS.length;
        int id = DataConfig.ALL_IMAGE_IDS[index];

这样就可以实现无限循环了

现在在最后一页的时候，在往前翻的话就会出现 49/48了

因此给49 进行模运算就可以了修改

@Override
            public void onPageSelected(int position ) {
                LogUtils.i(TAG , "onPageSelected position = " + position);
                mTextView.setText( (position % DataConfig.ALL_IMAGE_IDS.length + 1) + "/" + DataConfig.ALL_IMAGE_IDS.length);
            }

到现在简单的图片阅读器完成了