High imitation WeChat 5.2.1 main interface architecture includes Message notification

Reprinted please indicate the source: http://blog.csdn.net/lmj623565791/article/details/25708045

A buddy gave me a task before he went to Xinjiang. This is the whole thing. He came back and made a task. Haha, unfortunately, I didn't bring a cut cake to me.

The new version looks like ViewpagerIndicator, but you need to add a Message notification (BadgeView) After Indicator. Unfortunately, there is no way to customize Indicator. Finally, you have written an implementation.

Main Structure: ViewPager and FragmentPagerAdapter

:

1. Main layout File

<?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:background="#eee"    android:orientation="vertical" >        <include layout="@layout/top1"/>    <include layout="@layout/top2"/>    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager></LinearLayout>

2. top2.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 = "wrap_content" android: orientation = "vertical"> <LinearLayout android: id = "@ + id/lllayout" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <LinearLayout android: id = "@ + id/id_tab_liaotian_ly" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "@ drawable/guide_round" android: gravity = "center" android: orientation = "horizontal" android: padding = "10dip"> <TextView android: id = "@ + id/id_liaotian" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center" android: text = "chat" android: textColor = "@ color/green" android: textSize = "15dip"/> </LinearLayout> <LinearLayout android: id = "@ + id/id_tab_faxian_ly" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "@ drawable/guide_round" android: clickable = "true" android: gravity = "center" android: orientation = "horizontal" android: padding = "10dip" android: saveEnabled = "false"> <TextView android: id = "@ + id/id_faxian" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center" android: text = "detected" android: textColor = "@ color/black" android: textSize = "15dip"/> </LinearLayout> <LinearLayout android: id = "@ + id/id_tab_tongxunlu_ly" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: background = "@ drawable/guide_round" android: focusable = "false" android: gravity = "center" android: orientation = "horizontal" android: padding = "10dip"> <TextView android: id = "@ + id/id_tongxunlu" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center" android: text = "Address Book" android: textColor = "@ color/black" android: textSize = "15dip"/> </LinearLayout> <ImageView android: id = "@ + id/id_tab_line" android: layout_width = "200dp" android: layout_height = "wrap_content" android: background = "@ drawable/vpi _ tab_selected_pressed_holo"> </ImageView> </LinearLayout>

This layout is also very simple. An ImageView is added to the layout, which dynamically calculates the width in the program and serves as the Tab guide line.

3. Main Program

Package com. example. mainframework04; import java. util. arrayList; import java. util. list; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. util. displayMetrics; import android. util. log; import android. view. gravity; import android. widget. frameLayout; import android. widget. frameLayout. layoutParams; import android. widget. imageView; import android. widget. linearLayout; import android. widget. textView; import com. jauker. widget. badgeView; public class MainActivity extends FragmentActivity {private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List <Fragment> mFragments = new ArrayList <Fragment> (); /*** top three LinearLayout */private LinearLayout mTabLiaotian; private LinearLayout mTabFaxian; private LinearLayout mTabTongxunlun;/*** top three textviews */private TextView mLiaotian; private TextView mFaxian; private TextView mTongxunlu;/*** create a BadgeView */private BadgeView region for each TabIndicator; private BadgeView mBadgeViewforFaxian; private BadgeView mBadgeViewforTongxunlu; /*** the guide line of the Tab */private ImageView mTabLine;/*** current selected page of ViewPager */private int currentIndex; /*** screen width */private int screenWidth; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mViewPager = (ViewPager) findViewById (R. id. id_viewpager); initView (); initTabLine ();/*** initialize Adapter */mAdapter = new FragmentPagerAdapter (getSupportFragmentManager () {@ Overridepublic int getCount () {return mFragments. size () ;}@ Overridepublic Fragment getItem (int arg0) {return mFragments. get (arg0) ;}}; mViewPager. setAdapter (mAdapter);/*** set listener */mViewPager. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int position) {// reset the font color resetTextView () for all textviews; switch (position) {case 0: /*** set Message notification */mTabLiaotian. removeView (mBadgeViewforLiaotian); mBadgeViewforLiaotian. setBadgeCount (5); mTabLiaotian. addView (mBadgeViewforLiaotian); mLiaotian. setTextColor (getResources (). getColor (R. color. green); break; case 1:/*** set Message notification */mFaxian. setTextColor (getResources (). getColor (R. color. green); mTabFaxian. removeView (mBadgeViewforFaxian); mBadgeViewforFaxian. setBadgeCount (15); mTabFaxian. addView (mBadgeViewforFaxian); break; case 2: mTongxunlu. setTextColor (getResources (). getColor (R. color. green); break;} currentIndex = position ;}@ Overridepublic void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {/*** use position and currentIndex to determine which page the user operates on * and then change the leftMargin of TabLine dynamically based on positionOffset */if (currentIndex = 0 & position = 0) // 0-> 1 {LinearLayout. layoutParams lp = (android. widget. linearLayout. layoutParams) mTabLine. getLayoutParams (); lp. leftMargin = (int) (positionOffset * (screenWidth * 1.0/3) + currentIndex * (screenWidth/3); mTabLine. setLayoutParams (lp);} else if (currentIndex = 1 & position = 0) // 1-> 0 {LinearLayout. layoutParams lp = (android. widget. linearLayout. layoutParams) mTabLine. getLayoutParams (); lp. leftMargin = (int) (-(1-positionOffset) * (screenWidth * 1.0/3) + currentIndex * (screenWidth/3); mTabLine. setLayoutParams (lp);} else if (currentIndex = 1 & position = 1) // 1-> 2 {LinearLayout. layoutParams lp = (android. widget. linearLayout. layoutParams) mTabLine. getLayoutParams (); lp. leftMargin = (int) (positionOffset * (screenWidth * 1.0/3) + currentIndex * (screenWidth/3); mTabLine. setLayoutParams (lp);} else if (currentIndex = 2 & position = 1) // 2-> 1 {LinearLayout. layoutParams lp = (android. widget. linearLayout. layoutParams) mTabLine. getLayoutParams (); lp. leftMargin = (int) (-(1-positionOffset) * (screenWidth * 1.0/3) + currentIndex * (screenWidth/3); mTabLine. setLayoutParams (lp) ;}}@ Overridepublic void onPageScrollStateChanged (int state) {}}); mViewPager. setCurrentItem (1);}/*** initialize the width of the guide line based on the screen width */private void initTabLine () {mTabLine = (ImageView) findViewById (R. id. id_tab_line); DisplayMetrics outMetrics = new DisplayMetrics (); getWindow (). getWindowManager (). getdefadisplay display (). getMetrics (outMetrics); screenWidth = outMetrics. widthPixels; LinearLayout. layoutParams lp = (android. widget. linearLayout. layoutParams) mTabLine. getLayoutParams (); lp. width = screenWidth/3; mTabLine. setLayoutParams (lp);}/*** reset color */protected void resetTextView () {mLiaotian. setTextColor (getResources (). getColor (R. color. black); mFaxian. setTextColor (getResources (). getColor (R. color. black); mTongxunlu. setTextColor (getResources (). getColor (R. color. black);}/*** initialize the control and Fragment */private void initView () {mTabLiaotian = (LinearLayout) findViewById (R. id. id_tab_liaotian_ly); mTabFaxian = (LinearLayout) findViewById (R. id. id_tab_faxian_ly); mTabTongxunlun = (LinearLayout) findViewById (R. id. id_tab_tongxunlu_ly); mLiaotian = (TextView) findViewById (R. id. id_liaotian); mFaxian = (TextView) findViewById (R. id. id_faxian); mTongxunlu = (TextView) findViewById (R. id. id_tongxunlu); MainTab01 tab01 = new MainTab01 (); MainTab02 tab02 = new MainTab02 (); MainTab03 tab03 = new MainTab03 (); mFragments. add (tab01); mFragments. add (tab02); mFragments. add (tab03); mBadgeViewforFaxian = new BadgeView (this); mBadgeViewforLiaotian = new BadgeView (this); mBadgeViewforTongxunlu = new BadgeView (this );}}

It is mainly to set the FragmentPagerAdapter for ViewPager, and then add a listener for switching to generate BadgeView. BadgeView is not used here. setTargetView (targetView), because I want the notification to be displayed after the text, setTargetView may only set the display position as the internal position of the target control.

The next step is TabLine's finger-following effect. First, the width of TabLine will be set based on the number of Tab pages, and then the position, positionOffset, and currentIndex in onPageScrolled will be used to determine the direction in which the current finger slides, then, multiply the percentage of positionOffset by the width of TabLine, and dynamically set the leftMargin of TabLine to move with your fingers.

4. code for each Fragment

package com.example.mainframework04;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MainTab01 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){return  inflater.inflate(R.layout.main_tab_01, container, false);}}

The three tabs are basically the same.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/ly_main_weixin"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#fcfcfc"    android:orientation="vertical" >   <TextView        android:layout_width="fill_parent"       android:layout_height="0dp"       android:layout_weight="1"       android:gravity="center"       android:text="this is first tab !"       android:textColor="#000000"       android:textSize="30sp"       /></LinearLayout>

The layout file of Fragment is basically the same as the three.

Well, it looks complicated and can be implemented. The code is too hasty. Please point out the shortcomings. Finally, please leave a message ~

Download source code

Click to download complete code containing BadgeView