仿QQ聊天界面文字过长显示

简介: 前言最近一直在做聊天功能,有群聊,有单聊,没有集成第三方SDK(例如环信)。从收到消息推送、插入数据库、到界面显示全是我们自己做的,在这个过程中碰到了很多问题,例如消息同步、前后台切换、界面刷新频率、收到上报等很多细节问题。

前言

最近一直在做聊天功能,有群聊,有单聊,没有集成第三方SDK(例如环信)。从收到消息推送、插入数据库、到界面显示全是我们自己做的,在这个过程中碰到了很多问题,例如消息同步、前后台切换、界面刷新频率、收到上报等很多细节问题。

在做聊天列表界面时,如果跟你聊天的这个人是陌生人,需要在用户名字后面加一个陌生人的标签。这个标签必须要跟在名字的后面,这种情况用LinearLayout或者RelativeLayout布局都能实现,问题来了,如果名字过长的话,名字会占满一行,陌生人标签干脆不显示。

在聊天详细界面也碰到了同样的问题,如果某条聊天内容过长,并且这条消息还发送失败的话,需要在消息的左边显示重发按钮。

这两个问题其实就是一个问题,只是界面不一样而已,仔细想了想SDK为我们提供的几种常用局部,发现都不能实现我需要的效果。于是就只能通过自定义ViewGroup实现了。

先看效果图:

自定义ViewGroup步骤

  • 最少需要重写两个构造方法
  • 一般都需要重写两个方法,onMeasure(测量自己跟子View的宽高)跟onLayout(确定子View显示位置)
  • 如果需要处理子View的边距等,需要重写generateLayoutParams方法。

上代码

因为需要判断是左边还是右边,所以得自定义属性,新建attrs.xml文件,增加如下代码,attr有两个值,left跟right用来决定左边还是右边:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="sigleLine">
 <attr name="gravity">
 <flag name="left" value="1"/>
 <flag name="right" value="2"/>
 </attr>
 </declare-styleable>
</resources>

新建MySingleLineLayout类,继承自ViewGroup,重写两个构造方法,第一个构造方法调用this,就是调用第二个,然后在第二个构造方法中获取自定义属性的值:

public class MySingleLineLayout extends ViewGroup {
 public static final int LEFT = 1;
 public static final int RIGHT = 2;
 private int gravity;
 public MySingleLineLayout(Context context) {
 this(context,null);
 }
 public MySingleLineLayout(Context context, AttributeSet attrs) {
 super(context, attrs);
 //获取自定义属性的值
 TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.sigleLine);
 gravity=typedArray.getInt(R.styleable.sigleLine_gravity,0);
 typedArray.recycle();
 }
}

因为我们支持外边距,所以这里重写了generateLayoutParams方法,这里直接返回系统SDK里面的MarginLayoutParams对象,如果你想支持更多的属性,也可以自定义,只要继承ViewGroup.LayoutParams类就可以的:

@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
 return new MarginLayoutParams(getContext(),attrs);
}

接下来重写onMeasure方法,测量自己的宽高。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int width = MeasureSpec.getSize(widthMeasureSpec);//获取ViewGroup的宽度
 Log.i("ansen","gravity:"+gravity);
 //未指定模式 父元素不对子元素施加任何束缚,子元素可以得到任意想要的大小
 int unspecifiedMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
 int firstWidth=width;
 View firstView=null;
 if(gravity == LEFT){
 for(int i=0;i<getChildCount();i++){
 View child=getChildAt(i);
 MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
 Log.i("ansen","i:"+i);
 if(i==0){
 firstView=child;
 firstWidth-=(params.leftMargin+params.rightMargin);
 }else{
 if(child.getVisibility()!=View.GONE){//必须是占用空间的View
 child.measure(unspecifiedMeasureSpec,unspecifiedMeasureSpec);
 firstWidth -= (child.getMeasuredWidth()+getPaddingLeft()+getPaddingRight()+params.leftMargin+params.rightMargin);//第一个View可以显示的最大宽度
 }
 }
 }
 }else{
 for(int i=getChildCount()-1;i>=0;i--){
 View child=getChildAt(i);
 MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
 Log.i("ansen","i:"+i);
 if(i==getChildCount()-1){
 firstView=child;
 firstWidth-=(params.leftMargin+params.rightMargin);
 }else{
 if(child.getVisibility()!=View.GONE){//必须是占用空间的View
 child.measure(unspecifiedMeasureSpec,unspecifiedMeasureSpec);
 firstWidth -= (child.getMeasuredWidth()+getPaddingLeft()+getPaddingRight()+params.leftMargin+params.rightMargin);//第一个View可以显示的最大宽度
 }
 }
 }
 }
 Log.i("ansen","maxWidth:"+firstWidth);
 int maxWidthMeasureSpec = MeasureSpec.makeMeasureSpec(firstWidth, MeasureSpec.AT_MOST);
 firstView.measure(maxWidthMeasureSpec,unspecifiedMeasureSpec);
 int height = getPaddingBottom() + getPaddingTop() + firstView.getMeasuredHeight();
 Log.i("ansen","width:"+width+" height:"+height);
 setMeasuredDimension(width,height);
}

首先通过MeasureSpec.getSize方法获取当前ViewGroup的宽度。然后通过MeasureSpec.makeMeasureSpec方法生成一个不指定大小的模式。

方法内第6行代码,用if判断显示方向,是左边还是右边,如果是左边,那第一个View肯定是长度根据内容变化的View,所以需要ViewGroup宽度减掉后面所有View的宽度。当然还要减掉左右外边距。

方法内23行代码,如果是右边排序,进入else,右边恰恰相反,最后一个View肯定是长度根据内容变化的View,所以需要ViewGroup宽度减掉前面所有View的宽度,同时也要处理左右边距。

方法内41行代码,这个时候我们拿到了内容变化的View最大能显示的宽度,通过MeasureSpec.makeMeasureSpec方法生成宽度模式,这里需要注意的是这个方法的第二个参数MeasureSpec.AT_MOST,这个模式的意思是父容器指定了一个大小,即SpecSize,子view的大小不能超过这个SpecSize的大小。

方法内42行代码,调用firstView.measure方法,传入两个参数,指定大小模式,未定义模式。

子View都测量完成了,最后调用setMeasuredDimension方法,来决定ViewGroup自己的宽高。

重写onMeasure方法确定了宽高之后,就要决定子View显示的位置了,所以还需要重写onLayout方法。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
 Log.i("ansen","onLayout gravity:"+gravity);
 int firstHeight=0;//第一个View的高度
 if(gravity==LEFT){//左边
 int left=0;
 for(int i=0;i<getChildCount();i++){
 View child=getChildAt(i);
 MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
 if(i==0){
 firstHeight=child.getMeasuredHeight();
 child.layout(getPaddingLeft()+params.leftMargin,getPaddingTop(),child.getMeasuredWidth()+params.leftMargin+params.rightMargin,getPaddingTop()+child.getMeasuredHeight());
 }else{
 int top=(firstHeight-child.getMeasuredHeight())/2;
 child.layout(left+params.leftMargin,getPaddingTop()+params.topMargin+top,left+child.getMeasuredWidth()+params.leftMargin,getPaddingTop()+child.getMeasuredHeight()+params.topMargin+top);
 }
 left+=child.getMeasuredWidth() + getPaddingLeft()+params.leftMargin+params.rightMargin;
 }
 }else{//右边
 int right=0;
 for(int i=getChildCount()-1;i>=0;i--){
 View child=getChildAt(i);
 MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
 if(i==getChildCount()-1){
 firstHeight=child.getMeasuredHeight();
 child.layout(getWidth()-(getPaddingLeft()+params.leftMargin+child.getMeasuredWidth()),getPaddingTop(),getWidth()+params.rightMargin,getPaddingTop()+child.getMeasuredHeight());
 }else{
 Log.i("ansen","left:"+(getWidth()-right-child.getMeasuredWidth()-params.leftMargin)+" right:"+(getWidth()-right+params.rightMargin)+"child.getWidth():"+child.getMeasuredWidth());
 int top=(firstHeight-child.getMeasuredHeight())/2;
 child.layout(getWidth()-right-child.getMeasuredWidth()-params.rightMargin,getPaddingTop()+params.topMargin+top,getWidth()-right-params.rightMargin,getPaddingTop()+child.getMeasuredHeight()+params.topMargin+top);
 }
 right+=child.getMeasuredWidth()+params.leftMargin+params.rightMargin+getPaddingLeft()+getPaddingRight();
 }
 }
}

别看这个方法代码多,其实核心都在child.layout这句代码上,这个方法有四个参数,分别是left,top,right,bottom,这四个参数分别是View的四个点的坐标,这个坐标不是相对于屏幕左上角开始的,而是相对于ViewGroup开始的。

所以如果是左边开始显示的话,第一个View的layout方法四个值应该是:(0,0,测量宽度,测量高度),第二个View的值就是:(第一个View的宽度,0,第一个View的宽度+第二个View的宽度,测量高度)。

如果是右边显示的话,第一个View的layout方法四个值应该是:(ViewGroup宽度-自己的测量宽度,0,屏幕宽度,测量高度)。第二个View的值就是:(屏幕宽度-第一个View的宽度-第二个View的宽度,0,屏幕宽度-第一个View的宽度,测量高度)。

上面说的两种layout方法的四个值是没涉及到外边距跟内边距的情况下,只是为了方便大家理解。还有我们这里第二个View的高度并不是0至测量高度,因为第一个View的内容有可能显示两行,所以第二View需要垂直居中,这个时候top跟bottom的值就需要动态计算。

以上就是这个自定义ViewGroup的所有内容了,当你碰到类似的需求直接拿过去用就好了,当然如果你碰到相似的需求,通过本篇文章的学习,希望你也能搞定自定义ViewGroup。

更多Android进阶技术,面试资料系统整理分享,职业生涯规划,产品,思维,行业观察,谈天说地。可以加Android架构师群;701740775。

相关文章
|
安全
360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?
360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?
260 0
360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?
|
Android开发 容器
仿QQ对话列表滑动删除与置顶的原理及实现(一)
仿QQ对话列表滑动删除与置顶的原理及实现(一)
104 0
仿QQ对话列表滑动删除与置顶的原理及实现(一)
仿QQ对话列表滑动删除与置顶的原理及实现(二)
仿QQ对话列表滑动删除与置顶的原理及实现(二)
87 0
仿QQ对话列表滑动删除与置顶的原理及实现(二)
VB编程:仿QQ聊天框的抖动效果-58
VB编程:仿QQ聊天框的抖动效果-58
VB编程:仿QQ聊天框的抖动效果
VB编程:仿QQ聊天框的抖动效果
115 0
VB编程:仿QQ聊天框的抖动效果
|
开发工具 git
仿QQ发语音、图片选择、表情选择demo
一款仿QQ发语音、图片选择、调用拍照、表情选择的demo git地址:https://github.com/PureLovePeter/pic.git。  喜欢的请 star  star star,共同学习进步          
1199 0

热门文章

最新文章