Android高仿微信5.2.1主界面及消息提醒

概述好久没更新博客了，最近在做公司的项目，这也算是我接触的第一个正式项目。通过项目的检验，发现自己积累了一年的知识还是远远不够，想要提高，好的方法是：项目+书+视频+博客。最重要一点：勤动手。最近发现了慕课网

好久没更新博客了，最近在做公司的项目，这也算是我接触的第一个正式项目。通过项目的检验，发现自己积累了一年的知识还是远远不够，想要提高，好的方法是 ：项目+书+视频+博客。最重要一点：勤动手。最近发现了网的视频，居然都是高清无码免费的！而且满满的干货！我用业余时间跟着视频中大神的讲解学习了不少知识，下面就将这些小demo与大家分享，当然，我做了一些优化，代码与视频中有些出入，但功能可以完全实现。

这是一个模仿5.2.1版本的显示界面，如下图所示：

功能及实现思路简介

主要功能很简单：
1、上面有一个自定义的标题栏；
2、往下是聊天、发现、通讯录选项卡；
3、手指滑动时，文字下方蓝色的indicator可以跟随滑动；
4、在聊天的右侧，有一个未读消息的红色提醒圆点。

自定义的标题栏就是一个linearLayout，同时将系统自带的Titlebar（或是Actionbar）隐藏；

由于是选项卡，自然想到了Fragment；

手指可以滑动，显然，黑色的区域是一个VIEwPager，数据源就是Fragment组成的集合，并通过FragmentPagerAdapter进行管理；

要实现蓝色的indicator随选项卡的滑动而滑动，可以为VIEwPager设置监听，并根据回调方法的回传值控制该Indicator的marginleft属性值可以实现该效果。

最后消息提醒的小圆点是一个BadgeVIEw ，它是一个第三方开源控件。

主布局

MainActivity布局如下，首先是自定义的Titlebar：

<!-- top1.xml --><?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="50dp" androID:background="@drawable/topone_bg" androID:paddingleft="12dp" androID:paddingRight="12dp"> <linearLayout  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_centerVertical="true"  androID:gravity="center"  androID:orIEntation="horizontal">  <ImageVIEw   androID:layout_wIDth="30dp"   androID:layout_height="30dp"   androID:background="@drawable/actionbar_icon" />  <TextVIEw   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_marginleft="12dp"   androID:text="微信"   androID:textcolor="#D3D3D3"   androID:textSize="18sp" /> </linearLayout> <linearLayout  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:layout_alignParentRight="true"  androID:layout_centerVertical="true"  androID:orIEntation="horizontal">  <ImageVIEw   androID:layout_wIDth="30dp"   androID:layout_height="30dp"   androID:background="@drawable/actionbar_search_icon" />  <ImageVIEw   androID:layout_wIDth="30dp"   androID:layout_height="30dp"   androID:background="@drawable/actionbar_add_icon" />  <ImageVIEw   androID:layout_wIDth="30dp"   androID:layout_height="30dp"   androID:background="@drawable/actionbar_more_icon" /> </linearLayout></relativeLayout>

效果如下所示：

接着是三个选项卡的布局：

<!-- 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="40dp" androID:background="#EEEEEE" androID:orIEntation="vertical"> <linearLayout  androID:layout_wIDth="match_parent"  androID:layout_height="37dp"  androID:orIEntation="horizontal">  <linearLayout   androID:ID="@+ID/ll_chat"   androID:layout_wIDth="0dp"   androID:layout_height="match_parent"   androID:layout_weight="1"   androID:gravity="center"   androID:orIEntation="horizontal">   <TextVIEw    androID:ID="@+ID/tv_tab_chat"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="center"    androID:text="聊天"    androID:textcolor="#008000"    androID:textSize="16sp" />  </linearLayout>  <linearLayout   androID:layout_wIDth="0dp"   androID:layout_height="match_parent"   androID:layout_weight="1"   androID:gravity="center">   <TextVIEw    androID:ID="@+ID/tv_tab_discover"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:text="发现"    androID:textcolor="@androID:color/black"    androID:textSize="16sp" />  </linearLayout>  <linearLayout   androID:layout_wIDth="0dp"   androID:layout_height="match_parent"   androID:layout_weight="1"   androID:gravity="center">   <TextVIEw    androID:ID="@+ID/tv_tab_contacts"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:text="通讯录"    androID:textcolor="@androID:color/black"    androID:textSize="16sp" />  </linearLayout> </linearLayout> <ImageVIEw  androID:ID="@+ID/iv_tab_line"  androID:layout_wIDth="100dp"  androID:layout_height="3dp"  androID:background="@drawable/tabline" /></linearLayout>

效果如下：

由于Indicator还需要在代码中动态设置其长度，故在xml中可以附一个任意值。

最后将top1.xml、top2.xml加入至主布局中，并在主布局中引入VIEwPager：

<!-- activity_main.xml --><?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical" tools:context="com.demo.lenovo.myapplication.MainActivity"> <include layout="@layout/top1" /> <include layout="@layout/top2" /> <androID.support.v4.vIEw.VIEwPager  androID:ID="@+ID/vp_content"  androID:layout_wIDth="match_parent"  androID:layout_height="0dp"  androID:layout_weight="1" /></linearLayout>

效果如下：

注：如您的Activity继承于ActionBaractivity，可以在setContentVIEw()方法之前调用requestwindowFeature(Window.FEATURE_NO_Title);隐藏标题栏；如继承于AppCompactActivity，可以在AndroIDMainfest
中的Application标签中设置主题为：androID:theme="@style/theme.AppCompat.NoActionbar"，也可以实现隐藏标题栏的目的。

使用FragmentPagerAdapter为VIEwPager适配数据

在MainActivity.java 中，加入FragmentPagerAdapter逻辑：（在此略去三个Fragment的布局及代码）

 private FragmentPagerAdapter adapter; private List<Fragment> mData;@OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    requestwindowFeature(Window.FEATURE_NO_Title);    setContentVIEw(R.layout.activity_main);    initVIEw();

在initVIEw()中，初始化Fragment，并将Fragment实例一次装入List中，接着，在初始化FragmentPagerAdapter时管理List的数据。最后调用VIEwPager的setAdapter方法将FragmentPagerAdapter实例传入。

 mData = new ArrayList<>();    mData.add(new ChatFragment());    mData.add(new discoverFragment());    mData.add(new ContactsFragment());    adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {      @OverrIDe      public Fragment getItem(int position) {        return mData.get(position);      }      @OverrIDe      public int getCount() {        return mData.size();      }    };    vp_content.setAdapter(adapter);

设置滑动时字体颜色的变化

为实现该功能，需要为VIEwPager设置setonPagechangelistener监听，并通过OnPagechangelistener接口的回调方法onPagerSelected(int position)，监听当前滑动到了第几页：

@OverrIDe      public voID onPageSelected(int position) {        Log.e(TAG,"onPageSelected: " + position);        resetTextVIEwcolor();        switch (position) {          case 0:                 addBadgeVIEw();  tv_tab_chat.setTextcolor(color.parsecolor("#008000"));            break;          case 1:            tv_tab_discover.setTextcolor(color.parsecolor("#008000"));            break;          case 2:            tv_tab_contacts.setTextcolor(color.parsecolor("#008000"));            break;        }      }//首先将每个选项卡的文字颜色置为黑色 private voID resetTextVIEwcolor() {    tv_tab_contacts.setTextcolor(color.BLACK);    tv_tab_chat.setTextcolor(color.BLACK);    tv_tab_discover.setTextcolor(color.BLACK);

添加BadgeVIEw

在addBadgeVIEw();方法中首先判断BadgeVIEw是否为空，若不为空，首先将其移除，再添加新的BadgeVIEw，代码如下：

 private voID addBadgeVIEw() { if (mBadgeVIEw != null) {              ll_chat.removeVIEw(mBadgeVIEw);            }            mBadgeVIEw = new BadgeVIEw(MainActivity.this);            ll_chat.addVIEw(mBadgeVIEw);            mBadgeVIEw.setBadgeCount(9);}

设置滑动时字体颜色的变化

为实现该功能，需要为VIEwPager设置setonPagechangelistener监听，并通过OnPagechangelistener接口的回调方法onPagerSelected(int position)，监听当前滑动到了第几页：

@OverrIDe      public voID onPageSelected(int position) {        Log.e(TAG,"onPageSelected: " + position);        resetTextVIEwcolor();        switch (position) {          case 0:                 addBadgeVIEw();  tv_tab_chat.setTextcolor(color.parsecolor("#008000"));            break;          case 1:            tv_tab_discover.setTextcolor(color.parsecolor("#008000"));            break;          case 2:            tv_tab_contacts.setTextcolor(color.parsecolor("#008000"));            break;        }      }//首先将每个选项卡的文字颜色置为黑色 private voID resetTextVIEwcolor() {    tv_tab_contacts.setTextcolor(color.BLACK);    tv_tab_chat.setTextcolor(color.BLACK);    tv_tab_discover.setTextcolor(color.BLACK);

添加BadgeVIEw

在addBadgeVIEw();方法中首先判断BadgeVIEw是否为空，若不为空，首先将其移除，再添加新的BadgeVIEw，代码如下：

 private voID addBadgeVIEw() { if (mBadgeVIEw != null) {              ll_chat.removeVIEw(mBadgeVIEw);            }            mBadgeVIEw = new BadgeVIEw(MainActivity.this);            ll_chat.addVIEw(mBadgeVIEw);            mBadgeVIEw.setBadgeCount(9);}

indicator的滑动

为了实现该Indicator随手指的滑动而跟随的效果，需要在OnPagechangelistener接口中的onPageScrolled()方法中编写逻辑，该方法的文档如下：

，

其中，第一个参数position表示滑动到了第几页，比如说，若从第0页滑动至第一页，那么position将一直为0，直到松手以后，滑动至第一页，position将变为1，第二个参数positionOffset表示滑动的百分比，取值范围是0-1，最后一个参数positionOffsetPixels表示滑动的像素数。

下面是从0―>1页面时打印的log，如下所示：

从1―->2页面时打印的log：

从2―->1页面时打印的log：

最后，可以根据（position+positionOffset）*1/3，来设置该Indicator的marginleft。

首先，应为Indicator设置宽度，其宽度应为屏幕宽度的1/3：

 WindowManager manager = getwindow().getwindowManager();    display display = manager.getDefaultdisplay();    displayMetrics outMetrics = new displayMetrics();    display.getMetrics(outMetrics);    mScreenOneThird = outMetrics.wIDthPixels / 3;

其中int型参数mScreenOneThird 的单位是像素px。

设置到Indicator上：

linearLayout.LayoutParams lp = (linearLayout.LayoutParams) iv_tab_line.getLayoutParams();    lp.wIDth = mScreenOneThird;    iv_tab_line.setLayoutParams(lp);

最终在onPageScrolled方法中动态改变Indicator的marginleft属性：

@OverrIDe      public voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) {        linearLayout.LayoutParams lp = (linearLayout.LayoutParams) iv_tab_line.getLayoutParams();        lp.leftmargin = (int) ((positionOffset * mScreenOneThird) + (mScreenOneThird * position));        iv_tab_line.setLayoutParams(lp);

可实现最终效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android高仿微信5.2.1主界面及消息提醒全部内容，希望文章能够帮你解决Android高仿微信5.2.1主界面及消息提醒所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。