Is a man next layer 100 [the first layer] -- high imitation WeChat interface (5)

We have completed the basic guide interface and logon interface in the previous section "men are the next layer [the first layer] -- high imitation interface (4, in this article, we will take a look at the layout and content of the main interface after logon to complete the interface step by step.

Let's take a look at the layout of the main interface, as shown in. The navigation bar in the next section is made into a main layout separately, and then the ViewPager component is placed in the previous section. The guiding interface is a bit similar. This navigation bar can be implemented using TabHost or Fragement. we can implement it using ViewPager first.

The main layout interface layout file is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: id = "@ + id/mainweixin" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientation = "vertical" android: background = "# eee"> <RelativeLayout android: id = "@ + id/main_bottom" android: layout_width = "match_parent" android: layout_height = "55dp" android: layout_alignParentBottom = "true" android: orientation = "vertical" android: background = "@ drawable/bottom_bar"> <ImageView android: id = "@ + id/img_tab_now" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: scaleType = "matrix" android: layout_gravity = "bottom" android: layout_alignParentBottom = "true" android: src = "@ drawable/tab_bg"/> <LinearLayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: authorization = "true" android: paddingBottom = "2dp"> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal" android: orientation = "vertical" android: layout_weight = "1"> <ImageView android: id = "@ + id/img_weixin" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: scaleType = "matrix" android: clickable = "true" android: src = "@ drawable/tab_weixin_pressed"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "" android: textColor = "# fff" android: textSize = "12sp"/> </LinearLayout> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal" android: orientation = "vertical" android: layout_weight = "1"> <ImageView android: id = "@ + id/img_address" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: scaleType = "matrix" android: clickable = "true" android: src = "@ drawable/tab_address_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Address Book" android: textColor = "# fff" android: textSize = "12sp"/> </LinearLayout> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal" android: orientation = "vertical" android: layout_weight = "1"> <ImageView android: id = "@ + id/img_friends" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: scaleType = "matrix" android: clickable = "true" android: src = "@ drawable/tab_find_frd_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "friends" android: textColor = "# fff" android: textSize = "12sp"/> </LinearLayout> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal" android: orientation = "vertical" android: layout_weight = "1"> <ImageView android: id = "@ + id/img_settings" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: scaleType = "matrix" android: clickable = "true" android: src = "@ drawable/tab_settings_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Settings" android: textColor = "# fff" android: textSize = "12sp"/> </LinearLayout> </RelativeLayout> <LinearLayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_alignParentTop = "true" android: layout_above = "@ id/main_bottom" android: orientation = "vertical"> <android. support. v4.view. viewPager android: id = "@ + id/tabpager" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center"> </android. support. v4.view. viewPager> </LinearLayout> </RelativeLayout>

On the outermost side, we use a relative layout. In fact, linear layout is also acceptable. Any interface can be implemented in multiple ways, sometimes we need to select the desired implementation method based on the performance optimization.

The bottom of the relative layout is a linear layout. In this layout, four linear la s are placed. Each linear layout is a menu item in the navigation menu below. At the top of the relative layout, A ViewPage component is placed in a linear layout, which fully conforms to the structure we have drawn above.

Then, in the Activity, we load the layout files corresponding to the Four menus into the View object through the Inflate loader and store them into an array. Then, we fill in the interface through the PageAdapter adapter.

// Load the View to be displayed by page into the array LayoutInflater mLi = LayoutInflater. from (this); View view1 = mLi. inflate (R. layout. main_tab_weixin, null); View view2 = mLi. inflate (R. layout. main_tab_address, null); View view3 = mLi. inflate (R. layout. main_tab_friends, null); View view4 = mLi. inflate (R. layout. main_tab_settings, null); // view data final ArrayList <View> views = new ArrayList <View> (); views. add (view1); views. add (view2); views. add (view3); views. add (view4); // fill in the ViewPager data adapter PagerAdapter mPagerAdapter = new PagerAdapter () {@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;} @ Overridepublic int getCount () {return views. size () ;}@ Overridepublic void destroyItem (View container, int position, Object object Object) {(ViewPager) container ). removeView (views. get (position);} // @ Override // public CharSequence getPageTitle (int position) {// return titles. get (position); //} @ Overridepublic Object instantiateItem (View container, int position) {(ViewPager) container ). addView (views. get (position); return views. get (position) ;}}; mTabPager. setAdapter (mPagerAdapter );}

Now we need to switch the content in ViewPager through the listening function of the four menu buttons.

mTab1 = (ImageView) findViewById(R.id.img_weixin);mTab2 = (ImageView) findViewById(R.id.img_address);mTab3 = (ImageView) findViewById(R.id.img_friends);mTab4 = (ImageView) findViewById(R.id.img_settings);mTabImg = (ImageView) findViewById(R.id.img_tab_now);mTab1.setOnClickListener(new MyOnClickListener(0));mTab2.setOnClickListener(new MyOnClickListener(1));mTab3.setOnClickListener(new MyOnClickListener(2));mTab4.setOnClickListener(new MyOnClickListener(3));

/*** Click the header to listen */public class MyOnClickListener implements View. onClickListener {private int index = 0; public MyOnClickListener (int I) {index = I ;}@ Overridepublic void onClick (View v) {mTabPager. setCurrentItem (index );}};

Next, we need to solve a problem. After selecting a menu, for example, after selecting the "Address Book" menu, we can change the background color of the menu by replacing the ImageView in the menu with the CheckBox, you can also use the OnPageChangeListener function of ViewPager to change the background.

/** Page card switch listener (Original Author: D. winter) */public class MyOnPageChangeListener implements OnPageChangeListener {@ Overridepublic void onPageSelected (int arg0) {Animation animation = null; switch (arg0) {case 0: encrypt (getResources (). getDrawable (R. drawable. tab_weixin_pressed); if (currIndex = 1) {animation = new TranslateAnimation (one, 0, 0, 0); mTab2.setImageDrawable (getResources (). getDrawable (R. drawable. tab_address_normal);} else if (currIndex = 2) {animation = new TranslateAnimation (two, 0, 0, 0); mTab3.setImageDrawable (getResources (). getDrawable (R. drawable. tab_find_frd_normal);} else if (currIndex = 3) {animation = new TranslateAnimation (three, 0, 0, 0); mTab4.setImageDrawable (getResources (). getDrawable (R. drawable. tab_settings_normal);} break; case 1: mTab2.setImageDrawable (getResources (). getDrawable (R. drawable. tab_address_pressed); if (currIndex = 0) {animation = new TranslateAnimation (zero, one, 0, 0); mTab1.setImageDrawable (getResources (). getDrawable (R. drawable. tab_weixin_normal);} else if (currIndex = 2) {animation = new TranslateAnimation (two, one, 0, 0); mTab3.setImageDrawable (getResources (). getDrawable (R. drawable. tab_find_frd_normal);} else if (currIndex = 3) {animation = new TranslateAnimation (three, one, 0, 0); mTab4.setImageDrawable (getResources (). getDrawable (R. drawable. tab_settings_normal);} break; case 2: mTab3.setImageDrawable (getResources (). getDrawable (R. drawable. tab_find_frd_pressed); if (currIndex = 0) {animation = new TranslateAnimation (zero, two, 0, 0); mTab1.setImageDrawable (getResources (). getDrawable (R. drawable. tab_weixin_normal);} else if (currIndex = 1) {animation = new TranslateAnimation (one, two, 0, 0); mTab2.setImageDrawable (getResources (). getDrawable (R. drawable. tab_address_normal);} else if (currIndex = 3) {animation = new TranslateAnimation (three, two, 0, 0); mTab4.setImageDrawable (getResources (). getDrawable (R. drawable. tab_settings_normal);} break; case 3: mTab4.setImageDrawable (getResources (). getDrawable (R. drawable. tab_settings_pressed); if (currIndex = 0) {animation = new TranslateAnimation (zero, three, 0, 0); mTab1.setImageDrawable (getResources (). getDrawable (R. drawable. tab_weixin_normal);} else if (currIndex = 1) {animation = new TranslateAnimation (one, three, 0, 0); mTab2.setImageDrawable (getResources (). getDrawable (R. drawable. tab_address_normal);} else if (currIndex = 2) {animation = new TranslateAnimation (two, three, 0, 0); mTab3.setImageDrawable (getResources (). getDrawable (R. drawable. tab_find_frd_normal);} break;} currIndex = arg0; animation. setFillAfter (true); // True: the image is parked at the animation end position. setduration( 150); mTabImg. startAnimation (animation) ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0 ){}}

The above currIndex aims to remember the last status and restore the background of the last button.

The layout effect is as follows:

Is the effect cool? If there is any better implementation method or something wrong, please make a brick, exchange with each other, and make progress together. If you like the blog of sunshine Xiaoqiang (Big bowl of dried rice) and want to learn together, you can join the exchange group on the left. This group contains technical enthusiasts from all over the country. Thank you ~~

Next, let's take a closer look at the interface implementation corresponding to the Four menus and paste the source code.