Android 图片的滑动效果（ViewPager、PagerAdapter）

最新推荐文章于 2025-03-12 11:11:07 发布

小韩boke

最新推荐文章于 2025-03-12 11:11:07 发布

阅读量1.5k

点赞数

分类专栏： android

本文链接：https://blog.youkuaiyun.com/hanyuboke/article/details/47841387

版权

android 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用ViewPager和PagerAdapter在Android中创建一个图片滑动效果，同时结合底部标题，实现点击标题切换图片的功能。通过LayoutInflater加载布局，创建包含多个页面的viewlist，并设置ViewPager的适配器，实现在滑动或点击标题时动态切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewPager 实现屏幕左右滑动的一个类，与PagerAdapter（为ViewPager提供的一个适配器）结合可以实现图片的动态切换

实现的主要功能；

1、滑动图片可以进行图片的切换

2、点击下方的标题也可以进行切换

工程建立如图：

代码：

MainActivity.java：

package com.hpu.slipview;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener{

	private ViewPager viewpager;//是实现左右两个屏幕平滑地切换的一个类
	private List<View> viewlist;
	private TextView t1;
	private TextView t2;
	private TextView t3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        
    	t1 = (TextView)findViewById(R.id.titile1);
    	t2 = (TextView)findViewById(R.id.titile2);
    	t3 = (TextView)findViewById(R.id.titile3);
    	
    	t1.setOnClickListener(this);
    	t2.setOnClickListener(this);
    	t3.setOnClickListener(this);
        
        viewpager=(ViewPager)findViewById(R.id.viewpagerid);
        
        viewpager.setOnPageChangeListener(this);//对页面滑动事件监听
        
        viewlist=new ArrayList<View>();
        
<a target=_blank href="http://blog.youkuaiyun.com/hanyuboke/article/details/47842037">        LayoutInflater </a>inflater = getLayoutInflater();//可以动态的载入一个页面
        View view1=inflater.inflate(R.layout.tab1, null);
        View view2=inflater.inflate(R.layout.tab2, null);
        View view3=inflater.inflate(R.layout.tab3, null);//窗体的三个页面
        viewlist.add(view1);
        viewlist.add(view2);
        viewlist.add(view3);//添加窗体要显示的页面
        
        PagerAdapter madapter = new PagerAdapter() {//PagerAdapter就是为ViewPager提供的一个适配器
			
			@Override//
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0==arg1;
			}
			
			@Override//判断当前窗体界面数
			public int getCount() {
				// TODO Auto-generated method stub
				return viewlist.size();
			}
			
			@Override//从ViewGroup中移出当前View
			public void destroyItem(View container, int position, Object object) {
				// TODO Auto-generated method stub
				//super.destroyItem(container, position, object);
				((ViewPager)container).removeView(viewlist.get(position));
			}
			
			@Override//返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
			public Object instantiateItem(View container, int position) {
				// TODO Auto-generated method stub
				//return super.instantiateItem(container, position);
				((ViewPager)container).addView(viewlist.get(position));
				return viewlist.get(position);
			}
			
		};
		
		viewpager.setAdapter(madapter);
        
        
    }
    
    public  void Reset(){
    	t1.setText("标题一");
    	t2.setText("标题二");
    	t3.setText("标题三");
    }


	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
    	//Toast.makeText(getApplicationContext(), "点击", Toast.LENGTH_SHORT).show();
    	Reset();
    	switch(v.getId()){
    	
    	case R.id.titile1:
    		t1.setText("选中");
    		viewpager.setCurrentItem(0);//点击标题，图片也跟着切换
    		break;
    		
    	case R.id.titile2:
    		t2.setText("选中");
    		viewpager.setCurrentItem(1);
    		break;
    		
    	case R.id.titile3:
    		t3.setText("选中");
    		viewpager.setCurrentItem(2);
    		break;
    		
    	}
		
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub
		Reset();
		int current = viewpager.getCurrentItem();//得到窗体显示的适配器中的那个页面（从0开始）
		switch(current){
		case 0:
			t1.setText("选中");
			break;
		case 1:
			t2.setText("选中");
			break;
		case 2:
			t3.setText("选中");
			break;
		}
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub
		
	}

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

activity_main.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        >

    <android.support.v4.view.ViewPager//Viewpager标签
        android:id="@+id/viewpagerid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    </LinearLayout>
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView 
            android:id="@+id/titile1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题一"
            android:textSize="20sp"
            android:layout_weight="1"
            android:gravity="center"
            />
        <TextView 
            android:id="@+id/titile2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题二"
            android:textSize="20sp"
             android:layout_weight="1"
             android:gravity="center"
            />
        <TextView 
            android:id="@+id/titile3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题三"
            android:textSize="20sp"
             android:layout_weight="1"
             android:gravity="center"
            />
    </LinearLayout>
</LinearLayout>

三个tab页面：

tab1：

<?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:orientation="vertical" 
    android:background="@drawable/image1"
    >
<a target=_blank href="http://blog.youkuaiyun.com/hanyuboke/article/details/47842279">    <ProgressBar</a> //一种进度条
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        
        />
    

</LinearLayout>

tab2

<?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:background="@drawable/image20"
    android:orientation="vertical" >
    <SeekBar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</LinearLayout>

tab3

<?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:background="@drawable/image29"
    android:orientation="vertical" >
    

</LinearLayout>

图片效果：