高仿微信5 2 1主界面架构 包含消息通知

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/25708045

一哥们去新疆前给了我个任务，就是整这东西，哥们回来了，赶紧做了个，哈哈，可惜没给我带切糕。

新版微信的效果，一眼看上去准备用ViewpagerIndicator来实现，但是需要在Indicator的后面添加消息通知（BadgeView），可惜没有办法自定义Indicator，最后还是自己写了个实现。

主结构:ViewPager和FragmentPagerAdapter

效果图：

1、主布局文件

<?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="聊天"                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="发现"                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="通讯录"                android:textColor="@color/black"                android:textSize="15dip" />        </LinearLayout>    </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>

这个布局也很简单，在布局中加入了一个ImageView，这个会在程序中动态计算宽度，作为Tab的引导线。

3、主程序

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>(); /**  * 顶部三个LinearLayout  */ private LinearLayout mTabLiaotian; private LinearLayout mTabFaxian; private LinearLayout mTabTongxunlun; /**  * 顶部的三个TextView  */ private TextView mLiaotian; private TextView mFaxian; private TextView mTongxunlu; /**  * 分别为每个TabIndicator创建一个BadgeView  */ private BadgeView mBadgeViewforLiaotian; private BadgeView mBadgeViewforFaxian; private BadgeView mBadgeViewforTongxunlu; /**  * Tab的那个引导线  */ private ImageView mTabLine; /**  * ViewPager的当前选中页  */ private int currentIndex; /**  * 屏幕的宽度  */ private int screenWidth; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  initView();  initTabLine();  /**   * 初始化Adapter   */  mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  {   @Override   public int getCount()   {    return mFragments.size();   }   @Override   public Fragment getItem(int arg0)   {    return mFragments.get(arg0);   }  };  mViewPager.setAdapter(mAdapter);  /**   * 设置监听   */  mViewPager.setOnPageChangeListener(new OnPageChangeListener()  {   @Override   public void onPageSelected(int position)   {    // 重置所有TextView的字体颜色    resetTextView();    switch (position)    {    case 0:     /**      * 设置消息通知      */     mTabLiaotian.removeView(mBadgeViewforLiaotian);     mBadgeViewforLiaotian.setBadgeCount(5);     mTabLiaotian.addView(mBadgeViewforLiaotian);     mLiaotian.setTextColor(getResources().getColor(R.color.green));     break;    case 1:     /**      * 设置消息通知      */     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;   }   @Override   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)   {    /**     * 利用position和currentIndex判断用户的操作是哪一页往哪一页滑动     * 然后改变根据positionOffset动态改变TabLine的leftMargin     */    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);    }   }   @Override   public void onPageScrollStateChanged(int state)   {   }  });  mViewPager.setCurrentItem(1); } /**  * 根据屏幕的宽度，初始化引导线的宽度  */ private void initTabLine() {  mTabLine = (ImageView) findViewById(R.id.id_tab_line);  DisplayMetrics outMetrics = new DisplayMetrics();  getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);  screenWidth = outMetrics.widthPixels;  LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();  lp.width = screenWidth / 3;  mTabLine.setLayoutParams(lp); } /**  * 重置颜色  */ protected void resetTextView() {  mLiaotian.setTextColor(getResources().getColor(R.color.black));  mFaxian.setTextColor(getResources().getColor(R.color.black));  mTongxunlu.setTextColor(getResources().getColor(R.color.black)); } /**  * 初始化控件，初始化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); }}

主要就是为ViewPager设置FragmentPagerAdapter，然后添加切换的监听，生成BadgeView，这里没有使用BadgeView.setTargetView(targetView)，因为我希望通知显示在文本的后面，setTargetView可能只能设置显示位置为目标控件的内部位置。

再次就是TabLine的跟随手指的效果，首先会根据Tab页的数量为TabLine设置宽度，然后在onPageScrolled中根据position，positionOffset，currentIndex，判断用户当前手指滑动的方向，然后根据positionOffset这个百分比乘以TabLine的宽度，动态设置TabLine的leftMargin实现跟随手指移动的效果。

4、每个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{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  return  inflater.inflate(R.layout.main_tab_01, container, false);  }}

3个标签页基本一致，不重复贴了。

<?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>

Fragment的布局文件，同样三个基本一致。

好了，结束，看起来挺复杂，实现起来还可以。代码写得比较仓促，有啥不足地方请指出来。最后求留言，求赞~

源码点击下载

包含BadgeView的完整代码点击下载

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow