从上篇的热身版,我们对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)点
其他的代码都注释的很详细了,就不多废话了!