男性在下一100层【第三层】——高仿手机银行client接口
前言:
从《男性在下一100层》系列博文【二楼】现在出版了整整三个月后,。从上述观点和这么多朋友的意见还是比较喜欢真实类的博文。
毕竟我们都叫“攻城狮”。所以要看是否这个“攻城狮”合格,终于还是要看能不能“建造房子“而不是会画房子,以下我们就从盖鸡窝開始吧!(插播一句广告)非常多尊敬老师和专家在总结了自己多年的开发经验后为我们年轻的一辈留下了非常多知识。使我们踏在他们的肩膀上行走(这句话听起来怪怪的~~),在此向伟大的前辈们致敬!
一、演示效果
先看一下实际的效果吧(我相信这样的直接贴图的描写叙述方式比文字描写叙述更给力)
上面的效果怎样?还能够吧!
这个界面包含非常多Android的基础和自己定义组件的知识。是从基础向高级开发进阶的好案例。
接下来可不是直接贴代码哦,既然是交流我就要和广大的Android学习及爱好者交流(所以考虑到基础的參差不齐,我将一步一步的进行开发和解释)
二、轻轻的进入主界面
1、建立project及包
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
2、闪屏界面
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
<? 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、实现绚丽的左右滑动
通常我们所理解的一个Layout布局文件仅仅是该视图的显示区域,超过了这个显示区域将不能显示到父视图的区域中 ,相应的,我们能够将这样的有边界的视图称为“布局坐标”------ 父视图给子视图分配的布局(layout)大小。并且。 一个视图的在屏幕的起始坐标位于视图坐标起始处,例如以下图所看到的。
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;
}
}
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);
}
}
交通银行的界面上左右两个界面的切换方式不是通过手势滑动,而是通过点击两个button(这个非常好实现。将上面的onTouchEvent凝视掉)在点击button的时候直接调用toRightMove()方法或toLeftMove()方法就可以。
界面的样子大致浮出水面了...为了方便大家一步步学习。我将这一部分源码贴出:
三、主界面总体布局
<?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>


(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; @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);
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() { @Override
public void onClick(View arg0) { if(mScrollView.currentPage == MyScrollLeftRightView.CENTER_PAGE){
mScrollView.toRightMove();
}else{
mScrollView.toLeftMove();
}
}
});
rightButton.setOnClickListener(new OnClickListener() { @Override
public 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;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mListViews.get(position));
} @Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mListViews.get(position), 0);
return mListViews.get(position);
} @Override
public int getCount() {
return mListViews.size();
} @Override
public 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;
}
} }
实现效果例如以下:
另外“阳光小强”本篇博文非常荣幸的參加了博客大赛,假设您认为对您有帮助。请支持小强吧,投票地址:http://vote.blog.csdn.net/Article/Details?articleid=30101091
版权声明:本文博客原创文章。博客,未经同意,不得转载。
男性在下一100层【第三层】——高仿手机银行client接口的更多相关文章
- 高仿手机QQ音乐之——Android带进度条的开关
最新版的手机QQ音乐体验确实不错,发现首页播放按钮能够显示歌曲当前进度条.认为挺有新意.效果例如以下: 自己琢磨了下.能够用自己定义组件来实现,试着做了一下.效果例如以下: 整理了下思路.大概设计流程 ...
- Android之高仿手机QQ聊天
源代码下载 转载请注明出处,谢谢! 最终版已上传.优化下拉刷新.增加来消息声音提示.主界面改成ViewPager,实现左右滑动.新增群组.最近会话显示条数,开始上班了,不再修改了.谢谢! 国庆这几天, ...
- Google面试题之100层仍两个棋子
一道Google面试题,题目如下:"有一个100层高的大厦,你手中有两个相同的玻璃围棋子.从这个大厦的某一层扔下围棋子就会碎,用你手中的这两个玻璃围棋子,找出一个最优的策略,来得知那个临界层 ...
- 『HTML5挑战经典』是英雄就下100层-开源讲座(一)从天而降的英雄
是英雄就下100层是一款经典的手机小游戏,以前是在诺基亚手机上十分有名.今天我们就用HTML5和lufylegend一步步地实现它. 一,准备工作 首先,你需要下载lufylegend,下载地址如下: ...
- 超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
- gdufe1538-是男人就上100层-(三维bfs)
Problem Description: 桐老爷和UGO终于来到了名为“是男人就上一百层的塔”的下面,听说大祭司在第100层沉睡.为了题目需要,我把这个塔的层数随机打乱,层数的话大家就忘了前面的100 ...
- 『HTML5挑战经典』是英雄就下100层-开源讲座(二)危险!英雄
本篇为<『HTML5挑战经典』是英雄就下100层-开源讲座>第二篇,需要用到开源引擎lufylegend,可以到这里下载: 下载地址:http://lufylegend.googlecod ...
- 是男人就下100层【第四层】——Crazy贪吃蛇(2)
在上一篇<是男人就下100层[第四层]--Crazy贪吃蛇(1)>中我们让贪吃蛇移动了起来,接下来我们来实现让贪吃蛇能够绕着手机屏幕边线移动而且能够改变方向 一.加入状态并改动代码 首先我 ...
- 是男人就下100层【第四层】——Crazy贪吃蛇(3)
上一篇<是男人就下100层[第四层]--Crazy贪吃蛇(2)>实现了贪吃蛇绕着屏幕四周移动,这一篇我们来完成贪吃蛇的所有功能. 一.随机产生苹果 private void addAppl ...
随机推荐
- UIAlertView、UIActionSheet兼容iOS8
链接地址:http://blog.csdn.net/nextstudio/article/details/39959895?utm_source=tuicool 1.前言 iOS8新增了UIAlert ...
- eclipse the user operation is waiting for building workspace" to complete
"the user operation is waiting for building workspace" to complete", 解决办法: 1.选择菜单栏的“P ...
- [转]CentO下限制SSH登录次数
应公司内部网站等级测评的需求,正逐渐加强系统安全防护. 设备默认 3 次验证失败自动退出,并且结束会话:网络登录连接超时自动退出时间 5 分钟: 第一种方法:已验证. 1.ssh超时时间设置 # cd ...
- Struts2、spring2、hibernate3在SSH中各起什么作用
简单的说: struts 控制用的 hibernate 操作数据库的 spring用解耦的 详细的说: STRUTS 在 SSH 框架中起控制的作用 , 其核心是 Controller, 即 Acti ...
- 几个BCB例子
http://blog.163.com/tab_98/blog/static/11924097201511274543737/
- Python 2.7 学习笔记 内置语句、函数、标准库
使用任何开发语言进行软件开发,都离不开语言提供的内置库(或Api),甚至说内置库的强大及使用是否方便都会影响大家对开发语言的选择. python语言,一样提供了很多内置的功能,可供开发时使用.主要有如 ...
- oschina娱乐游戏
休闲游戏 123网络游戏 88单机游戏 201游戏模拟器/工具/引擎
- Ubuntu下编译Android JNI最靠谱的方法...
网上资料太杂乱,搞了大半天都还是没搞懂怎么系统的调用NDK.最后干脆放弃了Win改用Ubuntu编译JNI,虽然编译环境简单了,但是资料却少了不少.几乎没有一篇完整的文章.我想或许是能在Ubuntu下 ...
- 杭电1874畅通project绪
畅通project续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 演练5-3:Contoso大学校园管理系统3
在前面的教程中,我们使用了一个简单的数据模型,包括三个数据实体.在这个教程汇中,我们将添加更多的实体和关系,按照特定的格式和验证规则等自定义数据模型. Contoso大学校园管理系统的数据模型如下. ...