高仿交通银行手机客户端界面

[置顶] 是男人就下100层【第三层】——高仿交通银行手机客户端界面

分类： Android开发 Android高仿系列 2014-06-12 22:52 3459人阅读 评论(26)收藏 举报

Android高仿实战ViewPagerScroller

目录(?)[+]

1. 前言
2. 一演示效果
3. 二轻轻的进入主界面
   1. 建立工程及包
   2. 闪屏界面
   3. 实现绚丽的左右滑动
4. 三主界面整体布局

前言：

从《是男人就下100层》系列博文的【第二层】发表完到现在已经整整三个月了，从前面的访问量和评论来看很多朋友还是喜欢实战类的博文的。毕竟我们都叫“攻城狮”，所以要看是否这个“攻城狮”合格，最终还是要看能不能“建造房子“而不是会画房子，下面我们就从盖鸡窝开始吧！（插播一句广告）很多尊敬老师和专家在总结了自己多年的开发经验后为我们年轻的一辈留下了很多知识，使我们踏在他们的肩膀上行走（这句话听起来怪怪的~~），在此向伟大的前辈们致敬！

一、演示效果

先看一下实际的效果吧（我相信这种直接贴图的描述方式比文字描述更给力）

上面的效果如何？还可以吧！这个界面包括很多Android的基础和自定义组件的知识，是从基础向高级开发进阶的好案例。接下来可不是直接贴代码哦，既然是交流我就要和广大的Android学习及爱好者交流（所以考虑到基础的参差不齐，我将一步一步的进行开发和解释）

二、轻轻的进入主界面

1、建立工程及包

2、闪屏界面

新建一个SplashActivity并加载activity_splash.xml界面

SplashActivity.java

[java] view plaincopyprint?

1. package com.example.jaohangui.activity;  
2.   
3. import android.app.Activity;  
4. import android.content.Intent;  
5. import android.os.Bundle;  
6. import android.os.Handler;  
7.   
8. import com.example.jaohangui.R;  
9.   
10. public class SplashActivity extends Activity{  
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.         setContentView(R.layout.activity_splash);  
15.           
16.         new Handler().postDelayed(new Runnable() {  
17.               
18.             @Override  
19.             public void run() {  
20.                 Intent intent = new   
21.                         Intent(SplashActivity.this, MainActivity.class);  
22.                 startActivity(intent);  
23.                 finish();  
24.             }  
25.         }, 1000);  
26.     }  
27. }  

package com.example.jaohangui.activity;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.Handler;import com.example.jaohangui.R;public class SplashActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_splash);new Handler().postDelayed(new Runnable() {@Overridepublic void run() {Intent intent = new Intent(SplashActivity.this, MainActivity.class);startActivity(intent);finish();}}, 1000);}}

activity_splash.xml

[html] view plaincopyprint?

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:orientation="vertical"   
6.     android:background="@drawable/splashscreenimage">  
7. </LinearLayout>  

<?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:orientation="vertical"     android:background="@drawable/splashscreenimage"></LinearLayout>

3、实现绚丽的左右滑动

首先自定义一个可以左右滑动的ViewGroup,关于该部分详细请看我的另外一篇博文：http://blog.csdn.net/dawanganban/article/details/24303563

在开始下面的工作之前，我们先来看一下Android系统中坐标的概念：

首先 ，我们必须明白在Android View视图是没有边界的，Canvas是没有边界的，只不过我们通过绘制特定的View时对 Canvas对象进行了一定的操作，例如 : translate(平移)、clipRect(剪切)等，以便达到我们的对该Canvas对象绘制的要求 ，我们可以将这种无边界的视图称为“视图坐标”-----它不受物理屏幕限制。通常我们所理解的一个Layout布局文件只是该视图的显示区域，超过了这个显示区域将不能显示到父视图的区域中 ，对应的，我们可以将这种有边界的视图称为“布局坐标”------ 父视图给子视图分配的布局(layout)大小。而且， 一个视图的在屏幕的起始坐标位于视图坐标起始处，如下图所示。

由于布局坐标只能显示特定的一块内容，所以我们只有移动布局坐标的坐标原点就可以将视图坐标的任何位置显示出来。

实现原理：在LinearLayout中添加三个View并在onLayout中设置三个View的布局，通过Scroller类来实现三个View的移动。

[java] view plaincopyprint?

1. package com.example.jaohangui.view;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.widget.LinearLayout;  
8. import android.widget.Scroller;  
9.   
10. public class MyScrollLeftRightView extends LinearLayout{  
11.   
12.     private Scroller mScroller;  
13.       
14.     private View mLeftView;  //坐标界面  
15.     private View mMainView;  //中间主界面  
16.     private View mRightView; //右边界面  
17.       
18.     private float mMeasureWight = 3.0f / 5; //菜单界面比例  
19.     private int mWidth;   
20.     private int mHeight;  
21.       
22.     private boolean isLocked = false;  
23.     private boolean isToLeft = false;  
24.     private static int CENTER_PAGE = 1;  
25.     private static int LEFT_PAGE = 0;  
26.     private static int RIGHT_PAGE = 2;  
27.     private int currentPage = CENTER_PAGE;  
28.       
29.     public MyScrollLeftRightView(Context context, AttributeSet attrs) {  
30.         super(context, attrs);  
31.         mScroller = new Scroller(context);  
32.     }  
33.       
34.     @Override  
35.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
36.         super.onLayout(changed, l, t, r, b);  
37.         mLeftView.layout(-(int)(mWidth * mMeasureWight), 0, 0, mHeight);  
38.         mMainView.layout(0, 0, mWidth, mHeight);  
39.         mRightView.layout(mWidth, 0, mWidth + (int)(mWidth * mMeasureWight), mHeight);  
40.     }  
41.       
42.     @Override  
43.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
44.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
45.         mWidth = MeasureSpec.getSize(widthMeasureSpec);  
46.         mHeight = MeasureSpec.getSize(heightMeasureSpec);  
47.     }  
48.       
49.     /** 
50.      * 添加左边界面内容 
51.      * @param view 
52.      */  
53.     public void setLeftView(View view){  
54.         mLeftView = view;  
55.         addView(mLeftView);  
56.     }  
57.       
58.     /** 
59.      * 添加主界面内容 
60.      * @param view 
61.      */  
62.     public void setMainView(View view){  
63.         mMainView = view;  
64.         addView(mMainView);  
65.     }  
66.       
67.     /** 
68.      * 添加右边界面内容 
69.      * @param view 
70.      */  
71.     public void setRightView(View view){  
72.         mRightView = view;  
73.         addView(mRightView);  
74.     }  
75.       
76.     private float mDownX;  
77.     @Override  
78.     public boolean onTouchEvent(MotionEvent event) {  
79.         float x = event.getX();  
80.         switch (event.getAction()) {  
81.         case MotionEvent.ACTION_DOWN:  
82.             mDownX = x;  
83.             break;  
84.         case MotionEvent.ACTION_UP:  
85.             int dis = (int)(x - mDownX); //滑动的距离  
86.             if(Math.abs(dis) > (mWidth * mMeasureWight / 3)){  
87.                 if(dis > 0){  
88.                     toRightMove();  
89.                 }else{  
90.                     toLeftMove();  
91.                 }  
92.             }  
93.             break;  
94.   
95.         default:  
96.             break;  
97.         }  
98.         return true;  
99.     }  
100.       
101.     @Override  
102.     public void computeScroll() {  
103.         super.computeScroll();  
104.         if(mScroller.computeScrollOffset()){  
105.             isLocked = true;  
106.             scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
107.             postInvalidate();  
108.         }else{  
109.             if(currentPage == CENTER_PAGE){  
110.                 if(isToLeft){  
111.                     currentPage = RIGHT_PAGE;  
112.                 }else{  
113.                     currentPage = LEFT_PAGE;  
114.                 }  
115.             }else{  
116.                 currentPage = CENTER_PAGE;  
117.             }  
118.             isLocked = false;  
119.         }  
120.     }  
121.       
122.     public void toRightMove(){  
123.         if(currentPage == LEFT_PAGE || isLocked){  
124.             return;  
125.         }  
126.         int dx = (int)(mWidth * mMeasureWight);  
127.         mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);  
128.         invalidate();  
129.         isToLeft = false;  
130.     }  
131.       
132.     public void toLeftMove(){  
133.         if(currentPage == RIGHT_PAGE || isLocked){  
134.             return;  
135.         }  
136.         System.out.println("ok");  
137.         int dx = (int)(mWidth * mMeasureWight);  
138.         mScroller.startScroll(getScrollX(), 0, dx, 0, 500);  
139.         invalidate();  
140.         isToLeft = true;  
141.     }  
142. }  

package com.example.jaohangui.view;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.widget.LinearLayout;import android.widget.Scroller;public class MyScrollLeftRightView extends LinearLayout{private Scroller mScroller;private View mLeftView;  //坐标界面private View mMainView;  //中间主界面private View mRightView; //右边界面private float mMeasureWight = 3.0f / 5; //菜单界面比例private int mWidth;private int mHeight;private boolean isLocked = false;private boolean isToLeft = false;private static int CENTER_PAGE = 1;private static int LEFT_PAGE = 0;private static int RIGHT_PAGE = 2;private int currentPage = CENTER_PAGE;public MyScrollLeftRightView(Context context, AttributeSet attrs) {super(context, attrs);mScroller = new Scroller(context);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);mLeftView.layout(-(int)(mWidth * mMeasureWight), 0, 0, mHeight);mMainView.layout(0, 0, mWidth, mHeight);mRightView.layout(mWidth, 0, mWidth + (int)(mWidth * mMeasureWight), mHeight);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);}/** * 添加左边界面内容 * @param view */public void setLeftView(View view){mLeftView = view;addView(mLeftView);}/** * 添加主界面内容 * @param view */public void setMainView(View view){mMainView = view;addView(mMainView);}/** * 添加右边界面内容 * @param view */public void setRightView(View view){mRightView = view;addView(mRightView);}private float mDownX;@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownX = x;break;case MotionEvent.ACTION_UP:int dis = (int)(x - mDownX); //滑动的距离if(Math.abs(dis) > (mWidth * mMeasureWight / 3)){if(dis > 0){toRightMove();}else{toLeftMove();}}break;default:break;}return true;}@Overridepublic void computeScroll() {super.computeScroll();if(mScroller.computeScrollOffset()){isLocked = true;scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}else{if(currentPage == CENTER_PAGE){if(isToLeft){currentPage = RIGHT_PAGE;}else{currentPage = LEFT_PAGE;}}else{currentPage = CENTER_PAGE;}isLocked = false;}}public void toRightMove(){if(currentPage == LEFT_PAGE || isLocked){return;}int dx = (int)(mWidth * mMeasureWight);mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);invalidate();isToLeft = false;}public void toLeftMove(){if(currentPage == RIGHT_PAGE || isLocked){return;}System.out.println("ok");int dx = (int)(mWidth * mMeasureWight);mScroller.startScroll(getScrollX(), 0, dx, 0, 500);invalidate();isToLeft = true;}}

然后在主Activity中添加左、中、右三个界面布局文件

[java] view plaincopyprint?

1. package com.example.jaohangui.activity;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6.   
7. import com.example.jaohangui.R;  
8. import com.example.jaohangui.view.MyScrollLeftRightView;  
9.   
10. public class MainActivity extends Activity {  
11.     private MyScrollLeftRightView mScrollView;  
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.           
17.         mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);  
18.         final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);  
19.         final View centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);  
20.         final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);  
21.         mScrollView.setLeftView(leftView);  
22.         mScrollView.setMainView(centerView);  
23.         mScrollView.setRightView(rightView);  
24.     }  
25. }  

package com.example.jaohangui.activity;import android.app.Activity;import android.os.Bundle;import android.view.View;import com.example.jaohangui.R;import com.example.jaohangui.view.MyScrollLeftRightView;public class MainActivity extends Activity {private MyScrollLeftRightView mScrollView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);final View centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);mScrollView.setLeftView(leftView);mScrollView.setMainView(centerView);mScrollView.setRightView(rightView);}}

交通银行的界面上左右两个界面的切换方式不是通过手势滑动，而是通过点击两个按钮（这个很好实现，将上面的onTouchEvent注释掉）在点击按钮的时候直接调用toRightMove()方法或toLeftMove()方法即可。界面的样子大致浮出水面了...为了方便大家一步步学习，我将这一部分源代码贴出：

上面工程源代码下载：http://download.csdn.net/detail/lxq_xsyu/7485441

三、主界面整体布局

我们添加主界面中的内容如下：

[html] view plaincopyprint?

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:orientation="vertical">  
6.     <LinearLayout   
7.         android:layout_width="match_parent"  
8.         android:layout_height="48dip"  
9.         android:orientation="horizontal"  
10.         android:background="@drawable/fjp_tb_8">  
11.         <Button   
12.             android:id="@+id/leftButton"  
13.             android:layout_width="40dip"  
14.             android:layout_height="38dip"  
15.             android:background="@drawable/title_set_up"  
16.             android:layout_marginLeft="10dip"  
17.             android:layout_gravity="center_vertical"  
18.             />  
19.         <TextView  
20.             android:layout_width="0dip"  
21.             android:layout_height="match_parent"  
22.             android:layout_weight="1"  
23.             android:layout_gravity="center"  
24.             android:gravity="center"  
25.             android:text="城市"  
26.             android:textSize="22sp"  
27.             android:textStyle="bold"/>  
28.         <Button   
29.             android:id="@+id/rightButton"  
30.             android:layout_width="40dip"  
31.             android:layout_height="38dip"  
32.             android:layout_marginRight="10dip"  
33.             android:background="@drawable/title_right"  
34.             android:layout_gravity="center_vertical"/>  
35.     </LinearLayout>  
36.     <ImageView   
37.         android:layout_width="match_parent"  
38.         android:layout_height="120dip"  
39.         android:background="@drawable/xinshijiebaihuo"/>  
40.     <LinearLayout  
41.         android:id="@+id/tab_ll1"  
42.         android:layout_width="fill_parent"  
43.         android:layout_height="48.0dip"  
44.         android:orientation="horizontal">  
45.         <TextView  
46.             android:id="@+id/text1"  
47.             android:layout_width="0dip"  
48.             android:layout_height="wrap_content"  
49.             android:layout_weight="1"  
50.             android:text="我的首页"  
51.             android:background="@drawable/menu_tab_center_over"  
52.             style="@style/main_tab_tv_style"/>  
53.         <TextView  
54.             android:id="@+id/text2"  
55.             android:layout_width="0dip"  
56.             android:layout_height="wrap_content"  
57.             android:layout_weight="1"  
58.             android:text="生活服务"  
59.             android:background="@drawable/menu_tab_left"  
60.             style="@style/main_tab_tv_style"/>  
61.         <TextView  
62.             android:id="@+id/text3"  
63.             android:layout_width="0dip"  
64.             android:layout_height="wrap_content"  
65.             android:layout_weight="1"  
66.             android:text="金融服务"  
67.             android:background="@drawable/menu_tab_left"  
68.             style="@style/main_tab_tv_style"/>  
69.        <TextView  
70.             android:id="@+id/text4"  
71.             android:layout_width="0dip"  
72.             android:layout_height="wrap_content"  
73.             android:layout_weight="1"  
74.             android:text="投资理财"  
75.             android:background="@drawable/menu_tab_left"  
76.             style="@style/main_tab_tv_style"/>  
77.     </LinearLayout>  
78.     <android.support.v4.view.ViewPager  
79.             android:id="@+id/vPager"  
80.             android:layout_width="wrap_content"  
81.             android:layout_height="wrap_content"  
82.             android:flipInterval="30"  
83.             android:background="#EEEDED"  
84.             android:persistentDrawingCache="animation"/>       
85. </LinearLayout>  

<?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:orientation="vertical"><LinearLayout     android:layout_width="match_parent"    android:layout_height="48dip"    android:orientation="horizontal"    android:background="@drawable/fjp_tb_8">    <Button         android:id="@+id/leftButton"        android:layout_width="40dip"        android:layout_height="38dip"        android:background="@drawable/title_set_up"        android:layout_marginLeft="10dip"        android:layout_gravity="center_vertical"        />    <TextView        android:layout_width="0dip"        android:layout_height="match_parent"        android:layout_weight="1"        android:layout_gravity="center"        android:gravity="center"        android:text="城市"        android:textSize="22sp"        android:textStyle="bold"/>    <Button         android:id="@+id/rightButton"        android:layout_width="40dip"        android:layout_height="38dip"        android:layout_marginRight="10dip"        android:background="@drawable/title_right"        android:layout_gravity="center_vertical"/></LinearLayout><ImageView     android:layout_width="match_parent"    android:layout_height="120dip"    android:background="@drawable/xinshijiebaihuo"/> <LinearLayout        android:id="@+id/tab_ll1"        android:layout_width="fill_parent"        android:layout_height="48.0dip"        android:orientation="horizontal">        <TextView            android:id="@+id/text1"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="我的首页"            android:background="@drawable/menu_tab_center_over"style="@style/main_tab_tv_style"/>    <TextView            android:id="@+id/text2"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="生活服务"            android:background="@drawable/menu_tab_left"style="@style/main_tab_tv_style"/>    <TextView            android:id="@+id/text3"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="金融服务"            android:background="@drawable/menu_tab_left"style="@style/main_tab_tv_style"/>   <TextView            android:id="@+id/text4"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="投资理财"            android:background="@drawable/menu_tab_left"style="@style/main_tab_tv_style"/></LinearLayout><android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:flipInterval="30"        android:background="#EEEDED"        android:persistentDrawingCache="animation"/></LinearLayout>

在上面的布局文件中可以看到ViewPager组件，ViewPager是Android3.0以上提供的新组建，它能够实现类似微信5.0中的菜单联动滑动效果以及导航引导界面等。

为了支持Android3.0以下版本的手机，Google为我们提供了一个支持包：android.support.v4.view，当然这个支持包不仅仅包括ViewPager，包中的接口和类如下：

ViewPager的适配器是PagerAdapter,要实现PagerAdapter要实现以下方法：

（1）instantiateItem(ViewGroup, int) //添加

（2）destroyItem(ViewGroup, int, Object)     //删除

（3）getCount()

（4）isViewFromObject(View, Object)

[java] view plaincopyprint?

1. package com.example.jaohangui.activity;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.app.Activity;  
7. import android.graphics.Color;  
8. import android.os.Bundle;  
9. import android.support.v4.view.PagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
12. import android.view.LayoutInflater;  
13. import android.view.View;  
14. import android.view.View.OnClickListener;  
15. import android.view.ViewGroup;  
16. import android.widget.Button;  
17. import android.widget.TextView;  
18.   
19. import com.example.jaohangui.R;  
20. import com.example.jaohangui.view.MyScrollLeftRightView;  
21.   
22. public class MainActivity extends Activity {  
23.     private MyScrollLeftRightView mScrollView;  
24.     private ViewPager viewPager;//页卡内容  
25.     private List<View> views;// Tab页面列表  
26.     private View centerView;  
27.       
28.     private TextView mTextTitle1;  
29.     private TextView mTextTitle2;  
30.     private TextView mTextTitle3;  
31.     private TextView mTextTitle4;  
32.       
33.     private View view1;  
34.     private View view2;  
35.     private View view3;  
36.     private View view4;  
37.       
38.     @Override  
39.     protected void onCreate(Bundle savedInstanceState) {  
40.         super.onCreate(savedInstanceState);  
41.         setContentView(R.layout.activity_main);  
42.           
43.         mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);  
44.         final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);  
45.         centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);  
46.         final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);  
47.         mScrollView.setLeftView(leftView);  
48.         mScrollView.setMainView(centerView);  
49.         InitCenterView();  
50.         mScrollView.setRightView(rightView);  
51.           
52.     }  
53.       
54.     private void InitCenterView() {  
55.         viewPager=(ViewPager) centerView.findViewById(R.id.vPager);  
56.         mTextTitle1 = (TextView) centerView.findViewById(R.id.text1);  
57.         mTextTitle2 = (TextView) centerView.findViewById(R.id.text2);  
58.         mTextTitle3 = (TextView) centerView.findViewById(R.id.text3);  
59.         mTextTitle4 = (TextView) centerView.findViewById(R.id.text4);  
60.         mTextTitle1.setOnClickListener(new MyOnClickListener(0));  
61.         mTextTitle2.setOnClickListener(new MyOnClickListener(1));  
62.         mTextTitle3.setOnClickListener(new MyOnClickListener(2));  
63.         mTextTitle4.setOnClickListener(new MyOnClickListener(3));  
64.         Button leftButton = (Button) centerView.findViewById(R.id.leftButton);  
65.         Button rightButton = (Button) centerView.findViewById(R.id.rightButton);  
66.         leftButton.setOnClickListener(new OnClickListener() {  
67.               
68.             @Override  
69.             public void onClick(View arg0) {  
70.                   
71.                 if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){  
72.                     mScrollView.toRightMove();  
73.                 }else{  
74.                     mScrollView.toLeftMove();  
75.                 }  
76.             }  
77.         });  
78.         rightButton.setOnClickListener(new OnClickListener() {  
79.               
80.             @Override  
81.             public void onClick(View arg0) {  
82.                 if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){  
83.                     mScrollView.toLeftMove();  
84.                 }else{  
85.                     mScrollView.toRightMove();  
86.                 }  
87.             }  
88.         });  
89.         views=new ArrayList<View>();  
90.         LayoutInflater inflater=getLayoutInflater();  
91.         view1 = inflater.inflate(R.layout.main_tab_layout_0, null);  
92.         view2 = inflater.inflate(R.layout.main_tab_layout_1, null);  
93.         view3 = inflater.inflate(R.layout.main_tab_layout_2, null);  
94.         view4 = inflater.inflate(R.layout.main_tab_layout_3, null);  
95.   
96.         views.add(view1);  
97.         views.add(view2);  
98.         views.add(view3);  
99.         views.add(view4);  
100.           
101.         viewPager.setAdapter(new MyViewPagerAdapter(views));  
102.         viewPager.setCurrentItem(0);  
103.         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
104.     }  
105.       
106.     public class MyViewPagerAdapter extends PagerAdapter{  
107.         private List<View> mListViews;  
108.           
109.         public MyViewPagerAdapter(List<View> mListViews) {  
110.             this.mListViews = mListViews;  
111.         }  
112.   
113.         @Override  
114.         public void destroyItem(ViewGroup container, int position, Object object)   {     
115.             container.removeView(mListViews.get(position));  
116.         }  
117.   
118.   
119.         @Override  
120.         public Object instantiateItem(ViewGroup container, int position) {            
121.              container.addView(mListViews.get(position), 0);  
122.              return mListViews.get(position);  
123.         }  
124.   
125.         @Override  
126.         public int getCount() {           
127.             return  mListViews.size();  
128.         }  
129.           
130.         @Override  
131.         public boolean isViewFromObject(View arg0, Object arg1) {             
132.             return arg0==arg1;  
133.         }  
134.     }  
135.       
136.      private class MyOnClickListener implements OnClickListener{    
137.             private int index=0;    
138.             public MyOnClickListener(int i){    
139.                 index=i;    
140.             }    
141.             public void onClick(View v) {    
142.                 System.out.println("clike = " + index);  
143.                 viewPager.setCurrentItem(index);                
144.             }    
145.     }    
146.       
147.    public class MyOnPageChangeListener implements OnPageChangeListener{  
148.         public void onPageScrollStateChanged(int arg0) {  
149.   
150.         }  
151.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
152.   
153.         }  
154.         public void onPageSelected(int arg0){  
155.             System.out.println("changeTabState = " + arg0);  
156.             changeTabState(arg0);  
157.         }  
158.     }  
159.           
160.     private void changeTabState(int index){  
161.         switch (index) {  
162.         case 0:  
163.             mTextTitle1.setTextColor(Color.rgb(27, 158, 233));  
164.             mTextTitle2.setTextColor(Color.rgb(0, 0, 0));  
165.             mTextTitle3.setTextColor(Color.rgb(0, 0, 0));  
166.             mTextTitle4.setTextColor(Color.rgb(0, 0, 0));  
167.             mTextTitle1.setBackgroundResource(R.drawable.menu_tab_center_over);  
168.             mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);  
169.             mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);  
170.             mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);  
171.             break;  
172.         case 1:  
173.             mTextTitle1.setTextColor(Color.rgb(0, 0, 0));  
174.             mTextTitle2.setTextColor(Color.rgb(27, 158, 233));  
175.             mTextTitle3.setTextColor(Color.rgb(0, 0, 0));  
176.             mTextTitle4.setTextColor(Color.rgb(0, 0, 0));  
177.             mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);  
178.             mTextTitle2.setBackgroundResource(R.drawable.menu_tab_center_over);  
179.             mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);  
180.             mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);  
181.             break;  
182.         case 2:  
183.             mTextTitle1.setTextColor(Color.rgb(0, 0, 0));  
184.             mTextTitle2.setTextColor(Color.rgb(0, 0, 0));  
185.             mTextTitle3.setTextColor(Color.rgb(27, 158, 233));  
186.             mTextTitle4.setTextColor(Color.rgb(0, 0, 0));  
187.             mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);  
188.             mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);  
189.             mTextTitle3.setBackgroundResource(R.drawable.menu_tab_center_over);  
190.             mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);  
191.             break;  
192.         case 3:  
193.             mTextTitle1.setTextColor(Color.rgb(0, 0, 0));  
194.             mTextTitle2.setTextColor(Color.rgb(0, 0, 0));  
195.             mTextTitle3.setTextColor(Color.rgb(0, 0, 0));  
196.             mTextTitle4.setTextColor(Color.rgb(27, 158, 233));  
197.             mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);  
198.             mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);  
199.             mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);  
200.             mTextTitle4.setBackgroundResource(R.drawable.menu_tab_center_over);  
201.             break;  
202.   
203.         default:  
204.             break;  
205.         }  
206.     }   
207.          
208. }  

package com.example.jaohangui.activity;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;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.view.ViewGroup;import android.widget.Button;import android.widget.TextView;import com.example.jaohangui.R;import com.example.jaohangui.view.MyScrollLeftRightView;public class MainActivity extends Activity {private MyScrollLeftRightView mScrollView;private ViewPager viewPager;//页卡内容private List<View> views;// Tab页面列表private View centerView;private TextView mTextTitle1;private TextView mTextTitle2;private TextView mTextTitle3;private TextView mTextTitle4;private View view1;private View view2;private View view3;private View view4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);mScrollView.setLeftView(leftView);mScrollView.setMainView(centerView);InitCenterView();mScrollView.setRightView(rightView);}private void InitCenterView() {viewPager=(ViewPager) centerView.findViewById(R.id.vPager);mTextTitle1 = (TextView) centerView.findViewById(R.id.text1);mTextTitle2 = (TextView) centerView.findViewById(R.id.text2);mTextTitle3 = (TextView) centerView.findViewById(R.id.text3);mTextTitle4 = (TextView) centerView.findViewById(R.id.text4);mTextTitle1.setOnClickListener(new MyOnClickListener(0));mTextTitle2.setOnClickListener(new MyOnClickListener(1));mTextTitle3.setOnClickListener(new MyOnClickListener(2));mTextTitle4.setOnClickListener(new MyOnClickListener(3));Button leftButton = (Button) centerView.findViewById(R.id.leftButton);Button rightButton = (Button) centerView.findViewById(R.id.rightButton);leftButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){mScrollView.toRightMove();}else{mScrollView.toLeftMove();}}});rightButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){mScrollView.toLeftMove();}else{mScrollView.toRightMove();}}});views=new ArrayList<View>();LayoutInflater inflater=getLayoutInflater();view1 = inflater.inflate(R.layout.main_tab_layout_0, null);view2 = inflater.inflate(R.layout.main_tab_layout_1, null);view3 = inflater.inflate(R.layout.main_tab_layout_2, null);view4 = inflater.inflate(R.layout.main_tab_layout_3, null);views.add(view1);views.add(view2);views.add(view3);views.add(view4);viewPager.setAdapter(new MyViewPagerAdapter(views));viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}public class MyViewPagerAdapter extends PagerAdapter{private List<View> mListViews;public MyViewPagerAdapter(List<View> mListViews) {this.mListViews = mListViews;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) { container.addView(mListViews.get(position), 0); return mListViews.get(position);}@Overridepublic int getCount() {return  mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}} private class MyOnClickListener implements OnClickListener{          private int index=0;          public MyOnClickListener(int i){              index=i;          }          public void onClick(View v) {          System.out.println("clike = " + index);            viewPager.setCurrentItem(index);                      }  }     public class MyOnPageChangeListener implements OnPageChangeListener{public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageSelected(int arg0){System.out.println("changeTabState = " + arg0);changeTabState(arg0);}    }private void changeTabState(int index){switch (index) {case 0:mTextTitle1.setTextColor(Color.rgb(27, 158, 233));mTextTitle2.setTextColor(Color.rgb(0, 0, 0));mTextTitle3.setTextColor(Color.rgb(0, 0, 0));mTextTitle4.setTextColor(Color.rgb(0, 0, 0));mTextTitle1.setBackgroundResource(R.drawable.menu_tab_center_over);mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);break;case 1:mTextTitle1.setTextColor(Color.rgb(0, 0, 0));mTextTitle2.setTextColor(Color.rgb(27, 158, 233));mTextTitle3.setTextColor(Color.rgb(0, 0, 0));mTextTitle4.setTextColor(Color.rgb(0, 0, 0));mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle2.setBackgroundResource(R.drawable.menu_tab_center_over);mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);break;case 2:mTextTitle1.setTextColor(Color.rgb(0, 0, 0));mTextTitle2.setTextColor(Color.rgb(0, 0, 0));mTextTitle3.setTextColor(Color.rgb(27, 158, 233));mTextTitle4.setTextColor(Color.rgb(0, 0, 0));mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle3.setBackgroundResource(R.drawable.menu_tab_center_over);mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);break;case 3:mTextTitle1.setTextColor(Color.rgb(0, 0, 0));mTextTitle2.setTextColor(Color.rgb(0, 0, 0));mTextTitle3.setTextColor(Color.rgb(0, 0, 0));mTextTitle4.setTextColor(Color.rgb(27, 158, 233));mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);mTextTitle4.setBackgroundResource(R.drawable.menu_tab_center_over);break;default:break;}}    }

实现效果如下：

如果ViewPager要实现和微信上部一样的滑动联动效果，可以参考我的另外一篇博文：http://blog.csdn.net/dawanganban/article/details/25773891

当然我们的目的肯定不是盖鸡窝，去建造一个坚固（健壮）的“猪圈”才对得起我们“攻城狮”这个称呼吧，至于如何才能建成，期待下一篇吧....，建造一个东西所用的基本材料大致相同，但是具体的建造过程却千差万别，所以以上只是将个人的建造方式拿出来献献丑，期待前辈和同行的指导，我们努力早日共同建造好我们期待的“猪圈”吧，呵呵。

另外“阳光小强”本篇博文很荣幸的参加了博客大赛，如果您觉得对您有帮助，请支持小强吧，投票地址：http://vote.blog.csdn.net/Article/Details?articleid=30101091