当前位置：移动技术网 > 移动技术>移动开发>Android > Android高仿微信5.2.1主界面及消息提醒

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

好久没更新博客了，最近在做公司的项目，这也算是我接触的第一个正式项目。通过项目的检验，发现自己积累了一年的知识还是远远不够，想要提高，好的方法是：项目+书+视频+博客。最重要一点：勤动手。最近发现了慕课网的视频，居然都是高清无码免费的！而且满满的干货！我用业余时间跟着视频中大神的讲解学习了不少知识，下面就将这些小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 ViewBinding include怎么玩

ViewBinding遇到include的时候怎么玩ViewBinding根据xml来生成单个binding文件... [阅读全文]
Unity与Android Studio交互的实现

Unity与Android Studio交互的实现在使用Unity开发功能的时候，有时会需要调用android原... [阅读全文]
Android中的多线程-Handler

对于UI线程中比较耗时的工作，开启一个子线程来处理这些工作：首先创建一个Thread对象，然后调用start(... [阅读全文]
安卓入门第三讲01-Activity的简单逻辑操作（对文本，图片进行设置（两种获取控件的方法），按钮点击-点击按钮打印日志，获取文本框的值+计算器简易案例）

安卓入门第三讲01-Activity（对文本进行设置，按钮点击-点击按钮打印日志，获取文本框的值+计算器简易案例... [阅读全文]
（P3）系统编程介绍

文章目录与操作系统的五大模块对应进程调度，会有进程管理和处理器的管理虚拟存储器，对应的就是内存，对设备进行抽象虚... [阅读全文]
DESUitls

public class test {public static void main(String[] args... [阅读全文]
Xcode版本问题：Unknown argument type ‘__attribute__‘ in method -[RCTAppState getCurrentAppState:error:].

遇到的问题：Xcode版本升级后，在Xcode上点击build时遇到以下问题：Unknown argument ... [阅读全文]
Android NDK 指南

Android NDK 指南文章目录Android NDK 指南前言NDK 工程构建Android.mkCMak... [阅读全文]
荐 android自定义流布局

本章算是对自定义ViewGroup的一个巩固吧先来复习一下自定义ViewGroup的操作流程：自定义ViewGr... [阅读全文]
荐 Android学习中一些小项目（连载中）

文章目录编写聊天页面编写聊天页面我们需要用到RecyclerView，所以依旧先添加依赖在app/build.g... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论