ViewPager（新手篇---实战版）

最新推荐文章于 2022-01-01 22:34:26 发布

汤圆77

最新推荐文章于 2022-01-01 22:34:26 发布

阅读量886

点赞数

分类专栏： Android应用

本文链接：https://blog.csdn.net/u010549312/article/details/10297777

版权

Android应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从上篇的热身版，我们对ViewPager有了大概了解，现在我们来扩展下功能，实现如下效果图的Demo：

当我们滑动页面时，三个主标题下面的蓝色下划线也会随着滑动，标示当前页面对应的标题，还有就是我们点击对应的标题时也会跳到对应的页面。现实起来其实也很简单的，跟上篇比较起来，就只要吧主布局稍微改下，然后对标题增加监听，对页面的滑动状态改变增加监听，响应监听时让下划线随之动起来（设置动画）。

我们先看修改的主布局：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout 
        android:id="@+id/linearlayout"
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:orientation="horizontal">"
        <TextView 
            android:text=" @我"
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"/>
        <TextView 
            android:text="评论"
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"/>
        <TextView 
            android:text="私信"
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"/>"
        
    </LinearLayout>
    
    <ImageView 
        android:id="@+id/cursor"
        android:layout_below="@+id/linearlayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/cursor"/>"
    
    <android.support.v4.view.ViewPager 
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:flipInterval="30"
        android:layout_below="@id/cursor"
        android:persistentDrawingCache="animation"/>
    
</RelativeLayout>

这里之所以能让三个TextView平均分成三份并位于各自区域的中心，取决于android:layout_weight和android:gravity这两个属性。

主函数的修改：

package com.example.viewpagertest;

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

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.util.Log;
public class MainActivity extends Activity {

	ViewPager viewpager;
	viewPagerAdapter myAdapter;
	View view1,view2,view3;
	List<View> views;
	
	ImageView imageview;         //动画图片
	TextView text1,text2,text3;
	int offset=0;               //动画图片偏移量
	int currIndex=0;            //当前页卡编号
	int bmpW;                 //动画图片宽度
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		InitImageView();
		InitTextView();
		
		//实例化页卡
		view1=findViewById(R.layout.layout1);
		view2=findViewById(R.layout.layout2);
		view3=findViewById(R.layout.layout3);
		//从xml中取出view
		LayoutInflater lf=LayoutInflater.from(this);
		view1=lf.inflate(R.layout.layout1, null);
	    view2=lf.inflate(R.layout.layout2, null);
	    view3=lf.inflate(R.layout.layout3, null);
		//把各个页卡的view添加到列表中
	    views=new ArrayList<View>();
	    views.add(view1);
	    views.add(view2);
	    views.add(view3);
	    //实例化ViewPager
		viewpager=(ViewPager)this.findViewById(R.id.viewPager);
		//实例化适配器
		myAdapter=new viewPagerAdapter(views);
		//给ViewPager添加适配器
		viewpager.setAdapter(myAdapter);
		
		viewpager.setCurrentItem(0);
		viewpager.setOnPageChangeListener(new MyOnPageChangeListener());
	}
	
	//初始化动画，就是进行页卡滑动时，下划线也跟着滑动的效果需要的一些偏移量·····
	private void InitImageView(){
		imageview=(ImageView)findViewById(R.id.cursor);
		bmpW=BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();
		
		DisplayMetrics dm=new DisplayMetrics();
		this.getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW=dm.widthPixels;   //获取手机屏幕宽度分辨率
		
		offset=(screenW/3-bmpW)/2;    //获取图片偏移量
		
		 //imageview设置平移，使下划线平移到初始位置（平移一个offset）
		Matrix matrix=new Matrix();
		matrix.postTranslate(offset, 0);
		imageview.setImageMatrix(matrix);
	}
	
	private void InitTextView(){
		text1=(TextView)findViewById(R.id.text1);
		text2=(TextView)findViewById(R.id.text2);
		text3=(TextView)findViewById(R.id.text3);
		
		MyOnClickListener c = new MyOnClickListener();
		text1.setOnClickListener(c);
		text2.setOnClickListener(c);
		text3.setOnClickListener(c);
	}
	
	//标题点击监听
	public class MyOnClickListener implements OnClickListener{
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()) {
			case R.id.text1:
				Log.v("on click", "1viewpager  setcurrentItem");
				viewpager.setCurrentItem(0);
				break;
			case R.id.text2:
				Log.v("on click", "2viewpager  setcurrentItem");
				viewpager.setCurrentItem(1);
				break;
			case R.id.text3:
				Log.v("on click", "3viewpager  setcurrentItem");
				viewpager.setCurrentItem(2);
				break;
			default:
				break;
			}
		}
		
	}
	//当页面滑动时，开始动画并跳出Toast
	public class MyOnPageChangeListener implements OnPageChangeListener{

		private int one=offset*2+bmpW;    //页面1到页面2的偏移量
		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
			
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}
		//即将要被显示的页卡的index
		@Override
		public void onPageSelected(int arg0) {
			// TODO Auto-generated method stub
			//初始化移动的动画（从当前位置，x平移到即将要到的位置）
			Animation animation=new TranslateAnimation(currIndex*one,arg0*one,0,0);
			
			currIndex=arg0;
			animation.setFillAfter(true);  //动画终止时停留在最后一帧，不然会回到没有执行前的状态
			animation.setDuration(200);   //动画持续时间，0.2秒
			imageview.startAnimation(animation); //是用imageview来显示动画
			int i=currIndex+1;
			Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();
		}
		
	}

}

TranslateAnimation(float fromXDelta,float toXDelta,float fromYDelta,float toYDelta)

第一个参数：表示动画开始的点离当前View X坐标上的差值

第二个参数：表示动画结束的点离当前View X坐标上的差值

第三个参数：表示动画开始的点离当前View Y坐标上的差值

第四个参数：表示动画结束的点离当前View Y坐标上的差值,

如果View在A（x，y）点，那么动画就是从B点（x+fromXDelta , y+fromYDelta)点移动到C点（x+ toXDelta， y+ toYDelta）点

其他的代码都注释的很详细了，就不多废话了！

汤圆77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ViewPager（新手篇---实战版）

从上篇的热身版，我们对ViewPager有了大概了解，现在我们来扩展下功能，实现如下效果图的Demo：当我们滑动页面时，三个主标题下面的蓝色下划线也会随着滑动，标示当前页面对应的标题，还有就是我们点击对应的标题时也会跳到对应的页面。现实起来其实也很简单的，跟上篇比较起来，就只要吧主布局稍微改下，然后对标题增加监听，对页面的滑动状态改变增加监听，响应监听时让下划线随之动起来（设置动画）。
复制链接

扫一扫