Android仿微信主界面设计

先来一张效果图

一.ActionBar的设计

首先是main.xml,先定义这些菜单,界面稍后在调整

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 tools:context=".MainActivity">

 <item
  android:id="@+id/action_search"
  android:actionViewClass="android.widget.SearchView"
  android:icon="@drawable/actionbar_search_icon"
  android:showAsAction="always|collapseActionView"
  android:title="@string/action_search"
  />
 <item
  android:id="@+id/action_add"
  android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"
  android:icon="@drawable/actionbar_add_icon"
  android:showAsAction="always"
  android:title="@string/action_add"
  />
 <!--在这里设置菜单.然后自定义一个menu -->
 <item
  android:id="@+id/action_btn01"
  android:icon="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
  android:orderInCategory="2"
  android:title="更多"
  android:showAsAction="always">
 <menu>
 <item
   android:id="@+id/action_photo"
  android:icon="@drawable/ofm_photo_icon"
  android:title="@string/action_photo"
  android:showAsAction="never"
  />
 <item
  android:id="@+id/action_connection"
  android:icon="@drawable/ofm_collect_icon"
  android:title="@string/action_connection"
  android:showAsAction="never"
  />
 <item
  android:id="@+id/action_card"
  android:icon="@drawable/ofm_card_icon"
  android:title="@string/action_card"
  android:showAsAction="never"
  />
 <item
  android:id="@+id/action_settings"
  android:icon="@drawable/ofm_setting_icon"
  android:title="@string/action_settings"
  android:showAsAction="never"
   />
 <item
  android:id="@+id/action_feed"
  android:icon="@drawable/ofm_feedback_icon"
  android:title="@string/action_feed"
  android:showAsAction="never"
  />
 </menu>
</item>
</menu>

1.android:actionViewClass="android.widget.SearchView"调用系统的搜索栏样式,
2.android:showAsAction="always|collapseActionView"使其可以铺满整个ActionBar.这样就能模仿出微信的效果了
3.再者overflow里面的带图标+title效果,需要自定义一个item包裹一个单独的menu,这样的话就不需要用代码就能实现图标+title的效果
4.android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"这个使用的ActionProvider,也就相当于自定义另一个菜单实现加号功能,而PlusActionProvider是自己单独写的一个类

/**
 *主要用于模仿微信上+号实现的菜单
 */
public class PlusActionProvider extends ActionProvider {

 private Context context;
 public PlusActionProvider(Context context) {
  super(context);
  this.context = context;
 }

 @Override
 public View onCreateActionView() {
  return null;
 }

 @Override
 public void onPrepareSubMenu(SubMenu subMenu) {
  //移除已经存在的项
  subMenu.clear();
  //为菜单添加图片和文字,并且加入监听事件
  subMenu.add(context.getString(R.string.plus_group_chat))
    .setIcon(R.drawable.ofm_group_chat_icon)
    .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  //剩下的如法炮制就好了
  subMenu.add(context.getString(R.string.plus_add_friend))
    .setIcon(R.drawable.ofm_add_icon)
    .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_video_chat))
    .setIcon(R.drawable.ofm_video_icon)
    .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_scan))
    .setIcon(R.drawable.ofm_qrcode_icon)
    .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_take_photo))
    .setIcon(R.drawable.ofm_camera_icon)
    .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
 }

 @Override
 public boolean hasSubMenu() {
  return true;
 }
}

这样的ActionBar基本实现了我们想要的功能,剩下的就差样式之类,所以修改Style.xml文件,AS里面也自带主题编辑器,暂时还没用到过,后期尝试

<resources>

 <!-- 这里可以使用官方的编译器来设置,具体还要再次学习-->
 <style name="App_Theme" parent="@android:style/Theme.Holo.Light">
  <!-- Customize your theme here. -->
  <item name="android:actionBarStyle">@style/wexinActionBar</item>
  <item name="android:itemBackground">@drawable/actionbar_bg_selector</item>
  <item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>
  <item name="android:itemTextAppearance">@style/WeChatActionBarTitleText</item>
  <item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>
 </style>

 <style name="wexinActionBar" parent="@android:style/Widget.Holo.ActionBar">
  <item name="android:background">#303537</item>
  <item name="android:titleTextStyle">@style/WeChatActionBarTitleText</item>
 </style>
 <style name="WeChatActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
  <item name="android:textColor">#cfcfcf</item>
  <item name="android:textSize">17sp</item>
 </style>

 <style name="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
  <item name="android:src">@drawable/actionbar_more_icon</item>
 </style>
</resources>

二.主界面的设计

使用PagerSlidingTabStrip+viewpager,两者会自动适配,用起来很方便.
在main_activity.xml中配置

<RelativeLayout 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"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 tools:context=".MainActivity">
 <!--引入的类似ActionBar的一个tabs开源项目 -->
 <com.astuetz.PagerSlidingTabStrip
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  app:pstsShouldExpand="true"
  android:layout_height="40dp"/>
 <android.support.v4.view.ViewPager
  android:id="@+id/pagers"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_below="@+id/tabs"
  />
</RelativeLayout>

然后建立三个fragment布局,放入到viewpager,下面举一个例子

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <TextView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:text="聊天界面"
  android:gravity="center"
  android:textSize="20sp"
  />

</FrameLayout>
public class ChatFragment extends android.support.v4.app.Fragment {

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.chatfragment_layout,container,false);
  return view;
 }
}

接下来就是在MainActivity.java中代码配置了

/**
  * tabs栏的实例
  */
 private PagerSlidingTabStrip tabs;

 /**
  * 获取当前屏幕的密度
  */
 private DisplayMetrics dm;

 /**
  * 主界面的viewpager
  */
 private ViewPager pagers;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  setOverflowShowingAlways();
  dm = getResources().getDisplayMetrics();
  pagers = (ViewPager) findViewById(R.id.pagers);
  tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
  //这个类要继承FragmentActivity才可以有这个方法
  pagers.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
  tabs.setViewPager(pagers);
  setTabValue();
 }

 /**
  * 对PagerSlidingTabStrip属性的修改
  */
 private void setTabValue(){
//  //设置tabs自动填充满整个屏幕,xml文件设置才有效果
//  tabs.setShouldExpand(true);
  //设置tabs的分割线透明
  tabs.setDividerColor(Color.TRANSPARENT);
  //设置tabs底部线的高度
  //TypedValue需要学习了解
  tabs.setUnderlineHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 1, dm));
  // 设置Tab Indicator的高度
  tabs.setIndicatorHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 4, dm));
  // 设置Tab标题文字的大小
  tabs.setTextSize((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, 16, dm));
  // 设置Tab Indicator的颜色
  tabs.setIndicatorColor(Color.parseColor("#45c01a"));
  // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
//  tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
  // 取消点击Tab时的背景色
  tabs.setTabBackground(0);
 }

可以看出来viewpager需要一个Adapter来配置其页面,而tabs需要配置viewpager,这样的话,三者就能完美的相适应.

public class ViewPagerAdapter extends FragmentPagerAdapter {

 /**
  * 聊天界面
  */
 private ChatFragment chatFragment;
 /**
  * 发现页面
  */
 private FoungFragment foundFragment;
 /**
  * 聊天界面
  */
 private ContactFragment contactFragment;

 private final String[] titles = { "聊天", "发现", "通讯录" };

 public ViewPagerAdapter(FragmentManager fm) {
  super(fm);
 }

 @Override
 public Fragment getItem(int position) {
  switch (position) {
   case 0:
    if (chatFragment == null) {
     chatFragment = new ChatFragment();
    }
    return chatFragment;
   case 1:
    if (foundFragment == null) {
     foundFragment = new FoungFragment();
    }
    return foundFragment;
   case 2:
    if (contactFragment == null) {
     contactFragment = new ContactFragment();
    }
    return contactFragment;
   default:
    return null;
  }
 }

 @Override
 public int getCount() {
  return titles.length;
 }

 @Override
 public CharSequence getPageTitle(int position) {
  return titles[position];
 }
}

本文已被整理到了《Android微信开发教程汇总》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助。

时间: 2016-01-21

Android App仿微信界面切换时Tab图标变色效果的制作方法

概述 1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标屌屌的,今天我就带大家自定义控件,带你变色变得飞起~~ 好了,下面先看下效果图: 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标颜色是可定制的,谁让现在动不动就谈个性化呢. 那么我

微信js-sdk界面操作接口用法示例

本文实例讲述了微信js-sdk界面操作接口用法.分享给大家供大家参考,具体如下: 前提已经在wx.config()中获取到接口的权限,以官方文档为准 说明: 1.目前提供的界面操作接口和使用都比较简单 2.有些好像还有点重复 3."调整字体"."投诉"这两个测试的时候无法隐藏,属于基础类 一.关闭微信浏览器窗口 wx.closeWindow() window.close()关闭微信浏览器无效,当前方法被屏蔽,在 Cordova的WebView中也是这样不可用 二.显

IOS实现微信朋友圈相册评论界面的翻转过渡动画

先来看看实现的类似效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背景,一张图片和一个查看评论的按钮: - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor];// 背景设为黑色 //

Android仿QQ、微信聊天界面长按提示框效果

先来看看效果图 如何使用 示例代码 PromptViewHelper pvHelper = new PromptViewHelper(mActivity); pvHelper.setPromptViewManager(new ChatPromptViewManager(mActivity)); pvHelper.addPrompt(holder.itemView.findViewById(R.id.textview_content)); 使用起来还是很简单的 首先new一个PromptViewH

Android高仿微信聊天界面代码分享

微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav

ViewPager 与 Fragment相结合实现微信界面实例代码

在如今的互联网时代,微信已是一个超级App.这篇通过ViewPager + Fragment实现一个类似于微信的界面,之前有用FragmentTabHost实现过类似界面,ViewPager的实现方式相对于FragmentTabHost的方式更简单明了. ViewPager: ViewPager继承自ViewGroup,是一个容器类,可以往里添加View. ViewPager的使用很简单,通过setAdapter()方法设置一个PagerAdapter即可,这个PagerAdapter需要自己写

android仿微信聊天界面 语音录制功能

本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" andro

iOS仿微信图片分享界面实现代码

分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿微信分享风格的功能. 核心思想: 主要是使用UICollectionView来动态加载分享图片内容,配合预览页面,实现动态添加和预览删除图片效果. 实现效果: 核心代码如下: 分享界面: // // PostTableViewController.h // NineShare // // Creat

JavaScript结合Bootstrap仿微信后台多图文界面管理

js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms

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

好久没更新博客了,最近在做公司的项目,这也算是我接触的第一个正式项目.通过项目的检验,发现自己积累了一年的知识还是远远不够,想要提高,好的方法是 :项目+书+视频+博客.最重要一点:勤动手.最近发现了慕课网的视频,居然都是高清无码免费的!而且满满的干货!我用业余时间跟着视频中大神的讲解学习了不少知识,下面就将这些小demo与大家分享,当然,我做了一些优化,代码与视频中有些出入,但功能可以完全实现. 这是一个模仿5.2.1版本的显示界面,如下图所示: 功能及实现思路简介 主要功能很简单: 1.上面

Android高仿微信表情输入与键盘输入详解

最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大

Android 高仿微信朋友圈动态支持双击手势放大并滑动查看图片效果

最近参与了开发一款旅行APP,其中包含实时聊天和动态评论功能,终于耗时几个月几个伙伴完成了,今天就小结一下至于实时聊天功能如果用户不多的情况可以scoket实现,如果用户万级就可以采用开源的smack + opnefile实现,也可以用mina开源+XMMP,至于怎么搭建和实现,估计目前github上一搜一大把,至于即时通讯怕误人子弟,暂且不做介绍,现就把实现的一个微信朋友圈的小功能介绍一下. 先上效果图: 一拿到主流的UI需求,大致分析下,需要我ListView嵌套Gridview,而grid

Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)

目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高斯模糊,并把它作为整个页面的背景色. 关于Android如何快速实现高斯模糊(毛玻璃效果),网上一堆相关介绍,可参考下面文章一种快速毛玻璃虚化效果实现–Android. 下面直接给出模糊化工具类(已验证可行): import android.graphics.Bitmap; /** * 快速模糊化工

Android 高仿微信支付数字键盘功能

现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android 高仿微信朋友圈拍照上传功能

模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)

android高仿微信表情输入与键盘输入代码(详细实现分析)

表情与键盘的切换输入大部分IM都会需要到,之前自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个困扰了我些时间,不过所幸在Github(其代码整体结构很不错)并且在论坛上找些解决思路,再加上研究了好几个开源项目的代码,最后终于苦逼地整合出比较不错的实现效果(这里不仅给出了实现方案,还提供一个可拓展的fragment模板以便大家实现自己的表情包)代码我已进行另外的封装与拓展,大家需要其他表情的话只需要根据fragment模板实现自己的表情界面,然后根据工厂类获取即可,实现效果

Android高仿微信对话列表滑动删除效果

前言 用过微信的都知道,微信对话列表滑动删除效果是很不错的,这个效果我们也可以有.思路其实很简单,弄个ListView,然后里面的每个item做成一个可以滑动的自定义控件即可.由于ListView是上下滑动而item是左右滑动,因此会有滑动冲突,也许你需要了解下android中点击事件的派发流程,请参考Android源码分析-点击事件派发机制.我的解决思路是这样的:重写ListView的onInterceptTouchEvent方法,在move的时候做判断,如果是左右滑动就返回false,否则返

Android 高仿微信转账金钱输入框规则

微信转账输入框规则(可能不全) 1.小数点后两位 2.起始输入小数点,显示0. 3.删除到第一个位置是小数点的时候,第一个位置为0 ,避免出现小数点在第一个位置的情况 修改这个朋友的规则而来,他的规则在保证小数点后两位有个小bug,已经修改 http://www.jb51.net/article/99361.htm 效果: @Override public CharSequence filter(CharSequence source, int start, int end, Spanned d