高仿微信5.2.1主界面架构 包含消息通知

最新推荐文章于 2023-03-21 11:07:40 发布
最新推荐文章于 2023-03-21 11:07:40 发布
阅读量4.2w 收藏 88
点赞数 45
分类专栏： 【android 进阶之路】 【Android 精彩案例】 Android 精彩案例 文章标签： 微信主界面 Fragment ViewPager BadgeView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lmj623565791/article/details/25708045
版权
本文介绍了一种仿照微信底部Tab栏效果的实现方法，包括如何使用ViewPager和FragmentPagerAdapter来构建多页面应用，以及如何添加动态变化的消息通知指示器（BadgeView）。文章详细展示了布局文件、主程序代码及Fragment的具体实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载请标明出处：http://blog.youkuaiyun.com/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的完整代码点击下载





模仿 （微信）消息通知效果
niu0147的专栏
06-15 2733
public void showNotification() { // 获取Service final WindowManager mWindowManager = (WindowManager) getApplication().getSystemService(Context.WINDOW_SERVICE); LayoutInflater layoutInflater
android 仿微信通知栏，字节跳动学习笔记
m0_64382868的博客
12-11 507
先来介绍一下setContentTitle（），setContentText（）的设置： 在这里我是从本地的用户列表数据库中查找得到的setContentTitle为用户名称，setContentText为最新的消息内容，具体怎么做是操作数据库，这里就不说了。 在看看setSmallIcon为项目logo： Android从5.0系统开始，对于通知栏图标的设计进行了修改。现在Google要求，所有应用程序的通知栏图标，应该只使用alpha图层来进行绘制，而不应该包括RGB图层。 说的好像很玄乎，什么.
高仿微信主界面附带消息通知
05-13
代码为博客http://blog.csdn.net/lmj623565791/article/details/25708045实例代码 有问题博客留言
Kotlin高仿微信-第24篇-新消息通知
maoning20080808的专栏
12-01 283
在消息通知页面选择了不同的声音，当有新消息过来时，会有对应的声音提示。用户也可以选择无声音，或者不提示。
Android仿微信新消息提示音
小强程序设计工作室 的博客
03-01 2411
环信聊天消息提示音的实现 仿微信新消息提示音设置。 思路：用RingtoneManager查询出title，Ringtone，uri信息，title用来展示，Ringtone用来播放，uri设置提示音时保存到本地，消息到来时，从本地获取存储的Uri，然后根据uri获取Ringtone对象，播放提示音。效果图： 布局文件用ListView 实体类，用来存储提示音信息：/** *
高仿微信5.2.1主界面及消息提醒
03-05
这里我们关注的是“高仿微信5.2.1主界面及消息提醒”，这涉及到移动应用开发，尤其是Android或iOS平台上的UI设计、通知系统以及实时通信技术。 1. **UI设计**： - 用户界面（UI）设计是应用的核心部分，它决定了...
高仿微信5.2.1主界面
11-06
在Android应用开发中，"高仿微信5.2.1主界面"是一个常见的学习和实践课题，主要是为了理解和掌握如何构建类似微信这种大型应用的核心功能界面。在这个项目中，开发者运用了`Fragment`和`ViewPager`这两种核心组件，...
仿微信主界面及消息提醒
冬眠FF的博客
02-29 1810
涉及知识点1.ViewPager 2.FragmentPagerAdapter 3.eclipse快捷键抽出代码作为方法 ： alt+shift+m 4.eclipse快捷键导入包 ： Ctrl+shift+o 5.eclipse快捷键全局修改名称 ： alt+shift+r 6.eclipse快捷键查找类的全名 ：Ctrl+shift+t 7.BadgeView GitHub地
自定义View模仿微信QQ消息列表未读消息数量提示效果 示例DEMO 图标右上角红圈消息提醒
12-09
利用自定义VIEW实现了模仿QQ和微信图标或头像右上角红色圆圈的未读消息数量提示的效果 里边的数字可从1到99,超过部分以"..."表示. 也可自定义 也可根据自己需要改动成其它消息提示效果
Android仿微信未读消息数提示显示数字BadgeView大于99条显示99+
08-28
Android仿微信未读消息数提示显示数字BadgeView大于99条显示99+
仿微信的底部菜单栏的例子
08-15
仿微信的底部菜单栏，可以进行自定义
Flutter高仿微信-第11篇-新消息通知
maoning20080808的专栏
11-23 467
设置了消息提示和视频提示，接收到用户发来的消息和视频通话，都会有相对应的声音提示。
仿QQ微信的带消息数量提醒框
kybkq1314的博客
02-05 676
//这年头没效果都不好意思说话,是不是小习子//首先是自定义的类AdhesionLayout    //注释都在//这个类是实现画圆和拉伸的判断!!!!直接复制,完美运行,带你装逼,带你飞import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animat...
若依集成企业微信步骤
weixin_42926893的博客
03-21 2208
企业微信消息提醒、若依
详解android高仿微信后台接受消息，发送通知，监测网络连接
mace_android的博客
06-23 7127
公司让我研究websocket，利用这个时间写了个仿微信的demo。 服务器端功能比较简单：转发给所有的client （类似与群聊） android端功能：service后台接受消息；broadcastreceived监测网络连接断：断网时给出提示，重连时重新执行service中的websocket方法；接受到消息时如果activity没有在最前端发送notification通知用户。 要点
基于若依(SpringBoot前后分离版-vue)的WebSocket消息推送实现
我这孩子从小记性就不好，什么东西都要写下来才放心
08-01 7161
WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。...
评论 31
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值