最近好久没有更新博文，一则是因为公司最近比较忙，另外自己在Android学习过程和简易版微信的开发过程中碰到了一些绊脚石，所以最近一直在学习充电中。下面来列举一下自己所走过的弯路：
（1）本来打算前端（即客户端）和后端（即服务端）都由自己实现，后来发现服务端已经有成熟的程序可以使用，如基于XMPP协议的OpenFire服务器程序；客户端也已经有成熟的框架供我们使用，如Smack，同样基于XMPP协议。这一系列笔记式文章主要是记录自己学习Android开发的过程，为突出重点（Android的学习），故使用开源框架OpenStack + Smack组合。而且开源框架肯定比你自己一个人写出来的要好得多。
（2）对于Android初学者来说，自定义控件是一道坎，需要花大量时间去学习和尝试。之前楼主也一直没有接触过自定义控件，所以在这段时间也做了初步的学习和尝试。
下面我们首先对XMPP做一个简单的介绍，并利用Smake框架改写客户端的登陆和注册功能；接着实现主界面UI界面和初步交互。
1 XMPP协议简介
多台计算机通过传输媒介（如：光纤、双绞线、同轴电缆等）连接和传输信息，这是计算机网络的硬件层；多台计算机之间需要传送信息，从一台计算机到另一台计算机或从一台计算机到多台计算机，这就要定一个规则，这个规则就是协议，这是计算机网络的软件层。对软件开发者来说，我们几乎无需研究连接介质，但需要了解协议，其中最重要的计算机互联协议便是因特网的基础——TCP/IP协议族。对底层系统开发者而言，需要关心底层的TCP协议、IP协议、UDP协议、CDMA/CD协议等应用无关的通用协议的实现；对应用软件开发者而言，只需要了解底层协议，需要认真研究的是应用层协议，如：HTTP协议、FTP协议、SMTP协议等。
HTTP（S）协议应该是最常见的应用层协议了，Web服务器和Web应用程序客户端（即浏览器）之间通信的规则就是由这个协议规定的。HTTP的服务器有Apache、Nginx、IIS或自己写的HTTP服务器（如果你很牛的话）等；HTTP协议的客户端就是浏览器或自己写的HTTP客户端解析程序（借助于开源Http库），负责解析服务端发过来的HTML、CSS、JavaScript或其他内容，并向服务器发送请求数据。
和HTTP协议一样，XMPP是即时通信应用层协议，定义了即时通信客户端与服务器端的数据传输格式及各字段的含义。XMPP协议有很多服务器端程序和客户端程序（库）的实现，本系列博文使用的OpenFire就是XMPP协议服务器程序的Java实现，Smack是客户端库，这些程序（库）都是开源的。OpenFire可以直接下载二进制包安装，也可以下载源代码、然后用Eclipse编译之后运行。只要部署好OpenFire服务器之后，基本就不用管它了。对于Smock客户端程序库，如果使用Android Studio的话，根据github说明，配置gradle文件即可。
有了OpenFire服务器和Smack客户端，实现简易版微信应用就简单多了，我们不再需要编写服务端逻辑，也不需要定义和服务端交互的命令格式，只需要实现和Smack类库的交互逻辑以及界面显示逻辑即可。整个APP的结构如下：
关于XMPP协议的介绍就暂时说这一些，在开发过程中结合具体需求再做进一步深入。其实，我们也无需了解太多，因为OpenFire和Smack都已经封装的很好了，只需要了解一些最基本概念就足够了。
2 登陆、注册的重新实现
客户端的实现主要是基于Smock第三方程序库。使用Smack库来进行客户端逻辑的编写，第一件事就是建立一个XMPP连接，所以首先学习的是建立连接的类——XMPPConnection，其实这是一个接口，其实现类继承体系结构如下：
接触到的第一个方法就是建立XMPP连接的方法，签名如下：
public AbstractXMPPConnection connect()
throws SmackException,
IOException,
XMPPException
下面的代码片段可以建立一个到OpenFire服务器的XMPP连接：
// Create a connection to the igniterealtime.org XMPP server.
XMPPTCPConnection con = new XMPPTCPConnection("igniterealtime.org");
// Connect to the server
con.connect();
一般来说，连接只需要建立一次即可，可以使用单例模式来实现，为此写了XMPPConnectionManager类来创建和管理连接：
/**
* Single instance, for manage XMPP connection.
*/
public class XMPPConnectionManager { private static AbstractXMPPConnection mInstance;
private static String HOST_ADDRESS = "192.168.1.111";
private static String HOST_NAME = "doll-pc";
private static int PORT = 5222; public static AbstractXMPPConnection getInstance() {
if (mInstance == null) {
openConnection();
}
return mInstance;
} private static boolean openConnection() {
XMPPTCPConnectionConfiguration config = XMPPTCPConnectionConfiguration.builder()
.setHost(HOST_ADDRESS)
.setPort(PORT)
.setServiceName(HOST_ADDRESS)
.setDebuggerEnabled(true)
.setSecurityMode(ConnectionConfiguration.SecurityMode.disabled)
.build();
mInstance = new XMPPTCPConnection(config);
try {
mInstance.connect();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
}
这样，一旦需要使用XMPP连接，只需要调用XMPPConnectionManager的getInstance方法即可。
2.1 登陆功能
有了XMPP连接，登陆功能就变得十分简单了，只需要调用AbstractXMPPConnection的成员方法login，传入用户名密码即可，这样实现用户登录的异步任务如下：
public class LoginAsyncTask extends AsyncTask<String, Void, Boolean> {
private ProgressDialog mDialog;
private Context mContext;
public LoginAsyncTask(Context context) {
mDialog = new ProgressDialog(context);
mDialog.setTitle("提示信息");
mDialog.setMessage("正在登录，请稍等...");
mDialog.show();
mContext = context;
}
@Override
protected void onPreExecute() {
super.onPreExecute();
if (!mDialog.isShowing()) {
mDialog.show();
}
}
@Override
protected Boolean doInBackground(String... params) {
AbstractXMPPConnection connection = XMPPConnectionManager.getInstance();
try {
connection.login(params[0], params[1]);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
@Override
protected void onPostExecute(Boolean result) {
super.onPostExecute(result);
if (mDialog.isShowing()) mDialog.dismiss();
if (result) {
// jump to the Main page
Intent intent = new Intent(mContext, MainActivity.class);
mContext.startActivity(intent);
} else {
Toast.makeText(mContext, "登录失败!", Toast.LENGTH_LONG).show();
}
}
}
在点击登录按钮监听器的回调函数中实例化上述异步任务，传入用户名和密码字符串数组，如下：
mLoginButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("OnClick", "Enter the click callback of Login Button");
String params[] = new String[2];
params[0] = mEditTextUserName.getText().toString().trim();
params[1] = mEditTextPassword.getText().toString().trim();
new LoginAsyncTask(LoginActivity.this).execute(params);
}
});
短短的几行代码，便实现了登录的基本功能。
2.2 注册功能
注册功能的实现也非常简单，这里用到了AccountManager类来实现注册，注意这是一个单例。下述代码实现了注册的异步任务调用：
public class RegisterAsyncTask extends AsyncTask<String, Void, Boolean> {
private ProgressDialog mDialog;
private Context mContext;
public RegisterAsyncTask(Context context) {
mDialog = new ProgressDialog(context);
mDialog.setTitle("提示信息");
mDialog.setMessage("正在注册，请稍等...");
mContext = context;
}
@Override
protected void onPreExecute() {
super.onPreExecute();
if (!mDialog.isShowing()) {
mDialog.show();
}
}
@Override
protected Boolean doInBackground(String... params) {
AbstractXMPPConnection connection = XMPPConnectionManager.getInstance();
AccountManager ac = AccountManager.getInstance(connection);
try {
ac.createAccount(params[0], params[1]);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
@Override
protected void onPostExecute(Boolean result) {
super.onPostExecute(result);
if (mDialog.isShowing()) mDialog.dismiss();
if (result) {
// jump to Main page
Intent intent = new Intent(mContext, MainActivity.class);
mContext.startActivity(intent);
} else {
Toast.makeText(mContext, "注册失败!", Toast.LENGTH_LONG).show();
}
}
}
同样，在RegisterActivity中注册相应监听器，代码如下：
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_press_register:
String [] params = new String[3];
params[0] = mEditTxtPhoneNumber.getText().toString().trim();
params[1] = mEdtTxtPassword.getText().toString().trim();
params[2] = mEdtTxtNickName.getText().toString().trim(); try {
new RegisterAsyncTask(this).execute(params);
} catch (Exception e) {
e.printStackTrace();
}
break;
}
}
3 登陆后主界面
下面正式进入本篇博文的主体内容——登录后主界面的UI显示与基本交互逻辑。首先来看看登陆后的主界面UI的运行效果，基本和微信是一样的：
主界面分为三个部分，分别为顶部的ActionBar（也可以用ToolBar）、底部的标签导航Tab Navigation、以及中间的主体内容部分，如下图所示：
接下来的三个小节，我们就分别来介绍这三个部分的具体实现。由于内容较多，关于一些很基础的内容，介绍的可能会比较简单。
3.1 顶部的ActionBar
现在所有App的顶部都会有一个Action Bar，直译就是操作条，这是在Android SDK 3.0引入的。在Android SDK 5.0中，为了使用更为灵活，谷歌又提供了更为灵活的Toolbar，直译为工具条。无论是ActionBar还是ToolBar，其主要是提供选项菜单菜单，供用户点击触发执行相应操作，类似于Windows应用程序中的工具栏。除此之外，Action Bar还支持回退操作、Logo和Title显示、添加Spinner下拉式导航等功能，详细内容请参考谷歌官方文档，这一小节我们只关注本文实现所用到的一些知识点：
1. 如何得到ActionBar实例
为了使用ActionBar，首先要得到其实例。Action Bar的实例不能由我们直接new出来；也不是声明在布局文件中，所以不能通过findViewById的方式获得Action Bar的实例。要想在Activity中得到ActionBar的实例，必须让我们的Activity继承自AppCompatActivity或ActionActivity类（这应该是ActionBar最不灵活的地方之一），这两个类中都一提供一个方法：getSupportActionBar，来获取该Activity中ActionBar的实例。对，就这么简单，也就是这一句代码：
mActionBar = getSupportActionBar();
2. 如何为ActionBar设置属性值
通过上一点，我们可以知道ActionBar实例是由系统为我们生成好的，那么Action Bar中显示哪些内容、怎么显示这些内容，都是由系统根据一定规则确定的，那么该如何将我们需要的值设置给ActionBar呢？这里主要有两种方式：
（I）在Activity的onCreate中设置
这一方式是通过ActionBar的API来设置Action Bar的属性，例如标题、子标题、Logo、Icon、回退按钮等，上述主界面中，通过API可以设置ActionBar标题，如下：
mActionBar.setTitle(getResources().getString(R.string.string_wechat));
（II）在配置文件中指定
通过ActionBar的API，我们可以可以设置一些部分数据，但这些数据如何在ActionBar中展示，则需要在style.xml文件中来定义；另外菜单项的定义也需要通过配置文件（也可以称为资源文件）来指定。首先，我们先来说说菜单的使用。
对于初学者来说，也许会觉得Android中菜单（Menu）涉及的内容似乎很多，就分类来说就有三种：选项菜单、上下文菜单和弹出式菜单。但其实这些菜单的使用基本是一样的。包括两个步骤：
（1）在res/menu目录下添加菜单声明文件；
（2）在Activity相应回调方法中将对应声明文件inflate出来，另外在Activity中也可以重写相应回调函数中，以实现各菜单项的想赢。
这部分的细节请参考谷歌的Android开发文档，上面对menu的介绍十分详细，本小节只阐述ActionBar中用到的选项菜单。
正如刚才所说，所有菜单的使用都分两步走，下面来看看选项菜单的这两步是怎么走的：
- 定义菜单资源文件
先贴上本文所使用的选项菜单声明文件代码，然后分析其含义：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"> <item
android:id="@+id/menu_main_activity_search"
android:icon="@mipmap/icon_menu_search"
android:title="@string/string_search"
app:showAsAction="always"
/> <item
android:icon="@mipmap/ic_group_chat"
android:title="@string/string_group_chat"
app:showAsAction="never"
/> <item
android:icon="@mipmap/icon_sub_menu_add"
android:title="@string/string_add_friend"
app:showAsAction="never"
/> <item
android:icon="@mipmap/ic_scan"
android:title="@string/string_scaning"
app:showAsAction="never"
/> <item
android:icon="@mipmap/ic_pay"
android:title="@string/string_make_pay"
app:showAsAction="never"
/> <item
android:icon="@mipmap/ic_helper"
android:title="@string/string_help"
app:showAsAction="never"
/> </menu>
这个文件就两类结点——menu节点和item节点，其中menu节点相当于item结点的容器，这没有什么可以多说的；各菜单项数据在item节点中定义，item节点中前三个属性——id、icon、title——分别是标识符、图标和标题，如下图所示
showAsAction用来指定该菜单项是出现在ActionBar上还是出现在弹出菜单上，属性值可以设置为以下四种或它们的组合：
a) always：始终出现在ActionBar上；
b) never：永远不出现在ActionBar上，只出现在弹出的浮动菜单上；
c) ifRoom：如果ActionBar上有空间，则显示在ActionBar上，否则显示在弹出菜单上；
d) withText：前三个用于指定显示位置的，这个则用于指定是否显示标题的，如果带上此标签，则显示标题，否则不显示。
- Activity中inflate上述定义的文件
其实menu的使用和UI布局是一模一样的：对UI布局来说，第一步也是在资源文件xml中声明UI布局，第二步则是在Activity的onCreate中将声明的UI布局inflate出来，并设置View的监听事件；菜单也一样，第一步就是如上面所说的定义menu菜单资源，第二步也是在Activity的onCreateOptionsMenu回调函数中inflate资源文件，代码如下：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
setMenuIconVisible(menu, true);
getMenuInflater().inflate(R.menu.menu_main_activity, menu);
return super.onCreateOptionsMenu(menu);
}
上述代码中，除了第4行inflate菜单资源外，还在第3行的函数调用中设置了菜单图标的可见性。这是因为在高版本的Android SDK中，默认情况下溢出菜单中的菜单项只显示菜单标题（title），而不显示图标（icon），要想将图标显示出来，只能通过反射的方式，具体逻辑如下：
private void setMenuIconVisible(Menu menu, boolean visible) {
try {
Class<?> clazz = Class.forName("android.support.v7.view.menu.MenuBuilder");
Method method = clazz.getDeclaredMethod("setOptionalIconsVisible", boolean.class);
method.setAccessible(true);
method.invoke(menu, visible);
} catch (Exception e) {
e.printStackTrace();
}
}
经过了上述两步，便实现在Action Bar上显示选项菜单的功能。到此为止，我们以及将所需的数据统统都告诉系统了，系统会根据相应的主题和样式来显示ActionBar和溢出菜单项。当然，这些系统的主题或样式不一定符合我们的需求，所以需要对其进行重新定义。
关于Android的主题和样式，这也是一个比较宽泛的话题，作用相当于Web前端开发中的CSS。这一小节楼主就根据自己的理解作一个简单地说明：所谓样式，就是将UI布局文件View视图中的部分属性抽出来，定义在style.xml文件中，在UI布局文件中，通过android:style来引用style.xml中的相关条目；所谓主题，相当于样式的集合，用于控制整个App或某个Activity的样式。Android中内置了许许多多样式和主题，我们初学者最好能对其有一个大致的认识，在这里推荐两篇比较好的博文：
http://www.cnblogs.com/qianxudetianxia/p/3725466.html
http://www.cnblogs.com/qianxudetianxia/p/3996020.html
这两篇博文对常用的系统样式和主题做了归类和整理，虽然有点老，但还是值得一看的。简易版微信的主题继承自Theme.AppCompat.Light.DarkActionBar：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
下面我们来看看这里重写的样式吧：
a) 修改顶部StatusBar的背景色
目前找到两种方式：
① 修改样式中的colorPrimaryDark，将其改为你需要的颜色，即：
<item name="colorPrimaryDark">your color</item>
② 修改android:statusBarColor，即：
<item name="android:statusBarColor">your color</item>
b) 修改Action Bar相关的属性
① 修改ActionBar的背景色
同样有两种方式：1）修改样式中的colorPrimary，设置为你需要的ActionBar背景色；2）单独设置ActionBar的背景色。为了不改变ActionBar的其他属性的样式，可以通过继承系统的ActionBar样式，如本文中定义ActionBar的背景色如下：
<style name="ActionBar" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="background">@color/colorActionBarBackground</item>
<item name="android:background">@color/colorActionBarBackground</item>
</style>
然后将此样式设置给actionBarStyle，如下：
<item name="actionBarStyle">@style/ActionBar</item>
<item name="android:actionBarStyle">@style/ActionBar</item>
② 修改溢出菜单按钮的图标
溢出菜单按钮本质就是一个ImageButton，改变其图标可以通过修改相应样式中的src属性来实现，同样要继承系统的样式，具体定义样式如下：
<style name="ActionButton.Overflow" parent="android:Widget.Holo.ActionButton.Overflow">
<item name="android:src">@mipmap/icon_menu_add</item>
<item name="android:padding">10dip</item>
<item name="android:scaleType">fitCenter</item>
</style>
将此样式设置给actionOverflowButtonStyle，如下：
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
③ 溢出菜单样式
- 菜单文本颜色修改
修改菜单文本颜色样式如下：
<style name="TextAppearance.PopupMenu" parent="android:TextAppearance.Holo.Widget.PopupMenu">
<item name="android:textColor">@android:color/white</item>
</style>
并将上述样式赋值给android:textAppearanceLargePopupMenu，即：
<item name="android:textAppearanceLargePopupMenu">@style/TextAppearance.PopupMenu</item>
- 菜单弹出位置修改
修改溢出菜单的弹出位置，使其弹出来的时候，位于ActionBar之下的样式如下：
<style name="PopupMenu.Overflow" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
</style>
并将此样式赋值给主题中的popupMenuStyle，如下：
<item name="popupMenuStyle">@style/PopupMenu.Toolbar</item>
<item name="android:popupMenuStyle">@style/PopupMenu.Toolbar</item>
这里我们还可以设置弹出菜单的左右偏移（dropdownHorizontalOffset）和上下偏移（dropdownVerticalOffset），但是设置这两个属性时，必须先设置overlapAnchor为false。
3.2 可滑动的Tab页实现
这部分采用的是ViewPager + Fragment的方式实现，即用Fragment填充ViewPager，下面进行详细介绍：
第一步：先在UI布局文件中添加ViewPager：
<android.support.v4.view.ViewPager
android:id="@+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
第二步：获取ViewPager实例，并设置适配器Adapter和设置当前显示页面索引：
mMainViewPager = (ViewPager) this.findViewById(R.id.mainViewPager);
mMainViewPager.setAdapter(new MainPagerFragmentAdapter(fragments, getSupportFragmentManager()));
mMainViewPager.setCurrentItem(0);
第三步： Fragment列表
Fragment，直译过来就是片段，是从Android 3.0 SDK引入的，主要用于平板开发，当然手机客户端也是可以使用的。Fragment相当于一个子Activity，有它自己的UI布局，也有生命周期，也可以像Activity那样为View添加事件响应函数。通过Fragment，可以使UI的复用性更好，逻辑代码分布更合理。
我们的微信主界面的每个Tab页，都是一个Fragment。每个Fragment展示其对应的UI布局，每个Fragment有其自己的逻辑。和Activity的使用类似，要想给Fragment设置UI，需要继承Fragment，重写onCreateView来设置需要显示的UI，例如“发现”页面的Fragment子类如下：
public class DiscoveryFragment extends Fragment {
public static DiscoveryFragment newInstance() {
DiscoveryFragment fragment = new DiscoveryFragment();
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_discovery, container, false);
}
}
现在没写实现逻辑，所以四个Fragment的实现大同小异，其余的Fragment就不做阐述了。
Fragment列表获取很简单，就是通过newInstance方法获得各Fragment实例，注意Fragment的顺序，代码如下：
private List<Fragment> GetFragments() {
List<Fragment> fragments = new ArrayList<>();
ChattingFragment chattingFragment = ChattingFragment.newInstance();
fragments.add(chattingFragment);
ContactFragment contactFragment = ContactFragment.newInstance();
fragments.add(contactFragment);
DiscoveryFragment discoveryFragment = DiscoveryFragment.newInstance();
fragments.add(discoveryFragment);
MyselfFragment myselfFragment = MyselfFragment.newInstance();
fragments.add(myselfFragment);
return fragments;
}
3.3 底部导航条的实现
1. 自定义View显示图标和文本
微信的底部导航条其实还是蛮复杂的，它不是图片（ImageView）+文字（TextView）的简单组合，然后均匀分布在一个LinearLayout中。因为当ViewPager滑动时，图标和文字的透明度不断改变的，所以需要用自定义View来实现颜色的实时变化。
1) 自定义View的第一步当然是继承View类：
public class ChangeColorIconWithTextView extends View
2) 在构造函数中获取用户提供的样式
这个对初学者来说有点复杂，分两小步：
① 控件自定义属性的声明
<attr name="tab_icon" format="reference" />
<attr name="tab_icon_inactive" format="reference" />
<attr name="text" format="string" />
<attr name="text_size" format="dimension" />
<attr name="icon_color" format="color" /> <declare-styleable name="ChangeColorIconView">
<attr name="tab_icon" />
<attr name="tab_icon_inactive" />
<attr name="text" />
<attr name="text_size" />
<attr name="icon_color" />
</declare-styleable>
使用此View时，用户可以为其指定5个属性，那在View中怎么获取这五个属性值呢？
② 获取属性值
在构造函数中获取，具体代码如下：
// Obtain the styled attribute from context
TypedArray typedArray = context.obtainStyledAttributes(
attrs, R.styleable.ChangeColorIconView); // traverse the obtained return value.
int n = typedArray.getIndexCount();
for (int i = 0; i < n; ++i) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.ChangeColorIconView_tab_icon:
BitmapDrawable drawable = (BitmapDrawable) typedArray.getDrawable(attr);
mIconBitmap = drawable.getBitmap();
break;
case R.styleable.ChangeColorIconView_text:
mText = typedArray.getString(attr);
break;
case R.styleable.ChangeColorIconView_text_size:
mTextSize = (int) typedArray.getDimension(attr, 12);
break;
case R.styleable.ChangeColorIconView_icon_color:
mIconColor = typedArray.getColor(attr,
context.getResources().getColor(R.color.colorPrimary));
break;
case R.styleable.ChangeColorIconView_tab_icon_inactive:
BitmapDrawable d = (BitmapDrawable) typedArray.getDrawable(attr);
mIconBitmapInActive = d.getBitmap();
break;
}
}
typedArray.recycle();
可以看到，通过Context获得TypedArray实例，然后逐一遍历，选择需要的属性值即可。这部分涉及的东西很多，本人功力还不够深厚，还需要慢慢深入，Android SDK里就是这么做的。
③ 重写onMeasure方法
自定义View，一般需要重写onMeasure和onDraw方法，有时也需要重写onLayout方法。其中，onMeasure方法用于测量待绘制的视图；onDraw方法用于往Canvas方法绘制视图；onLayout则用于布局视图，一般不需要重写。
下面来看看ChangeColorIconWithTextView的onMeasure的实现，已知条件如下图：
自定义View要绘制两部分内容：图标Icon和文本，并且一旦图标绘制区域确定了，文本的绘制区域也就定了，因此onMeasure阶段的任务就是确定图标的绘制区域——一个正方形区域Rect。根据上图，不难得到下述代码：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // determine the size of icon - a rect
int bitmapWidth = Math.min(
getMeasuredWidth() - getPaddingLeft() - getPaddingRight(),
getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - mTextBound.height()); int left = getMeasuredWidth() / 2 - bitmapWidth / 2;
int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth / 2; mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth);
}
这段代码首先求出图片所在区域的边长，接着根据边长，可以很容易求出绘制区域的left坐标，同时right坐标也就确定了；注意top或bottom坐标在求解时需要减去文本部分的高度。可以看到整个onMeasure函数还是比较简单的。
④ 重写onDraw方法
这一步就是将图标以及文本绘制到Canvas的指定区域上，需要注意的是这里要绘制两层图像——底层图像和上层图像——并且，这两层图像之间按照一定的比例融合，融合系数（透明度Alpha）根据ViewPager中，页面所在位置而定，这一系数可以由外部提供。下面来看看绘制部分的代码：
@Override
protected void onDraw(Canvas canvas) { // clear the old icon.
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.XOR); // draw an icon on the canvas
int foregroundAlpha = (int) (mIconAlpha * 255);
int backgroundAlpha = 255 - foregroundAlpha; drawBaseLayer(canvas, backgroundAlpha);
drawUpperLayer(canvas, foregroundAlpha);
}
第一步：清空Canvas，为绘制做准备；
第二步：根据外部传入的透明度系数，求出上下层的Alpha系数；
第三步：绘制底层图像和上层图像。
其中，绘制底层图像代码如下：
private void drawBaseLayer(Canvas canvas, int alpha) {
// draw icon
mPaint.setAlpha(alpha);
canvas.drawBitmap(mIconBitmapInActive, null, mIconRect, mPaint);
// draw text
mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
mPaint.setAlpha(alpha);
canvas.drawText(mText, mIconRect.centerX() - mTextBound.width() / 2,
mIconRect.bottom + mTextBound.height(), mPaint);
}
前两行代码是根据onMeasure阶段得到的Rect区域往Canvas上绘制Icon位图；后三句代码是根据指定颜色绘制文本。绘制上层图像的方法是类似的，只不过颜色和位图资源不同。至此，可以改变透明度的Icon就做好了。当然，我们的ChangeColorIconWithTextView需要提供一个Set透明度的方法，如下：
public void setIconAlpha(double iconAlpha) {
mIconAlpha = iconAlpha;
invalidate();
}
设置了透明度后，调用invalidate函数，强制重绘。
2. 底部导航的实现
第一步：首先在UI布局文件中添加四个ChangeColorIconWithTextView，放在一个水平的LinearLayout中均匀排列：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"> <com.doll.mychat.widget.ChangeColorIconWithTextView
android:id="@+id/nav_tab_record"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="5dp"
app:tab_icon="@mipmap/icon_chat_main_nav_active"
app:tab_icon_inactive="@mipmap/icon_chat_main_nav_tab_inactive"
app:icon_color="@color/colorPrimary"
app:text="@string/string_nav_tab_wechat"
app:text_size="12sp"
/> <com.doll.mychat.widget.ChangeColorIconWithTextView
android:id="@+id/nav_tab_contact"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="5dp"
app:tab_icon="@mipmap/icon_contact_main_nav_active"
app:tab_icon_inactive="@mipmap/icon_contact_main_nav_inactive"
app:icon_color="@color/colorPrimary"
app:text="@string/string_nav_tab_contact"
app:text_size="12sp"
/> <com.doll.mychat.widget.ChangeColorIconWithTextView
android:id="@+id/nav_tab_discovery"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="5dp"
app:tab_icon="@mipmap/icon_discovery_main_nav_active"
app:tab_icon_inactive="@mipmap/icon_discovery_main_nav_inactive"
app:icon_color="@color/colorPrimary"
app:text="@string/string_nav_bar_discovery"
app:text_size="12sp"
/> <com.doll.mychat.widget.ChangeColorIconWithTextView
android:id="@+id/nav_tab_myself"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
app:tab_icon="@mipmap/icon_myself_main_nav_active"
app:tab_icon_inactive="@mipmap/icon_myself_main_nav_inactive"
app:icon_color="@color/colorPrimary"
app:text="@string/string_nav_tab_myself"
app:text_size="12sp"
/> </LinearLayout>
第二步：获取ChangeColorIconWithTextView的实例，存放在一个容器中，以便ViewPager滑动时设置透明度，并为其添加点击事件回调函数：
private void initTabIndicator() {
ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(
R.id.nav_tab_record);
ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(
R.id.nav_tab_contact);
ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(
R.id.nav_tab_discovery);
ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(
R.id.nav_tab_myself);
mTabList.add(one);
mTabList.add(two);
mTabList.add(three);
mTabList.add(four);
one.setOnClickListener(this);
two.setOnClickListener(this);
three.setOnClickListener(this);
four.setOnClickListener(this);
one.setIconAlpha(1.0f);
}
点击事件回调函数如下：
@Override
public void onClick(View v) { deselectAllTabs(); switch (v.getId()) {
case R.id.nav_tab_record:
selectTab(0);
break;
case R.id.nav_tab_contact:
selectTab(1);
break;
case R.id.nav_tab_discovery:
selectTab(2);
break;
case R.id.nav_tab_myself:
selectTab(3);
break;
}
} private void selectTab(int tabIndex) {
mTabList.get(tabIndex).setIconAlpha(1.0);
mMainViewPager.setCurrentItem(tabIndex);
} private void deselectAllTabs() {
for (ChangeColorIconWithTextView v : mTabList) {
v.setIconAlpha(0.0);
}
}
第三步：添加ViewPager滑动时的回调函数：
mMainViewPager.clearOnPageChangeListeners();
mMainViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset > 0) {
mTabList.get(position).setIconAlpha(1 - positionOffset);
mTabList.get(position + 1).setIconAlpha(positionOffset);
}
} @Override
public void onPageSelected(int position) {} @Override
public void onPageScrollStateChanged(int state) {}
});
这样，一旦ViewPager滑动，便会触发ChangeColorIconWithTextView更新透明度，并重绘图像，从而实现滑动ViewPager时透明度实时改变的效果。
4 总结
这一次学习笔记中，记录的内容有点杂，毕竟是楼主苦练20多天之后的一些学习成果（当然平时要上班的哈，其实也就周末学学）。我们首先简单介绍了XMPP及其开源实现Openfire + Smack，并使用Smack三方库来改写了客户端登陆、注册功能的逻辑；接着实现了简易版微信的主界面，逐一介绍了ActionBar、ViewPager + Fragment和底部导航。介绍ActionBar时，引入了在系统Style的基础上自定义Style，实现系统组件的定制；实现底部导航时，介绍了自定义控件的基本实现步骤。
虽然这些东西看着不难，但是作为初学者，从头到尾一步步走下来还是需要一些精力的，尤其是Android的碎片化问题，有些问题更是让初学者一时摸不着头脑。不过没事，一点点学SDK文档、源代码和互联网资料，一点点敲代码，总有一天能够学会很多的，下次学习笔记讲介绍好友的添加及好友列表的显示！