Android:表情输入键盘实现探索

本篇文章思路最终的实现效果还不是很完美,更好的实现方法见Android: 类似QQ、微信的表情输入键盘实现思路一文。

需求

最近在写北邮人论坛客户端时,有一个需求是实现像手机QQ、微信那样的表情输入键盘,效果图:

demo

表情键盘本身并不难做,无非就是一个带SlidingTab的ViewPager,困扰我的地方在于,如何正确处理系统软键盘与表情键盘之间的显隐关系。

Google了一下,大概有这么几种思路:

第一种:动态改变SoftInputMode

这篇博文是国内网上转载比较多的方法,软键盘显示时将SoftInputMode设置为「stateVisible|adjustResize」,表情键盘显示时调整为「adjustPan」。

但在我实际使用过程中效果并不理想,一是我需要在一个ListView的底部实现表情键盘,这样动态更改SoftInputMode会导致ListView上下跳动;二是切换到别的界面再切换回来时软键盘的显隐状态偶尔会有冲突,最终我放弃了这种方法。

第二种:Dialog

Emoticons-Keyboard这个项目的实现方法是直接在软键盘上覆盖显示一个Dialog,避开了大部分的显示逻辑操作,思路非常独特,可惜我编译运行后发现显示效果并不好,除了动画效果,最大的问题仍然是是从别的界面切换过来时,与软键盘的显示有冲突

基本思路

上面提到的两个项目给了我很大的启发,我反复尝试了微信、微博、手机QQ等应用的表情键盘逻辑,发现它们切换键盘并不会导致ListView跳动,如果没有别的什么黑科技的话,基本可以断定使用的SoftInputMode就是adjustPan。(SoftInputMode各个属性值的意义

既然是adjustPan就好说了,软键盘显示的时候不会导致ListView跳动,那么Activity的底部必然有一个跟软键盘相同高度的View被软键盘覆盖了,这个View其实就是表情输入键盘,这样点击表情按钮的时候只需要显示隐藏软键盘,背后的表情框就显示出来了。

思路有了,接下来就是梳理一下所需要的技术点:

  • 如何检测软键盘高度(用于动态设置表情键盘的高度)?
  • 在代码中如何手动显示/隐藏软键盘?
  • 如何防止从别的界面切换过来时,软键盘状态改变了有可能导致的显示冲突?

如果这三个问题解决了,需求就基本实现了。

检测软键盘的高度

直接上代码:

private int getSupportSoftInputHeight() {
    Rect r = new Rect();
    mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);
    int screenHeight = mContext.getWindow().getDecorView().getRootView().getHeight();
    int softInputHeight = screenHeight - r.bottom;
    if (Build.VERSION.SDK_INT >= 20) {
        // When SDK Level >= 20 (Android L), the softInputHeight will contain the height of softButtonsBar (if has)
        softInputHeight = softInputHeight - getSoftButtonsBarHeight();
    }
    return softInputHeight;
}

这里的原理是通过当前的Activity拿到其RootView的高度,减去Activity本身实际的高度,就等于软键盘的高度了。但在实际应用过程中发现,某些Android版本下,没有显示软键盘时减出来的高度总是144,而不是零,经过反复研究,最后发现这个高度是包括了虚拟按键栏的,所以在API Level高于18时,我们需要减去底部虚拟按键栏的高度(如果有的话)。

@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
private int getSoftButtonsBarHeight() {
    DisplayMetrics metrics = new DisplayMetrics();
    mContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int usableHeight = metrics.heightPixels;
    mContext.getWindowManager().getDefaultDisplay().getRealMetrics(metrics);
    int realHeight = metrics.heightPixels;
    if (realHeight > usableHeight) {
        return realHeight - usableHeight;
    } else {
        return 0;
    }
}

将高度设置给表情键盘就比较简单了:

LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mEmotionLayout.getLayoutParams();
linearParams.height = getSupportSoftInputHeight();

在代码中手动显示、隐藏软键盘

也是直接上代码了,这两个方法也比较容易查到:

private void showSoftInput() {
    mInputManager.showSoftInput(mEditText, 0);
}

private void hideSoftInput() {
    mInputManager.hideSoftInputFromWindow(mEditText.getWindowToken(), 0);
}

解决切换程序时的显示冲突

在默认状态(StateUnspecified)下,在程序内打开软键盘然后点击Home键或多任务键切换出去时,软键盘会收起。再次进入程序界面也不会打开,前文提到的两个项目就是在这种情况下会出现问题。如何保证软键盘和表情键盘的同步,直观反应就是监听软键盘的高度变化,查了一下,果然可以监听:

mEditText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        int softInputHeight = getSupportSoftInputHeight();
        if (softInputHeight != lastSoftInputHeight) {
            // do Something
        }
    }
});

实际测试中,这个函数在运行时会调用很多次,我们只需要在高度变化时做处理即可。

states

如上图,一共有三种状态,表情键盘的状态分别为:gone、invisible和visible。分别判断这三个状态之间的转化关系,然后动态的设置Visiblity即可:

public void onGlobalLayout() {
    int softInputHeight = getSupportSoftInputHeight();
    if (softInputHeight != lastSoftInputHeight) {
        if (softInputHeight <= 0) {
            lastSoftInputHeight = softInputHeight;
            if (!notHideEmojiLayout) {
                mEmotionLayout.setVisibility(View.GONE);
            } else {
                notHideEmojiLayout = false;
            }
        } else {
            lastSoftInputHeight = softInputHeight;
            LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mEmotionLayout.getLayoutParams();
            linearParams.height = softInputHeight;
            mEmotionLayout.setVisibility(View.INVISIBLE);
            if (linearParams.height == softInputHeight) {
                mEmotionLayout.setVisibility(View.INVISIBLE);
            } else {
                linearParams.height = softInputHeight;
            }

            sp.edit().putInt(SHARE_PREFERENCE_TAG, softInputHeight).apply();
        }
    }
}

一点小Bug

由于Android设备的多样性,软键盘高度不一致,所以需要动态的设置表情键盘的高度,然而程序在第一次软键盘弹出后才能检测到软键盘高度,但这时由于表情键盘高度与软键盘不一致,会导致显示有点异常。所以程序会将检测到的高度保存到SharedPreference中,在Activity加载时读出高度即可。

不过即使是这样,在整个程序第一次进入这个界面时还是会显示异常,暂时的解决办法是在其他软键盘弹出的页面检测一次软键盘高度

如果你有更好的办法,请留言交流~

使用JitPack发布你的Github开源库

最近从手头的一个项目中独立出一个Android的开源组件(EmotionLayoutDetector)发布到了Github上,想用Gradle来管理依赖。

一般来说,想在Android Studio使用Gradle依赖,有几种方法:

  • jCenter
  • Maven Central
  • 使用其他自定义的仓库

使用jCenter和MavenCentral的一般流程是,注册、登陆、配置参数、Build、Push、等待验证,最后才能通过,整个网站有一种上世纪的感觉,发布过程繁杂冗长,让我觉得十分不舒服。

在使用别的开源组件的过程中发现,越来越多的Github项目开始使用JitPack替代jCenter进行发布

JitPack实际上是一个自定义的Maven仓库,不过它的流程极度简化,只需要输入Github项目地址就可发布项目,大大方便了像我这种懒得配置环境的人。

发布

在网站首页输入你的Github项目地址,点击「Look up」就可发布

image1

使用

在配置中加入自定义的仓库

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

加入依赖

dependencies {
    compile 'com.github.username:Project-name:v1.0'
}

这样就行了,是不是很简单?

Android: Activity在Restore时的数据缓存问题

红米Note上频繁NullPointException

继解决了Fragment中使用getActivity()返回null的问题后,在测试中又发现,在红米Note上离开程序后从后台返回时经常Crash,错误仍然是NullPointException。。。

项目需求是要求先登录,在LoginActivity登录完毕获取到Token后,我直接用Intent传给了主界面MainActivity再进行后续操作。但是当程序后台被杀掉后再恢复时,虽然会重新执行MainActivity的onCreate(),但是Intent内的数据却不会再有,我取出Token后没有做判断就使用,于是就抛出了NullPointException。

红米系列内存比较小,App切换到后台以后极易被干掉,所以这个问题在红米Note上比较容易重现。

保存数据

错误的原因在于没有缓存Intent传入的数据,那我们就缓存一下好了。

最简单的办法莫过于写入SharedPreference了,存入取出都很方便:

SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
// 存入数据
sp.edit().putString("token", token).apply();
// 取出数据
String token = sp.getString("token", null);

但是sp只适合存放少量的数据,若需要缓存的数据稍复杂一点用sp就会很麻烦,另一种办法是用数据库缓存,但数据库缓存代码量比较大,改动也不是很方便。

其实,Android已经考虑到了这种问题,提供了一种系统级的界面缓存数据的方法,即InstanceState机制。

利用Android的InstanceState机制

我们可以看到,在Activity的onCreate()方法是带参数的:

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
}

同时,Activity还带有两个方法:onSaveInstanceState()onRestoreInstanceState():

Activity的 onSaveInstanceState() 和 onRestoreInstanceState()并不是生命周期方法。

它们不同于 onCreate()、onPause()等生命周期方法,它们并不一定会被触发。当应用遇到意外情况(如:内存不足、用户直接按Home键)由系统销毁一个Activity时,onSaveInstanceState()会被调用。

但是当用户主动去销毁一个Activity时,例如在应用中按返回键,onSaveInstanceState()就不会被调用。因为在这种情况下,用户的行为决定了不需要保存Activity的状态。

通常onSaveInstanceState()只适合用于保存一些临时性的状态,而onPause()适合用于数据的持久化保存。

因此,在InstanceState内保存数据的方法类似SP,非常简单:

@Override
public void onSaveInstanceState(Bundle savedInstanceState){
    super.onSaveInstanceState(savedInstanceState);
    savedInstanceState.putString("token", token);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState){
    super.onRestoreInstanceState(savedInstanceState);
    token = savedInstanceState.getString("token");
}

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	// 你也可以在onCreate()里恢复数据
	// 但这样做需要判断恢复的数据出来是否为null
	token = savedInstanceState.getString("token");
}

这样,在后台内存不足程序被回收时,会自动缓存数据,下次进入时自动恢复就不会抛出异常了。

参考

  1. Android开发之InstanceState详解
Android: Fragment中getActivity()返回null的问题

getActivity()返回null

在一个项目中使用了ViewPager+Fragment的组合,但是在实际使用中频繁的Crash。排查后发现,我在Fragment内有一些AsyncTask联网操作,在网络链接失败的时候会弹出Toast消息提示。而生成Toast时传入的Context参数是getActivity(),该函数返回null,于是就抛出了NullPointException:

Toast.makeText(getActivity(), "Some Message", Toast.LENGTH_LONG).show();

查阅一下Fragment的生命周期:

image1

在Fragment的生命周期中,onAttach()onDetach()之间getActivity()函数才会返回正确的对象,否则的话返回null。

因此,如果我正在做某些操作联网,在等待过程中点击Back键返回,使得这个Fragment被销毁了,这时Fragment就会和Activity解除附着(onDetach),当再试图弹出Toast的时候,getActivity()返回null,于是就Crash了。

保存Context引用

明白了问题出在哪就好解决了,常用的方法是在Fragment附着在Activity上时用一个变量保存引用,即:

@Override
public void onAttach(Activity activity){
	this.mContext = activity;
}

使用全局Application来得到Context

在每个Fragment内都用一个变量保存Context的引用确实可以满足需求,但是代码冗余了不少,更一劳永逸的办法就是使用全局Application来得到Context。

Android程序中Application、Service和Activity都实现了Context,但只有Application才能保证在程序运行期间一直存在并且具有唯一性,因此在程序中可以使用Application来获得Context而不用担心空指针。

首先在manifest文件中注册Application

<application
	android:name=".MyApplication"
	android:icon="@drawable/ic_launcher"
	android:label="@string/app_name" >

然后创建MyApplication.java,我们在这里使用单例模式来对外保持Application的引用

public class MyApplication extends Application {
	private static MyApplication instance;

	@Override
	public void onCreate() {
		super.onCreate();
		instance = this;
	}

	public static MyApplication getInstance(){
		// 这里不用判断instance是否为空
		return instance;
	}
}

这样在程序的任何地方都可以使用Application来得到Context了。

Context context = MyApplication.getInstance();
Toast.makeText(context, "Your Toast Message", Toast.SHORT_TOAST).show();

参考

  1. Android Fragment 生命周期
  2. Android应用程序的Activity启动过程简要介绍
Mac OSX:Powerline风格的zsh配置

image1

上图就是效果图啦,是不是很炫,配置教程如下:

需要的工具

  1. iTerm,一个替代OSX自带终端的软件,基于iTerm才能实现上面的效果;
  2. oh-my-zsh,zsh是OSX上最强大的shell,没有之一,但是配置过程较为复杂,这个脚本能够帮你一键配置。
  3. powerline主题,基于oh-my-zsh的主题,也就是上面的效果了。

iTerm

目前最新版本是iTerm2,下载地址http://iterm2.com/,这个没什么好说的,解压以后扔到Application里,然后你就可以把系统自带的终端从Dock栏移除了~

oh-my-zsh

手动安装前需要先安装git,这里就不说了,Google一下即可。

然后安装oh-my-zsh,执行这个自动安装脚本:

https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh

或者使用手动安装:

git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
cp ~/.oh-my-zsh/tmplates/zshrc.zsh-template ~/.zshrc

都不是很复杂,安装完成后会打开终端(iTerm)窗口,不过这个时候终端貌似还不是很好看,因为它使用的是自带的主题,下一步我们就要换上高大上的Powerline主题了

Powerline 主题

同样的有两种安装方法,自动安装脚本:

git clone git://github.com/jeremyFreeAgent/oh-my-zsh-powerline-theme ~/.ohmyzsh-powerline
cd ~/.ohmyzsh-powerline
./install_in_omz.sh

自动安装脚本的原理是git clone下来这个项目,然后在oh-my-zsh的theme文件夹内创建了一个符号链接,实际上我们可以直接将主题文件放进theme包里,不用留着~/.ohmyzsh-powerline这个文件夹,如果你希望这么做,则可以手动下载zip包,将powerline.zsh-theme放入~/.oh-my-zsh/themes/内,也可以执行下面的脚本。

git clone git://github.com/jeremyFreeAgent/oh-my-zsh-powerline-theme ~/.ohmyzsh-powerline
cd ~/.ohmyzsh-powerline
cp powerline.zsh-theme ~/.oh-my-zsh/themes/powerline.zsh-theme
rm -rf ~/.ohmyzsh-powerline

然后打开~/.zshrc,将ZSH_THEME=”robbyrussell”改为ZSH_THEME=”powerline”就更换了主题,重启iTerm,就能看到效果了

配置Powerline

现在的Powerline主题已经有一点雏形了,还有一点点问题。

  1. 为了显示Powerline风格,它使用了一些特殊符号来显示箭头,系统自带的字体并不支持,所以需要手动下载别人打包好的字体,下载地址是http://github.com/powerline/fonts,执行里面的install.sh,然后在iTerm的设置里选中你喜欢的字体即可。

  2. 默认的颜色看起来有点奇怪,我们可以调整一下iTerm对ANSI颜色的实现颜色,我在这里修改了一下背景颜色和蓝色,更改了一下字号等等。

image1

最后就大功告成了!