Is a man on the next layer 100 [Layer 3] -- high imitation Bank of Communications mobile client interface

Preface:

It has been three months since the publication of the [Layer 2] in the blog series of "men are down to Layer 3, according to the previous visits and comments, many of my friends still like practical blog posts. After all, we are all called "siege lions", so we should check whether the "siege lions" are qualified and whether we can "build a house" instead of building a house. Let's start with chicken nest building! (Insert an advertisement) many dear teachers and experts, after summing up their years of development experience, have left a lot of knowledge for our young generation, let's walk on their shoulders (this sentence sounds strange ~~), I would like to pay tribute to the great predecessors!

I. demonstration results

Let's take a look at the actual effect (I believe this direct texture is more powerful than the text description)

What is the above effect? Okay! This interface contains a lot of basic and custom components of Android, and is a good case from basic to advanced development. The next step is not to directly paste the code. Since it is a communication, I will communicate with the majority of Android learning and enthusiasts (so considering the uneven foundation, I will develop and explain it step by step)

2. Gently enter the main interface 1. Create a project and Package
2. Pop-up Screen Create a SplashActivity and load the activity_splash.xml interface. SplashActivity. java

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

<?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. Achieve brilliant sliding between left and right First, customize a ViewGroup that can slide left and right. For more information about this part, see my another blog: http://blog.csdn.net/dawanganban/article/details/24303563 Before starting the following work, let's take a look at the concept of coordinates in the Android system: First, we must understand that the Android View has no boundaries and the Canvas has no boundaries. However, when we draw a specific View, we perform some operations on the Canvas object. For example: translate (translation), clipRect (CUT), etc., in order to meet our requirements for drawing the Canvas object, we can call this borderless View "view coordinate"-it is not restricted by the physical screen. Normally, a Layout file is only the display area of the view. If it is exceeded, it cannot be displayed in the area of the parent view, we can call this boundary View "layout coordinates" ------ layout size allocated by the parent View to the Child view. In addition, the starting coordinate of a view on the screen is located at the starting point of the view coordinate, as shown in.
Because the layout coordinates can only display a specific part of the content, we can only move the coordinates of the layout coordinates to display any position of the View coordinates.
Implementation principle: add three views in LinearLayout and set the layout of the three views in onLayout. Use the scroroller class to move the three views.

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; // coordinate interface private View mMainView; // The Center Main Interface private View mRightView; // private float mMeasureWight = 3.0f/5 on the right interface; // ratio of the menu interface 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);}/*** Add the content of the left-side interface * @ param view */public void setLeftView (View view) {mLeftView = view; addView (mLeftView );} /*** Add the main interface content * @ param view */public void setMainView (View view) {mMainView = view; addView (mMainView );} /*** Add the content of the right interface * @ 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. computescroloffset () {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 ;}}

Add the left, center, and right interface layout files to the main 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);}}

On the Bank of Communications interface, the switching between the left and right interfaces is not through gesture sliding, but by clicking two buttons (this is a good implementation, comment out the onTouchEvent above) call the toRightMove () method or the toLeftMove () method directly when you click the button. The interface looks like it has surfaced... to help you learn it step by step, I will paste this part of the source code: Above project source code download: http://download.csdn.net/detail/lxq_xsyu/74854413. Overall Layout of the main interface We add the following content to the main interface:

<? 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 = "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 = "city" 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/xinshijiew.huo"/> <LinearLayout android: id = "@ + id/tab_ll1" android: layout_width = "fill_parent" android: layout_height = "481_dip" android: orientation = "horizontal"> <TextView android: id = "@ + id/text1" android: layout_width = "0dip" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "my homepage" 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 = "Life service" 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 = "Financial Services" 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 = "Investment Management" 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>

In the preceding layout file, we can see the ViewPager component. ViewPager is a new component provided by Android3.0 and later. It can achieve a sliding effect similar to the menu linkage in 5.0 and a navigation guide interface.
To support mobile phones of versions earlier than android, Google provides a support package: android. support. v4.view. Of course, this support package includes not only ViewPager, but also interfaces and classes in the package:
The adapter of ViewPager is PagerAdapter. To implement PagerAdapter, you must implement the following methods:

(1) instantiateItem (ViewGroup, int) // Add

(2) destroyItem (ViewGroup, int, Object) // Delete

(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; // page card content private List <View> views; // Tab page List 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; @ jsonvoid onCreate (Bundle secret) {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); listener (new MyOnClickListener (0); mTextTitle2.setOnClickListener (new MyOnClickListener (1); listener (new MyOnClickListener (2); listener (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 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 merge (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 ;}}}

The implementation result is as follows: If ViewPager is to achieve the same sliding linkage effect as the upper part, you can refer to my another blog: http://blog.csdn.net/dawanganban/article/details/25773891
Of course, our goal is definitely not to build a nest. We can only build a sturdy (strong) pigsty to be worthy of the title of "siege Lion". How can we build it, looking forward to the next article ...., the basic materials used for building a things are roughly the same, but the specific construction process is very different. Therefore, the above is just to show your personal construction methods and look forward to the guidance of our predecessors and peers, let's try to build the desired pigsty together as soon as possible.

In addition, "Sunshine Xiaoqiang" this blog is honored to participate in the blog contest, if you think it is helpful to you, please support Xiaoqiang, voting address: http://vote.blog.csdn.net/Article/Details? Articleid = 30101091