Android仿QQ主介面——-完善篇

在我前面的博文中，做出了仿QQ主介面的主要工作，博文地址：Android仿QQ主介面。

 

但是在那一篇中還有一個不起眼的地方沒做，今天就完善它。

 

今天要實現在文字下面來個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方法中：

         @Overridepublic 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(){@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {// TODO Auto-generated method stub((ViewPager)arg0).removeView((View)al.get(arg1));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn al.size();}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager)arg0).addView((View)al.get(arg1), 0);return (View)al.get(arg1);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0==arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}};        vp.setAdapter(pa);        vp.setCurrentItem(0);vp.setOnPageChangeListener(this);            }@Overridepublic 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;}}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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;}}

工程代碼下載：點擊下載