前言：

從《男性在下一100層》系列博文【二樓】現在出版了整整三個月后，。從上述觀點和這么多朋友的意見還是比較喜歡真實類的博文。

畢竟我們都叫“攻城獅”。所以要看是否這個“攻城獅”合格，終于還是要看能不能“建造房子“而不是會畫房子，以下我們就從蓋雞窩開始吧！（插播一句廣告）非常多尊敬老師和專家在總結了自己多年的開發經驗后為我們年輕的一輩留下了非常多知識。使我們踏在他們的肩膀上行走（這句話聽起來怪怪的~~），在此向偉大的前輩們致敬！

一、演示效果

先看一下實際的效果吧（我相信這樣的直接貼圖的描寫敘述方式比文字描寫敘述更給力）

上面的效果怎樣？還能夠吧！

這個界面包含非常多Android的基礎和自己定義組件的知識。是從基礎向高級開發進階的好案例。

接下來可不是直接貼代碼哦，既然是交流我就要和廣大的Android學習及愛好者交流（所以考慮到基礎的參差不齊，我將一步一步的進行開發和解釋）

二、輕輕的進入主界面

1、建立project及包

2、閃屏界面

新建一個SplashActivity并載入activity_splash.xml界面SplashActivity.javapackage 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
<?

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的移動。

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中加入左、中、右三個界面布局文件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);} } 交通銀行的界面上左右兩個界面的切換方式不是通過手勢滑動，而是通過點擊兩個button（這個非常好實現。將上面的onTouchEvent凝視掉）在點擊button的時候直接調用toRightMove()方法或toLeftMove()方法就可以。

界面的樣子大致浮出水面了...為了方便大家一步步學習。我將這一部分源碼貼出：

上面project源碼下載：http://download.csdn.net/detail/lxq_xsyu/7485441

三、主界面總體布局

我們加入主界面中的內容例如以下：
<?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"/><TextViewandroid: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"/><LinearLayoutandroid:id="@+id/tab_ll1"android:layout_width="fill_parent"android:layout_height="48.0dip"android:orientation="horizontal"><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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.ViewPagerandroid: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)

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

版權聲明：本文博客原創文章。博客，未經同意，不得轉載。

轉載于:https://www.cnblogs.com/hrhguanli/p/4728558.html

總結

以上是生活随笔為你收集整理的男性在下一100层【第三层】——高仿手机银行client接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。