Android仿QQ主界面

 

From:http://blog.csdn.net/zhy_cheng/article/details/8119933

Android版的QQ使用的是ViewPager实现的，主要是可以实现TabHost的界面，但功能比Tabhost更好，因为可以实现用手滑动实现界面的切换。QQ的截图如下:

 

 

 

下面我来实现这个效果

工程下载：点击下载

1.首先使用Google的附加库

android-support-v4.jar，这个库，点击下载。

2.XML布局文件

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <LinearLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"  
10.         android:background="#FFFFFF" >  
11.   
12.         <TextView  
13.             android:id="@+id/textView1"  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_weight="1"  
17.             android:gravity="center"  
18.             android:text="试题"  
19.             android:textSize="25sp" />  
20.   
21.         <TextView  
22.             android:id="@+id/textView2"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content"  
25.             android:layout_weight="1"  
26.             android:gravity="center"  
27.             android:text="原文"  
28.             android:textSize="25sp" />  
29.   
30.         <TextView  
31.             android:id="@+id/textView3"  
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content"  
34.             android:layout_weight="1"  
35.             android:gravity="center"  
36.             android:text="解答"  
37.             android:textSize="25sp" />  
38.     </LinearLayout>  
39.   
40.     <android.support.v4.view.ViewPager  
41.         android:id="@+id/viewpager"  
42.         android:layout_width="wrap_content"  
43.         android:layout_height="wrap_content"  
44.         android:layout_gravity="center"  
45.         android:layout_weight="1"  
46.         android:background="#FF0000" />  
47.   
48. </LinearLayout>  

这个布局一点都不难。

下面是ViewPager中显示的View，是XML布局，我只贴出一个的布局，一共有三个

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#FF0000"  
6.     android:orientation="vertical" >  
7.       
8.   
9. </LinearLayout>  

另外两个分别是绿色和蓝色。

3.主Activity中的代码

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

这是Activity的成员变量，三个TextView分别是上面的标签，vp是ViewPager，al保存ViewPager中的布局View。

下面是全部的代码

[java] view plain copy

1. package com.zhycheng.viewpagerwork;  
2.   
3. import java.util.ArrayList;  
4.   
5.   
6.   
7. import android.app.Activity;  
8. import android.os.Bundle;  
9. import android.os.Parcelable;  
10. import android.support.v4.view.PagerAdapter;  
11. import android.support.v4.view.ViewPager;  
12. import android.support.v4.view.ViewPager.OnPageChangeListener;  
13. import android.view.LayoutInflater;  
14. import android.view.View;  
15. import android.view.View.OnClickListener;  
16. import android.widget.TextView;  
17.   
18. public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {  
19.     TextView tv1,tv2,tv3;  
20.     ViewPager vp;  
21.     ArrayList al;  
22.     @Override  
23.     public void onCreate(Bundle savedInstanceState) {  
24.         super.onCreate(savedInstanceState);  
25.         setContentView(R.layout.main);  
26.         tv1=(TextView) findViewById(R.id.textView1);  
27.         tv2=(TextView) findViewById(R.id.textView2);  
28.         tv3=(TextView) findViewById(R.id.textView3);  
29.         vp=(ViewPager) findViewById(R.id.viewpager);  
30.         tv1.setOnClickListener(this);  
31.         tv2.setOnClickListener(this);  
32.         tv3.setOnClickListener(this);  
33.         al=new ArrayList();  
34.         LayoutInflater li=LayoutInflater.from(this);  
35.         al.add(li.inflate(R.layout.zyc1, null));  
36.         al.add(li.inflate(R.layout.zyc2, null));  
37.         al.add(li.inflate(R.layout.zyc3, null));  
38.         PagerAdapter pa=new PagerAdapter(){  
39.   
40.             @Override  
41.             public void destroyItem(View arg0, int arg1, Object arg2) {  
42.                 // TODO Auto-generated method stub  
43.                 ((ViewPager)arg0).removeView((View)al.get(arg1));  
44.                   
45.             }  
46.   
47.             @Override  
48.             public void finishUpdate(View arg0) {  
49.                 // TODO Auto-generated method stub  
50.                   
51.             }  
52.   
53.             @Override  
54.             public int getCount() {  
55.                 // TODO Auto-generated method stub  
56.                 return al.size();  
57.             }  
58.   
59.             @Override  
60.             public Object instantiateItem(View arg0, int arg1) {  
61.                 ((ViewPager)arg0).addView((View)al.get(arg1), 0);  
62.                 return (View)al.get(arg1);  
63.             }  
64.   
65.             @Override  
66.             public boolean isViewFromObject(View arg0, Object arg1) {  
67.                 // TODO Auto-generated method stub  
68.                 return arg0==arg1;  
69.             }  
70.   
71.             @Override  
72.             public void restoreState(Parcelable arg0, ClassLoader arg1) {  
73.                 // TODO Auto-generated method stub  
74.                   
75.             }  
76.   
77.             @Override  
78.             public Parcelable saveState() {  
79.                 // TODO Auto-generated method stub  
80.                 return null;  
81.             }  
82.   
83.             @Override  
84.             public void startUpdate(View arg0) {  
85.                 // TODO Auto-generated method stub  
86.                   
87.             }};  
88.         vp.setAdapter(pa);  
89.         vp.setCurrentItem(0);  
90.         vp.setOnPageChangeListener(this);  
91.           
92.     }  
93.     @Override  
94.     public void onClick(View v) {  
95.           
96.         if(v.getId()==R.id.textView1)  
97.         {  
98.             vp.setCurrentItem(0);  
99.         }  
100.         if(v.getId()==R.id.textView2)  
101.         {  
102.             vp.setCurrentItem(1);  
103.         }  
104.         if(v.getId()==R.id.textView3)  
105.         {  
106.             vp.setCurrentItem(2);  
107.         }  
108.           
109.           
110.     }  
111.     @Override  
112.     public void onPageScrollStateChanged(int arg0) {  
113.         // TODO Auto-generated method stub  
114.           
115.     }  
116.     @Override  
117.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
118.         // TODO Auto-generated method stub  
119.           
120.     }  
121.     @Override  
122.     public void onPageSelected(int arg0) {  
123.         // TODO Auto-generated method stub  
124.           
125.     }  
126. }  

OnPageChangeListener中的几个方法是ViewPager的View发生改变是的监听，在这几个方法中可以处理ViewPager的事件。下面是运行的效果：

做的还是非常的像的，其实在ViewPager的View发声改变的时候我们可以改变标题的字体大小和颜色，这个很容易实现的。就在监听器里实现。对了，QQ的界面在标题和ViewPager之间有一个ImageView，在切换ViewPager的内容的时候有动画效果，这个我没有做。要是做其实也不难，因为现在在我的需求你这个没有必要。一切以需求为准。