From:http://blog.csdn.net/zhy_cheng/article/details/8254140
但是在那一篇中还有一个不起眼的地方没做,今天就完善它。
今天要实现在文字下面来个ImageView,实现动画。先看看效果图。
在滑动页面的时候,下面的ImageView会滑动。好了,开始正题。
1.布局文件main.xml
先看代码:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="#1685cc"
- android:orientation="vertical" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="#1685cc" >
- <TextView
- android:id="@+id/textView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="center"
- android:text="试题"
- android:textSize="25sp" />
- <TextView
- android:id="@+id/textView2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="center"
- android:text="原文"
- android:textSize="25sp" />
- <TextView
- android:id="@+id/textView3"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:gravity="center"
- android:text="解答"
- android:textSize="25sp" />
- </LinearLayout>
- <ImageView
- android:id="@+id/imageView1"
- android:layout_width="50dp"
- android:layout_height="6dp"
- android:layout_marginLeft="30dip"
- android:src="@drawable/meitu" />
- </LinearLayout>
- <android.support.v4.view.ViewPager
- android:id="@+id/viewpager"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:layout_weight="1"
- android:background="#FF0000" />
- </LinearLayout>
与上篇文章相比,在包含三个TextView的LinearLayout下面加了一个ImageView,用于显示图片。图片的宽和高以及左边距都是固定的。
2.功能实现的Java代码
加了三个成员变量,一个int类型的currentPage用于标示当前正在显示那个页面,一个int类型的disPlayWidth用于保存屏幕的宽度,还有一个int类型的offSet,这个变量标示的是一个宽度,下面作图说明:
offSet就是TextView控件的宽度减去图片的宽度除以2,如上图所示。
实现动画的原理就是当当前的界面发生改变就实现动画。界面的改变有两个来源
1.用户点击上面的TextView
2.用户滑动界面
我必须对这两种的改变都做出反应。
1.对TextView的点击做出反应在TextView的onClick方法中:
- @Override
- ublic void onClick(View v) {
- int single=b.getWidth()+offSet*2;
- if(v.getId()==R.id.textView1)
- {
- vp.setCurrentItem(0);
- if(currentPage!=0)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=0;
- }
- if(v.getId()==R.id.textView2)
- {
- vp.setCurrentItem(1);
- if(currentPage!=1)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=1;
- }
- if(v.getId()==R.id.textView3)
- {
- vp.setCurrentItem(2);
- if(currentPage!=2)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=2;
- }
在这里,变量single表示移动一次的长度,从图中可以看出是图片的宽度加上offSet*2,这表示这个长度就是一个TextView的宽度。在这里为什么不获取TextView的宽度呢?原因是TextView与TextView之间是有宽度的,直接使用TextView的宽度的话不准。然后判断是哪一个TextView被点击了,再设置当前的界面,接着实现动画。如果点击的是当前的页面则不用实现动画,如果点击的页面不是当前的页面则从当前页面移动到指定的页面。TranslateAnimation动画的前两个参数是X方向的移动。动画完成后ImageView要停在最后的地点,所以要设置setFillAfter为true。
2.用户滑动界面时的反应
用户滑动界面的方法要对ViewPager设置监听,在onPageSelected方法中处理。
- public void onPageSelected(int arg0) {
- int single=b.getWidth()+offSet*2;
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- currentPage=arg0;
- }
在这个方法中的arg0是滑动之后的那个界面的标示。这里的代码与上面的差不多,还是实现一个动画。
下面贴出ViewPagerWorkActivity中的全部代码:
- package com.zhycheng.viewpagerwork;
- import java.util.ArrayList;
- import android.app.Activity;
- import android.graphics.Bitmap;
- import android.graphics.BitmapFactory;
- import android.os.Bundle;
- import android.os.Parcelable;
- import android.support.v4.view.PagerAdapter;
- import android.support.v4.view.ViewPager;
- import android.support.v4.view.ViewPager.OnPageChangeListener;
- import android.view.Display;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.animation.TranslateAnimation;
- import android.widget.ImageView;
- import android.widget.TextView;
- public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {
- TextView tv1,tv2,tv3;
- int currentPage=0;
- ViewPager vp;
- ArrayList al;
- Bitmap b;
- ImageView i;
- int disPlayWidth,offSet;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- i=(ImageView) findViewById(R.id.imageView1);
- Display dis=this.getWindowManager().getDefaultDisplay();
- disPlayWidth=dis.getWidth();
- b=BitmapFactory.decodeResource(this.getResources(),R.drawable.meitu);
- offSet=(disPlayWidth/3-b.getWidth())/2;
- tv1=(TextView) findViewById(R.id.textView1);
- tv2=(TextView) findViewById(R.id.textView2);
- tv3=(TextView) findViewById(R.id.textView3);
- vp=(ViewPager) findViewById(R.id.viewpager);
- tv1.setOnClickListener(this);
- tv2.setOnClickListener(this);
- tv3.setOnClickListener(this);
- al=new ArrayList();
- LayoutInflater li=LayoutInflater.from(this);
- al.add(li.inflate(R.layout.zyc1, null));
- al.add(li.inflate(R.layout.zyc2, null));
- al.add(li.inflate(R.layout.zyc3, null));
- PagerAdapter pa=new PagerAdapter(){
- @Override
- public void destroyItem(View arg0, int arg1, Object arg2) {
- // TODO Auto-generated method stub
- ((ViewPager)arg0).removeView((View)al.get(arg1));
- }
- @Override
- public void finishUpdate(View arg0) {
- // TODO Auto-generated method stub
- }
- @Override
- public int getCount() {
- // TODO Auto-generated method stub
- return al.size();
- }
- @Override
- public Object instantiateItem(View arg0, int arg1) {
- ((ViewPager)arg0).addView((View)al.get(arg1), 0);
- return (View)al.get(arg1);
- }
- @Override
- public boolean isViewFromObject(View arg0, Object arg1) {
- // TODO Auto-generated method stub
- return arg0==arg1;
- }
- @Override
- public void restoreState(Parcelable arg0, ClassLoader arg1) {
- // TODO Auto-generated method stub
- }
- @Override
- public Parcelable saveState() {
- // TODO Auto-generated method stub
- return null;
- }
- @Override
- public void startUpdate(View arg0) {
- // TODO Auto-generated method stub
- }};
- vp.setAdapter(pa);
- vp.setCurrentItem(0);
- vp.setOnPageChangeListener(this);
- }
- @Override
- public void onClick(View v) {
- int single=b.getWidth()+offSet*2;
- if(v.getId()==R.id.textView1)
- {
- vp.setCurrentItem(0);
- if(currentPage!=0)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=0;
- }
- if(v.getId()==R.id.textView2)
- {
- vp.setCurrentItem(1);
- if(currentPage!=1)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=1;
- }
- if(v.getId()==R.id.textView3)
- {
- vp.setCurrentItem(2);
- if(currentPage!=2)
- {
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- }
- currentPage=2;
- }
- }
- @Override
- public void onPageScrollStateChanged(int arg0) {
- }
- @Override
- public void onPageScrolled(int arg0, float arg1, int arg2) {
- }
- @Override
- public void onPageSelected(int arg0) {
- int single=b.getWidth()+offSet*2;
- TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);
- ta.setFillAfter(true);
- ta.setDuration(200);
- i.startAnimation(ta);
- currentPage=arg0;
- }
- }
工程代码下载:点击下载