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

一、演示效果

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

高仿交通银行手机客户端界面_第1张图片

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

二、轻轻的进入主界面

1、建立工程及包
高仿交通银行手机客户端界面_第2张图片
2、闪屏界面
新建一个SplashActivity并加载activity_splash.xml界面
SplashActivity.java
[java] view plain copy print ?
  1. package com.example.jaohangui.activity;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.os.Handler;
  6. import com.example.jaohangui.R;
  7. public class SplashActivity extends Activity{
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_splash);
  12. new Handler().postDelayed(new Runnable() {
  13. @Override
  14. public void run() {
  15. Intent intent = new
  16. Intent(SplashActivity.this, MainActivity.class);
  17. startActivity(intent);
  18. finish();
  19. }
  20. }, 1000);
  21. }
  22. }
activity_splash.xml
[html] view plain copy print ?
  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>
3、实现绚丽的左右滑动
首先自定义一个可以左右滑动的ViewGroup,关于该部分详细请看我的另外一篇博文:http://blog.csdn.net/dawanganban/article/details/24303563
高仿交通银行手机客户端界面_第3张图片
在开始下面的工作之前,我们先来看一下Android系统中坐标的概念:
首先 ,我们必须明白在Android View视图是没有边界的,Canvas是没有边界的,只不过我们通过绘制特定的View时对 Canvas对象进行了一定的操作,例如 : translate(平移)、clipRect(剪切)等,以便达到我们的对该Canvas对象绘制的要求 ,我们可以将这种无边界的视图称为“视图坐标”-----它不受物理屏幕限制。通常我们所理解的一个Layout布局文件只是该视图的显示区域,超过了这个显示区域将不能显示到父视图的区域中 ,对应的,我们可以将这种有边界的视图称为“布局坐标”------ 父视图给子视图分配的布局(layout)大小。而且, 一个视图的在屏幕的起始坐标位于视图坐标起始处,如下图所示。
高仿交通银行手机客户端界面_第4张图片
由于布局坐标只能显示特定的一块内容,所以我们只有移动布局坐标的坐标原点就可以将视图坐标的任何位置显示出来。
实现原理:在LinearLayout中添加三个View并在onLayout中设置三个View的布局,通过Scroller类来实现三个View的移动。
[java] view plain copy print ?
  1. package com.example.jaohangui.view;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.widget.LinearLayout;
  7. import android.widget.Scroller;
  8. public class MyScrollLeftRightView extends LinearLayout{
  9. private Scroller mScroller;
  10. private View mLeftView; //坐标界面
  11. private View mMainView; //中间主界面
  12. private View mRightView; //右边界面
  13. private float mMeasureWight = 3.0f / 5; //菜单界面比例
  14. private int mWidth;
  15. private int mHeight;
  16. private boolean isLocked = false;
  17. private boolean isToLeft = false;
  18. private static int CENTER_PAGE = 1;
  19. private static int LEFT_PAGE = 0;
  20. private static int RIGHT_PAGE = 2;
  21. private int currentPage = CENTER_PAGE;
  22. public MyScrollLeftRightView(Context context, AttributeSet attrs) {
  23. super(context, attrs);
  24. mScroller = new Scroller(context);
  25. }
  26. @Override
  27. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  28. super.onLayout(changed, l, t, r, b);
  29. mLeftView.layout(-(int)(mWidth * mMeasureWight), 0, 0, mHeight);
  30. mMainView.layout(0, 0, mWidth, mHeight);
  31. mRightView.layout(mWidth, 0, mWidth + (int)(mWidth * mMeasureWight), mHeight);
  32. }
  33. @Override
  34. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  35. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  36. mWidth = MeasureSpec.getSize(widthMeasureSpec);
  37. mHeight = MeasureSpec.getSize(heightMeasureSpec);
  38. }
  39. /**
  40. * 添加左边界面内容
  41. * @param view
  42. */
  43. public void setLeftView(View view){
  44. mLeftView = view;
  45. addView(mLeftView);
  46. }
  47. /**
  48. * 添加主界面内容
  49. * @param view
  50. */
  51. public void setMainView(View view){
  52. mMainView = view;
  53. addView(mMainView);
  54. }
  55. /**
  56. * 添加右边界面内容
  57. * @param view
  58. */
  59. public void setRightView(View view){
  60. mRightView = view;
  61. addView(mRightView);
  62. }
  63. private float mDownX;
  64. @Override
  65. public boolean onTouchEvent(MotionEvent event) {
  66. float x = event.getX();
  67. switch (event.getAction()) {
  68. case MotionEvent.ACTION_DOWN:
  69. mDownX = x;
  70. break;
  71. case MotionEvent.ACTION_UP:
  72. int dis = (int)(x - mDownX); //滑动的距离
  73. if(Math.abs(dis) > (mWidth * mMeasureWight / 3)){
  74. if(dis > 0){
  75. toRightMove();
  76. }else{
  77. toLeftMove();
  78. }
  79. }
  80. break;
  81. default:
  82. break;
  83. }
  84. return true;
  85. }
  86. @Override
  87. public void computeScroll() {
  88. super.computeScroll();
  89. if(mScroller.computeScrollOffset()){
  90. isLocked = true;
  91. scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
  92. postInvalidate();
  93. }else{
  94. if(currentPage == CENTER_PAGE){
  95. if(isToLeft){
  96. currentPage = RIGHT_PAGE;
  97. }else{
  98. currentPage = LEFT_PAGE;
  99. }
  100. }else{
  101. currentPage = CENTER_PAGE;
  102. }
  103. isLocked = false;
  104. }
  105. }
  106. public void toRightMove(){
  107. if(currentPage == LEFT_PAGE || isLocked){
  108. return;
  109. }
  110. int dx = (int)(mWidth * mMeasureWight);
  111. mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);
  112. invalidate();
  113. isToLeft = false;
  114. }
  115. public void toLeftMove(){
  116. if(currentPage == RIGHT_PAGE || isLocked){
  117. return;
  118. }
  119. System.out.println("ok");
  120. int dx = (int)(mWidth * mMeasureWight);
  121. mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
  122. invalidate();
  123. isToLeft = true;
  124. }
  125. }
然后在主Activity中添加左、中、右三个界面布局文件
[java] view plain copy print ?
  1. package com.example.jaohangui.activity;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import com.example.jaohangui.R;
  6. import com.example.jaohangui.view.MyScrollLeftRightView;
  7. public class MainActivity extends Activity {
  8. private MyScrollLeftRightView mScrollView;
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. setContentView(R.layout.activity_main);
  13. mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);
  14. final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);
  15. final View centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);
  16. final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);
  17. mScrollView.setLeftView(leftView);
  18. mScrollView.setMainView(centerView);
  19. mScrollView.setRightView(rightView);
  20. }
  21. }
交通银行的界面上左右两个界面的切换方式不是通过手势滑动,而是通过点击两个按钮(这个很好实现,将上面的onTouchEvent注释掉)在点击按钮的时候直接调用toRightMove()方法或toLeftMove()方法即可。界面的样子大致浮出水面了...为了方便大家一步步学习,我将这一部分源代码贴出:
上面工程源代码下载:http://download.csdn.net/detail/lxq_xsyu/7485441

三、主界面整体布局

我们添加主界面中的内容如下:
高仿交通银行手机客户端界面_第5张图片
[html] view plain copy print ?
  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>
在上面的布局文件中可以看到ViewPager组件,ViewPager是Android3.0以上提供的新组建,它能够实现类似微信5.0中的菜单联动滑动效果以及导航引导界面等。

高仿交通银行手机客户端界面_第6张图片 高仿交通银行手机客户端界面_第7张图片
为了支持Android3.0以下版本的手机,Google为我们提供了一个支持包:android.support.v4.view,当然这个支持包不仅仅包括ViewPager,包中的接口和类如下:
高仿交通银行手机客户端界面_第8张图片
ViewPager的适配器是PagerAdapter,要实现PagerAdapter要实现以下方法:

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

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

(3)getCount()

(4)isViewFromObject(View, Object)

[java] view plain copy print ?
  1. package com.example.jaohangui.activity;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.Activity;
  5. import android.graphics.Color;
  6. import android.os.Bundle;
  7. import android.support.v4.view.PagerAdapter;
  8. import android.support.v4.view.ViewPager;
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;
  10. import android.view.LayoutInflater;
  11. import android.view.View;
  12. import android.view.View.OnClickListener;
  13. import android.view.ViewGroup;
  14. import android.widget.Button;
  15. import android.widget.TextView;
  16. import com.example.jaohangui.R;
  17. import com.example.jaohangui.view.MyScrollLeftRightView;
  18. public class MainActivity extends Activity {
  19. private MyScrollLeftRightView mScrollView;
  20. private ViewPager viewPager;//页卡内容
  21. private List<View> views;// Tab页面列表
  22. private View centerView;
  23. private TextView mTextTitle1;
  24. private TextView mTextTitle2;
  25. private TextView mTextTitle3;
  26. private TextView mTextTitle4;
  27. private View view1;
  28. private View view2;
  29. private View view3;
  30. private View view4;
  31. @Override
  32. protected void onCreate(Bundle savedInstanceState) {
  33. super.onCreate(savedInstanceState);
  34. setContentView(R.layout.activity_main);
  35. mScrollView = (MyScrollLeftRightView)findViewById(R.id.left_right_scrollview);
  36. final View leftView = getLayoutInflater().inflate(R.layout.activity_main_leftview, null);
  37. centerView = getLayoutInflater().inflate(R.layout.activity_main_centerview, null);
  38. final View rightView = getLayoutInflater().inflate(R.layout.activity_main_rightview, null);
  39. mScrollView.setLeftView(leftView);
  40. mScrollView.setMainView(centerView);
  41. InitCenterView();
  42. mScrollView.setRightView(rightView);
  43. }
  44. private void InitCenterView() {
  45. viewPager=(ViewPager) centerView.findViewById(R.id.vPager);
  46. mTextTitle1 = (TextView) centerView.findViewById(R.id.text1);
  47. mTextTitle2 = (TextView) centerView.findViewById(R.id.text2);
  48. mTextTitle3 = (TextView) centerView.findViewById(R.id.text3);
  49. mTextTitle4 = (TextView) centerView.findViewById(R.id.text4);
  50. mTextTitle1.setOnClickListener(new MyOnClickListener(0));
  51. mTextTitle2.setOnClickListener(new MyOnClickListener(1));
  52. mTextTitle3.setOnClickListener(new MyOnClickListener(2));
  53. mTextTitle4.setOnClickListener(new MyOnClickListener(3));
  54. Button leftButton = (Button) centerView.findViewById(R.id.leftButton);
  55. Button rightButton = (Button) centerView.findViewById(R.id.rightButton);
  56. leftButton.setOnClickListener(new OnClickListener() {
  57. @Override
  58. public void onClick(View arg0) {
  59. if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){
  60. mScrollView.toRightMove();
  61. }else{
  62. mScrollView.toLeftMove();
  63. }
  64. }
  65. });
  66. rightButton.setOnClickListener(new OnClickListener() {
  67. @Override
  68. public void onClick(View arg0) {
  69. if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){
  70. mScrollView.toLeftMove();
  71. }else{
  72. mScrollView.toRightMove();
  73. }
  74. }
  75. });
  76. views=new ArrayList<View>();
  77. LayoutInflater inflater=getLayoutInflater();
  78. view1 = inflater.inflate(R.layout.main_tab_layout_0, null);
  79. view2 = inflater.inflate(R.layout.main_tab_layout_1, null);
  80. view3 = inflater.inflate(R.layout.main_tab_layout_2, null);
  81. view4 = inflater.inflate(R.layout.main_tab_layout_3, null);
  82. views.add(view1);
  83. views.add(view2);
  84. views.add(view3);
  85. views.add(view4);
  86. viewPager.setAdapter(new MyViewPagerAdapter(views));
  87. viewPager.setCurrentItem(0);
  88. viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
  89. }
  90. public class MyViewPagerAdapter extends PagerAdapter{
  91. private List<View> mListViews;
  92. public MyViewPagerAdapter(List<View> mListViews) {
  93. this.mListViews = mListViews;
  94. }
  95. @Override
  96. public void destroyItem(ViewGroup container, int position, Object object) {
  97. container.removeView(mListViews.get(position));
  98. }
  99. @Override
  100. public Object instantiateItem(ViewGroup container, int position) {
  101. container.addView(mListViews.get(position), 0);
  102. return mListViews.get(position);
  103. }
  104. @Override
  105. public int getCount() {
  106. return mListViews.size();
  107. }
  108. @Override
  109. public boolean isViewFromObject(View arg0, Object arg1) {
  110. return arg0==arg1;
  111. }
  112. }
  113. private class MyOnClickListener implements OnClickListener{
  114. private int index=0;
  115. public MyOnClickListener(int i){
  116. index=i;
  117. }
  118. public void onClick(View v) {
  119. System.out.println("clike = " + index);
  120. viewPager.setCurrentItem(index);
  121. }
  122. }
  123. public class MyOnPageChangeListener implements OnPageChangeListener{
  124. public void onPageScrollStateChanged(int arg0) {
  125. }
  126. public void onPageScrolled(int arg0, float arg1, int arg2) {
  127. }
  128. public void onPageSelected(int arg0){
  129. System.out.println("changeTabState = " + arg0);
  130. changeTabState(arg0);
  131. }
  132. }
  133. private void changeTabState(int index){
  134. switch (index) {
  135. case 0:
  136. mTextTitle1.setTextColor(Color.rgb(27, 158, 233));
  137. mTextTitle2.setTextColor(Color.rgb(0, 0, 0));
  138. mTextTitle3.setTextColor(Color.rgb(0, 0, 0));
  139. mTextTitle4.setTextColor(Color.rgb(0, 0, 0));
  140. mTextTitle1.setBackgroundResource(R.drawable.menu_tab_center_over);
  141. mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);
  142. mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);
  143. mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);
  144. break;
  145. case 1:
  146. mTextTitle1.setTextColor(Color.rgb(0, 0, 0));
  147. mTextTitle2.setTextColor(Color.rgb(27, 158, 233));
  148. mTextTitle3.setTextColor(Color.rgb(0, 0, 0));
  149. mTextTitle4.setTextColor(Color.rgb(0, 0, 0));
  150. mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);
  151. mTextTitle2.setBackgroundResource(R.drawable.menu_tab_center_over);
  152. mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);
  153. mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);
  154. break;
  155. case 2:
  156. mTextTitle1.setTextColor(Color.rgb(0, 0, 0));
  157. mTextTitle2.setTextColor(Color.rgb(0, 0, 0));
  158. mTextTitle3.setTextColor(Color.rgb(27, 158, 233));
  159. mTextTitle4.setTextColor(Color.rgb(0, 0, 0));
  160. mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);
  161. mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);
  162. mTextTitle3.setBackgroundResource(R.drawable.menu_tab_center_over);
  163. mTextTitle4.setBackgroundResource(R.drawable.menu_tab_left);
  164. break;
  165. case 3:
  166. mTextTitle1.setTextColor(Color.rgb(0, 0, 0));
  167. mTextTitle2.setTextColor(Color.rgb(0, 0, 0));
  168. mTextTitle3.setTextColor(Color.rgb(0, 0, 0));
  169. mTextTitle4.setTextColor(Color.rgb(27, 158, 233));
  170. mTextTitle1.setBackgroundResource(R.drawable.menu_tab_left);
  171. mTextTitle2.setBackgroundResource(R.drawable.menu_tab_left);
  172. mTextTitle3.setBackgroundResource(R.drawable.menu_tab_left);
  173. mTextTitle4.setBackgroundResource(R.drawable.menu_tab_center_over);
  174. break;
  175. default:
  176. break;
  177. }
  178. }
  179. }
实现效果如下:
高仿交通银行手机客户端界面_第9张图片 高仿交通银行手机客户端界面_第10张图片 高仿交通银行手机客户端界面_第11张图片
如果ViewPager要实现和微信上部一样的滑动联动效果,可以参考我的另外一篇博文:http://blog.csdn.net/dawanganban/article/details/25773891

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

你可能感兴趣的:(高仿交通银行手机客户端界面)