Android仿QQ主介面

文章目錄

• 1.首先使用Google的附加庫
• 2.XML布局檔案
• 3.主Activity中的代碼

Android版的QQ使用的是ViewPager實現的，主要是可以實現TabHost的介面，但功能比Tabhost更好，因為可以實現用手滑動實現介面的切換。QQ的如下

：

 

 

 

 

 

 

下面我來實現這個效果

工程下載：點擊下載

1.首先使用Google的附加庫

android-support-v4.jar，這個庫，點擊下載。

2.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="#FFFFFF" >        <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>    <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>

這個布局一點都不難。

下面是ViewPager中顯示的View，是XML布局，我只貼出一個的布局，一共有三個

<?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="#FF0000"    android:orientation="vertical" >    </LinearLayout>

另外兩個分別是綠色和藍色。

3.主Activity中的代碼

TextView tv1,tv2,tv3;
 ViewPager vp;
 ArrayList al;

這是Activity的成員變數，三個TextView分別是上面的標籤，vp是ViewPager，al儲存ViewPager中的布局View。

下面是全部的代碼

package com.zhycheng.viewpagerwork;import java.util.ArrayList;import android.app.Activity;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.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {TextView tv1,tv2,tv3;ViewPager vp;ArrayList al;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        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) {if(v.getId()==R.id.textView1){vp.setCurrentItem(0);}if(v.getId()==R.id.textView2){vp.setCurrentItem(1);}if(v.getId()==R.id.textView3){vp.setCurrentItem(2);}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}}

OnPageChangeListener中的幾個方法是ViewPager的View發生改變是的監聽，在這幾個方法中可以處理ViewPager的事件。下面是啟動並執行效果：

做的還是非常的像的，其實在ViewPager的View發聲改變的時候我們可以改變標題的字型大小和顏色，這個很容易實現的。就在監聽器裡實現。對了，QQ的介面在標題和ViewPager之間有一個ImageView，在切換ViewPager的內容的時候有動畫效果，這個我沒有做。要是做其實也不難，因為現在在我的需求你這個沒有必要。一切以需求為準。