Android仿新版微信主界面（使用android-support-v7兼容包，兼容2.2及其以上版本）

最新推荐文章于 2024-04-24 09:38:08 发布
最新推荐文章于 2024-04-24 09:38:08 发布
阅读量3.3k 收藏 5
点赞数 2
分类专栏： Android 文章标签： 界面 微信 android actionbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haunghui6579/article/details/37909521
版权

最近由于公司项目的界面需求，软件的主界面与微信的基本上差不多，于是花一点时间研究并实现了一下，用到了一些第三方的开源项目和android-support-v7兼容包，

主要用到了如下开源项目：

  1. PagerSlidingTabStrip （标签页的滑动）
  2. android-viewbadger （未读信息的提醒标识）
要说明的是PagerSlidingTabStrip我为了一些效果的需要自己作了一些改进和扩展，不然是无法达到所需的效果的，直接上效果图吧。

这里讲解一下标签的滑动，PagerSlidingTabStrip得到viewpager里的fragment的数量，获得屏幕的宽度，然后根据标签的数量来计算每个indicator的平均长度，当页面滑动时，根据当前页面的索引位置来获得对应的子控件，并条用scrollTo方法来滑动对应的位置，indicator的结构如图所示。

Textview用来显示标题的文字，后后面的view主要是用来显示未读信息的数量，因为BadgeView需要一个载体来显示信息。

MainActiivty.java的主要代码：

package com.example.mymicromsgdemo;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.example.mymicromsgdemo.util.SystemUtil;
import com.example.mymicromsgdemo.view.BadgeView;
import com.example.mymicromsgdemo.view.PagerSlidingTabStrip;

public class MainActivity extends ActionBarActivity {
	private Context mContext;
	
	private static String[] contentLables;

	private static int[] homeMenuPlusRes = { 
		R.drawable.ic_launcher, 
		R.drawable.ic_launcher,
		R.drawable.ic_launcher, 
		R.drawable.ic_launcher, 
		R.drawable.ic_launcher 
	};

	private static int[] menu_popup_more_res = { R.drawable.ic_launcher, R.drawable.ic_launcher };

	private static String[] menu_popup_plus_title = { "发起群聊", "添加朋友", "视频聊天", "扫一扫", "拍照" };
	
	private static String[] menu_popup_more_title = { "张三", "设置" };

	public static int CONTENT_HEIGHT = 0;

	private PopupWindow mPopupWindowAdd;
	private PopupWindow mPopupWindowMore;

	private View popupAddParent;
	private View popupMoreParent;

	private PagerSlidingTabStrip indicator;
	
	MyFragmentPagerAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mContext = this;
		
		ActionBar actionBar = getSupportActionBar();
		actionBar.setTitle("微信");

		contentLables = getResources().getStringArray(R.array.home_function_lable);

		adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());

		ViewPager pager = (ViewPager) findViewById(R.id.pager);
		pager.setAdapter(adapter);

		indicator = (PagerSlidingTabStrip) findViewById(R.id.indicator);
		indicator.setViewPager(pager);
		
		new LoadDataTAsk().execute();
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater menuInflater = getMenuInflater();
		menuInflater.inflate(R.menu.menu_home, menu);
		return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.action_search: //搜索
			//openSearch();
			break;
		case R.id.action_add: //添加
			if (popupAddParent == null) {
				popupAddParent = findViewById(R.id.action_add);
			}
			showAddPopupWindow(popupAddParent);
			break;
		case R.id.action_more: //更多
			if (popupMoreParent == null) {
				popupMoreParent = findViewById(R.id.action_more);
			}
			showMorePopupWindow(popupMoreParent);
			break;

		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}
	
	/**
	 * 初始化右上角菜单的资源
	 * @param resIds 图标资源数组
	 * @param titles 菜单标题数组
	 * @return 菜单列表
	 */
	private List<MenuPopupItem> initMenus(int[] resIds, String[] titles) {
		List<MenuPopupItem> list = new ArrayList<MenuPopupItem>();
		int len = titles.length;
		for (int i = 0; i < len; i++) {
			MenuPopupItem item = new MenuPopupItem(mContext.getResources().getDrawable(resIds[i]), titles[i]);
			list.add(item);
		}
		return list;
	}

	/**
	 * 创建并显示“添加”的popup菜单
	 * @param parent
	 */
	private void showAddPopupWindow(final View parent) {
		if (mPopupWindowAdd == null) {
			View view = LayoutInflater.from(mContext).inflate(R.layout.menu_home, null);
			ListView listView = (ListView) view.findViewById(R.id.lv_menu_popup);
			MemuPopupAdapter menuAddAdapter = new MemuPopupAdapter(mContext, initMenus(homeMenuPlusRes, menu_popup_plus_title));
			listView.setAdapter(menuAddAdapter);
			mPopupWindowAdd = new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			initPopupWindow(mPopupWindowAdd);
			listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

				@Override
				public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
					togglePopupWindow(mPopupWindowAdd, parent);
				}
			});
		}

		togglePopupWindow(mPopupWindowAdd, parent);
	}

	/**
	 * 创建并显示“更多”的popup菜单
	 * @param parent
	 */
	private void showMorePopupWindow(final View parent) {
		if (mPopupWindowMore == null) {
			View view = LayoutInflater.from(mContext).inflate(R.layout.menu_home, null);
			ListView listView = (ListView) view.findViewById(R.id.lv_menu_popup);
			MemuPopupAdapter menuAddAdapter = new MemuPopupAdapter(mContext, initMenus(menu_popup_more_res, menu_popup_more_title));
			listView.setAdapter(menuAddAdapter);
			mPopupWindowMore = new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			initPopupWindow(mPopupWindowMore);
			listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

				@Override
				public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
					togglePopupWindow(mPopupWindowMore, parent);
				}
			});
		}

		togglePopupWindow(mPopupWindowMore, parent);
	}

	/**
	 * 初始化popupWindow的一些参数，主要用于菜单的显示方式
	 * @param window
	 */
	private void initPopupWindow(PopupWindow window) {
		View view = window.getContentView();
		window.setWidth(SystemUtil.getViewSize(view)[0] + 35);
		window.setOutsideTouchable(true);
		window.setFocusable(true);
		window.update();
		window.setBackgroundDrawable(new BitmapDrawable(null, (Bitmap) null));
		window.setAnimationStyle(R.style.MenuPopupAnimStyle);
	}

	/**
	 * 显示与消失popup菜单
	 * @param window
	 * @param parent
	 */
	private void togglePopupWindow(PopupWindow window, View parent) {
		if (window.isShowing()) {
			window.dismiss();
		} else {
			if (parent != null) {
				window.showAtLocation(parent, Gravity.TOP | Gravity.RIGHT, 5, SystemUtil.getStatusBarHeight(mContext) + SystemUtil.getActionBarHeight(mContext));
			}
		}
	}
	
	/**
	 * 异步加载数据的线程
	 */
	class LoadDataTAsk extends AsyncTask<Void, Void, Void> {

		@Override
		protected Void doInBackground(Void... params) {
			//1、在这里可以加载数据
			return null;
		}
		
		@Override
		protected void onPostExecute(Void result) {
			//1、加载数据完毕后，更新界面
			//2、显示未读信息的提醒数量
			int count = contentLables.length;
			for(int i = 0; i < count; i++) {
				View view = indicator.getCurrentTargetView(i);
				if(i == 0) {	//显示具体数量的提醒
					showBadgeView(mContext, view, 23);
				} else {
					showBadgeView(mContext, view, 0);
				}
			}
		}
		
	}
	
	private void showBadgeView(Context context, View target, int num) {
		BadgeView badgeView = new BadgeView(mContext, target);
		badgeView.setTextSize(10);
		badgeView.setGravity(Gravity.CENTER);
        badgeView.setBadgePosition(BadgeView.POSITION_VERTICAL_LEFT);
		if(num == 0) {
			badgeView.setText("");
			badgeView.setBackgroundResource(R.drawable.main_tab_new_message_notify);
		} else {
			badgeView.setText(String.valueOf(num));
			badgeView.setBackgroundResource(R.drawable.g_unread_messages_bg);
		}
		badgeView.show();
	}
	
	/**
	 * popup菜单的适配器
	 */
	class MemuPopupAdapter extends BaseAdapter {
		private Context context;
		private List<MenuPopupItem> list;

		public MemuPopupAdapter(Context context, List<MenuPopupItem> list) {
			super();
			this.context = context;
			this.list = list;
		}

		@Override
		public int getCount() {
			return list.size();
		}

		@Override
		public Object getItem(int position) {
			return list.get(position);
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			MenuViewHolder holder = null;
			if (convertView == null) {
				holder = new MenuViewHolder();
				convertView = LayoutInflater.from(context).inflate(R.layout.item_menu_popu, parent, false);
				ImageView imageView = (ImageView) convertView.findViewById(R.id.iv_menu_icon);
				TextView textView = (TextView) convertView.findViewById(R.id.tv_menu_title);
				holder.icon = imageView;
				holder.title = textView;
				convertView.setTag(holder);
			} else {
				holder = (MenuViewHolder) convertView.getTag();
			}
			MenuPopupItem item = list.get(position);

			Drawable icon = item.getIcon();
			String title = item.getTitle();

			if (icon == null) {
				holder.icon.setVisibility(View.GONE);
			} else {
				holder.icon.setImageDrawable(icon);
			}
			holder.title.setText(title);
			return convertView;
		}

		final class MenuViewHolder {
			ImageView icon;
			TextView title;
		}

	}
	
	class MyFragmentPagerAdapter extends FragmentPagerAdapter {
		public MyFragmentPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			return TestFragment.newInstance("测试内容" + (position + 1));
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return contentLables[position % contentLables.length].toUpperCase(Locale.getDefault());
		}

		@Override
		public int getCount() {
			return contentLables.length;
		}
	}
}
布局文件activity_main.xml的主要代码为： 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:psts="http://schemas.android.com/apk/res/com.example.mymicromsgdemo"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:background="#ffffff"
    android:layout_height="fill_parent">
         
    <com.example.mymicromsgdemo.view.PagerSlidingTabStrip 
        android:id="@+id/indicator"
        android:layout_height="40dp"
        android:layout_width="fill_parent"
        psts:pstsDividerColor="@android:color/transparent"
        psts:pstsUnderlineHeight="1dp"
        psts:pstsIndicatorHeight="4dp"
        psts:pstsIndicatorColor="@color/pager_tab_indicator_color"
        psts:pstsSelectedTabTextColor="@color/pager_tab_indicator_color"
        psts:pstsTabBackground="@android:color/transparent"
        android:textSize="16sp"/>
         
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

为了兼容Android2.X,本项目采用android-support-v7的兼容包来实现actionbar,当然，也有一些第三方的优秀的包可以做到，如大名鼎鼎的 ActionBarSherlock。要在actionbar上弹出微信那样效果的效果，在4.X是很容易实现的，但为了兼容2.x,这里用普通的munu可能不好实现，自己暂时木有想到，有想到的朋友可以探讨一下，于是就使用了popupwindow来实现，主要的原理是在actionbar的菜单项中相应点击事件，然后来弹出菜单。

系统的菜单menu_home.xml源码如下。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="搜索"
        android:icon="@drawable/system_menu_search_normal" />
    
    <item
        android:id="@+id/action_add"
        android:orderInCategory="101"
        app:showAsAction="always"
        android:title="添加"
        android:icon="@drawable/system_menu_plus_normal"/>
    
    <item
        android:id="@+id/action_more"
        android:orderInCategory="102"
        app:showAsAction="always"
        android:title="更多"
        android:icon="@drawable/system_menu_more_normal" />

</menu>

注意：这里 xmlns:app="http://schemas.android.com/apk/res-auto"意思是使用support-v7的资源，不然在2.x是显示不出来的。


popupwindow的显示条用了window.showAtLocation方法，具体的位置是x轴距右5个像素，y轴是通过计算出来的，y=屏幕的高度-状态栏的高度-actionbar的高度，当然，也可以用showAsDropDown方法来显，大家可以自己试一下。

好了，大致的内容就是这些，大家有什么疑问或者文中有什么问题可以指正。

Email：huanghui6579@163.com

QQ：409384897



源码下载，点击这里

HuangHui6579
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
android studio仿微信主界面
06-14
使用android studio设计微信主界面，采用ViewPager和Fragment相结合的方法，实现界面滑动更换页面，点击等
仿微信主界面
09-28
简单模仿微信主界面的效果
Android仿微信界面
weixin_30256505的博客
05-23 337
效果图 原理介绍 1、先绘制一个颜色（例如：粉红） 2、设置Mode=DST_IN 3、绘制我们这个可爱的小机器人 回答我，显示什么，是不是显示交集，交集是什么？交集是我们的小机器人的非透明区域，也就是那张脸，除了两个眼； 好了，那怎么变色呢？ 我绘制一个颜色的时候，难道不能设置alpha么 自定义图标控件 自定义属性 <?xml vers...
SupportV4 包 与 androidx 有重复问题解决方法
最新发布
tangweiguo03051987的博客
04-24 272
【代码】【无标题】
Android 之高仿微信主界面
weixin_30449453的博客
08-25 249
源码下载: http://files.cnblogs.com/aibuli/WeChatSample.zip 主界面主要使用ActionBar来完成. 要实现这个效果,第一步当然是编辑menu目录下的main.xml文件. <menuxmlns:android="http://schemas.android.com/apk/res/android" x...
Android 仿微信之（二）--主页面实现篇
热门推荐
极致的专注 无限的热情
11-03 1万+
这一篇将讲述如何构建主页面，先看一下微信主页面的截图   从截图中可以看出，它的菜单是在程序的底部，当我们选择一个按钮后，它的颜色会发生变化，好像有灯在亮，这个实现起来比较简单，可以有多种方式供我们选择，TabActivity或者tabwidget+radiobutton或者activitygroup+radiobutton或者activitygroup+gridview或者activi
Android仿微信语音聊天界面设计
09-01
在本文中，我们将探讨如何在Android平台上实现一个...以上就是Android仿微信语音聊天界面设计的关键知识点和实现流程。通过这个设计，我们可以创建一个功能完备的语音消息系统，让用户能够方便地发送和接收语音消息。
Android仿微信主界面的实现方法
08-27
Android 仿微信主界面的实现方法是 Android 开发者常用的技术之一，通过本文，我们将详细介绍如何实现 Android 仿微信主界面，并提供了详细的代码示例供大家参考。 标题栏的实现 在 Android 仿微信主界面中，标题...
Android ActionBar应用实战，高仿微信主界面的设计实例完整源码
07-02
这可以通过使用`ActionBar.Tab`接口来实现，或者在Android 3.0及以上版本中使用`android.app.FragmentTabHost`。 在`guolin_blog`的博文中，详细讲述了如何创建和管理这些Tab。首先，我们需要为每个Tab创建一个...
Android高仿微信5.2.1主界面及消息提醒
09-01
本篇文章将详细讲解如何在Android平台上实现高仿微信5.2.1版本的主界面及消息提醒功能。 首先，我们要创建自定义的标题栏。在Android中，可以使用LinearLayout来实现这个功能，同时隐藏系统默认的TitleBar或...
Android 仿QQ微信登录页面-IT计算机-毕业设计.zip
04-05
本项目“Android 仿QQ微信登录页面”是一个源码示例，适用于毕业设计和论文研究，旨在帮助学生理解和实践Android应用的开发流程。 首先，我们关注的是界面设计。在Android中，UI设计通常使用XML布局文件来完成。这...
android开发仿微信界面实现
12-13
android开发仿微信界面实现，使用了viewpager，有详细注释。来自：http://www.imooc.com/video/5902
V7 Actionbar仿微信首页头部效果
10-05
V7 Actionbar仿微信首页头部效果，请参考文章：http://blog.csdn.net/sinat_29398599/article/details/52739276
安卓2.3可用微信
01-19
安卓2.3下可用微信
jdk7-8兼容包(微信企业号接入JDK6和JDK7及JDK8加解密失败处理).zip
03-25
微信企业号接入JDK6和JDK7及JDK8加解密失败处理，兼容包，包含使用教程、简单快速解决你的问题
Android仿微信APP源码
10-28
Android仿微信APP源码，包含登录注册，添加好友，会话，聊天，换肤，二维码扫描等功能，具体配置及使用请参考我的博客：http://blog.csdn.net/ericfantastic/article/details/49451249
微信主界面
wqewq19的博客
07-08 1303
转载 ：http://blog.csdn.net/lmj623565791/article/details/41087219 Activitypublic class Main2Activity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener{ private Vi
android 最新仿微信,Android仿微信主界面的实现方法
weixin_32306175的博客
05-26 1130
Android仿微信主界面的实现方法发布时间：2020-09-09 04:17:05来源：脚本之家阅读：245作者：OliverBuddy本文实例为大家分享了Android模仿微信主界面展示的具体代码，供大家参考，具体内容如下先看一下效果图实现的原理：ViewPager+FragmentPagerAdapter主界面可分为三部分：top标题栏就是一个TextView中间的ViewPager作为显示...
android 仿微信框架,Android企业级架构-仿微信-功能组件建设
weixin_42468911的博客
05-29 156
在前面的文章中，我们做了基础的网络库Lib、数据库Lib、UI库Lib，现在还有一节重要的Lib库等着我们去搭建，那就是功能库。功能库中存放一些常用的工具类，比如时间/日期工具、文件处理工具、集合判断工具、Toast工具、SharedPreferences(偏好)工具等。下面我们开始处理创建module：创建Library在工程目录下的build.gradle中ext中添加如下版本号：// Com...
Android仿微信聊天界面：集成语音录制功能与XML布局详解
在Android开发中，实现一个仿微信聊天界面并集成语音录制功能是一项常见的任务，尤其是在构建社交应用时。本文将着重讲解如何设计和实现这样的界面，包括XML布局文件（如chat.xml）的设计以及关键组件的功能实现。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值