1. 程式人生 > >[置頂] 是男人就下100層【第三層】——高仿交通銀行手機客戶端介面

[置頂] 是男人就下100層【第三層】——高仿交通銀行手機客戶端介面

[置頂] 是男人就下100層【第三層】——高仿交通銀行手機客戶端介面

分類: Android開發 Android高仿系列 3459人閱讀 評論(26) 收藏 舉報 Android 高仿 實戰 ViewPager Scroller

目錄(?)[+]

  1. 前言
  2. 一演示效果
  3. 二輕輕的進入主介面
    1. 建立工程及包
    2. 閃屏介面
    3. 實現絢麗的左右滑動
  4. 三主介面整體佈局

前言:

從《是男人就下100層》系列博文的【第二層】發表完到現在已經整整三個月了,從前面的訪問量和評論來看很多朋友還是喜歡實戰類的博文的。畢竟我們都叫“攻城獅”,所以要看是否這個“攻城獅”合格,最終還是要看能不能“建造房子“而不是會畫房子,下面我們就從蓋雞窩開始吧!(插播一句廣告)很多尊敬老師和專家在總結了自己多年的開發經驗後為我們年輕的一輩留下了很多知識,使我們踏在他們的肩膀上行走(這句話聽起來怪怪的~~),在此向偉大的前輩們致敬!

一、演示效果

先看一下實際的效果吧(我相信這種直接貼圖的描述方式比文字描述更給力)

上面的效果如何?還可以吧!這個介面包括很多Android的基礎和自定義元件的知識,是從基礎向高階開發進階的好案例。接下來可不是直接貼程式碼哦,既然是交流我就要和廣大的Android學習及愛好者交流(所以考慮到基礎的參差不齊,我將一步一步的進行開發和解釋)

二、輕輕的進入主介面

1、建立工程及包

2、閃屏介面
新建一個SplashActivity並載入activity_splash.xml介面 SplashActivity.java [java]
view plain copy print ? 在CODE上檢視程式碼片 派生到我的程式碼片
  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{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_splash);
		
		new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				Intent intent = new 
						Intent(SplashActivity.this, MainActivity.class);
				startActivity(intent);
				finish();
			}
		}, 1000);
	}
}
activity_splash.xml
[html] view plain copy print ? 在CODE上檢視程式碼片 派生到我的程式碼片
  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 plain copy print ? 在CODE上檢視程式碼片 派生到我的程式碼片
  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), 00, mHeight);  
  38.         mMainView.layout(00, 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, 0500);  
  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, 0500);  
  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);
	}
	
	@Override
	protected 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);
	}
	
	@Override
	protected 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;
	@Override
	public 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;
	}
	
	@Override
	public 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 plain copy print ? 在CODE上檢視程式碼片 派生到我的程式碼片
  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;
	@Override
	protected 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 plain copy print ? 在CODE上檢視程式碼片 派生到我的程式碼片
  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=