Android 子线程更新UI了解吗?

前言

今天一个朋友去面试,被问到

  • 为什么Loop 死循环而不阻塞UI线程?
  • 为什么子线程不能更新UI?是不是子线程一定不可以更新UI?
  • SurfaceView是为什么可以直接子线程绘制呢?
  • 用SurfaceView 做一个小游戏,别踩百块,so easy!

今天我们来一起讨论一下这些问题,在看下面讨论时,你需要掌握Android Handler,View 线程等基础知识。

单线程 异步消息的原理

我们刚开始学习移动端开发的时候,不管是Android,还是IOS,经常会听到一句话,网络请求是耗时操作,需要开一个单独的线程请求网络。

而如果最近接触过Flutter的同学,可能知道网络请求只是一个异步操作,不需要开单独的线程或者进程进行耗时请求,那这种机制是什么样的原理呢?

这里先解释一下,网络请求是一个耗时操作的确是没问题的,但是他不是一个耗CPU的操作,他仅仅是一个异步操作。那异步操作是不是可以用单线程就实现了呢?(因为他不耗CPU)

我们看一下异步消息的模型(生产者消费者模型),如下:

image

那么单线程的话,怎么搞呢?其实只要一个消息不断的去读队列,如果没有消息,那就只等待状态,只要有消息进来,比如点击事件,滑动事件等,就可以直接取出消息执行。

下面我们来看一下Android里面的异步消息实现机制 Handler,主线程在APP启动(ActivityThread)的时候,就会启动消息循环,如下:

//ActivityThread 省略部分代码
    public static void main(String[] args) {
        AndroidOs.install();
        Process.setArgV0("<pre-initialized>");
        Looper.prepareMainLooper(); //Handler启动机制: Looper.prepare()
        ActivityThread thread = new ActivityThread();
        thread.attach(false, startSeq);
        if (sMainThreadHandler == null) {
            sMainThreadHandler = thread.getHandler();
        }
        Looper.loop();////Handler启动原理: Looper.loop()
    }

为什么Loop 死循环而不阻塞UI线程?

 //Looper
    public static void loop() {
        final Looper me = myLooper();
        for (;;) {
            Message msg = queue.next(); // might block
            if (msg == null) {
                // No message indicates that the message queue is quitting.
                return;
            }
            ...
        }
    }
    ....

这个从上面的单线程异步消息模型,我们就可以知道,他不是阻塞线程了,而是只要有消息插入MessageQueue队列,就可以直接执行。

UI更新被设计成单线程(主线程或者说是UI线程)的原因

我们知道UI刷新,需要在规定时间内完成,以此带来流畅的体验。如果刷新频率是60HZ的话,需要在16ms内完成一帧的绘制,除了一些人为原因,怎么做才能达到UI刷新高效呢?

事实就是UI线程被设计成单线程访问?这样有什么好处呢?

  • 单线程访问,是不需要加锁的。
  • 如果多个线程访问那就需要加锁,耗时会比较多,如果多线程访问不加锁,多个线程共同访问更新操作同一个UI控件时容易发生不可控的错误。

所以UI线程被设计成单线才能程访问,也是这样设计的一个伪锁。

是不是子线程一定不可以更新UI

答案是否定的,有些人可能认为SurfaceView的画布就可以在子线程中访问,这个本来就是另外的一个范畴,我们下一节讨论。

从上面一节,我们知道,UI线程被设计成单线程访问的,但是看代码,他设计只是在访问UI的时候检测线程是否是主线程。如下:

//ViewRootImpl
   void checkThread() {
        if (mThread != Thread.currentThread()) {
            throw new CalledFromWrongThreadException(
                    "Only the original thread that created a view hierarchy can touch its views.");
        }
    }

那我们可不可以绕过这个checkThread方法呢?来达到子线程访问UI,我们先看一段代码:

public class MainActivity extends AppCompatActivity {
    private TextView tvTest;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvTest = findViewById(R.id.tvTest);
        new Thread(new Runnable() {
            @Override
            public void run() {
                tvTest.setText("测试子线程加载");
            }
        }).start();
    }
}

这段代码是可以直接运行成功的,并且没有任何问题,那这是是为什么呢?可能你已经猜想到这是为什么了—— 绕过了checkThread方法。

下面来分析一下原因:
访问及刷新UI,最后都会调用到ViewRootImpl,如果对ViewRootImpl还很陌生,可以参考我的另一篇博客 Android 绘制原理浅析【干货】

那么直接在onCreate 启动时,ViewRootImpl肯定还没启动起来啊,不然,那刷新肯定失败,我们可以验证一下。把上面Thread 里面加一个延迟,变成这样

public class MainActivity extends AppCompatActivity {
    private TextView tvTest;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvTest = findViewById(R.id.tvTest);
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(500);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                tvTest.setText("测试子线程加载");
            }
        }).start();
    }
}

运行起来直接崩溃

 android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.
        at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:7753)
        at android.view.ViewRootImpl.requestLayout(ViewRootImpl.java:1225)
        at android.view.View.requestLayout(View.java:23093)
        at android.view.View.requestLayout(View.java:23093)
        at android.view.View.requestLayout(View.java:23093)
        at android.view.View.requestLayout(View.java:23093)
        at android.view.View.requestLayout(View.java:23093)
        at android.view.View.requestLayout(View.java:23093)
        at androidx.constraintlayout.widget.ConstraintLayout.requestLayout(ConstraintLayout.java:3172)
        at android.view.View.requestLayout(View.java:23093)
        at android.widget.TextView.checkForRelayout(TextView.java:8908)
        at android.widget.TextView.setText(TextView.java:5730)
        at android.widget.TextView.setText(TextView.java:5571)
        at android.widget.TextView.setText(TextView.java:5528)
        at com.ding.carshdemo.MainActivity$1.run(MainActivity.java:27)

和猜想一致,那么ViewRootImpl是什么时候被启动起来的呢?
Android 绘制原理浅析【干货】
中提到,当Activity准备好后,最终会调用到Activity中的makeVisible,并通过WindowManager添加View,代码如下

//Activity
 void makeVisible() {
        if (!mWindowAdded) {
            ViewManager wm = getWindowManager();
            wm.addView(mDecor, getWindow().getAttributes());
            mWindowAdded = true;
        }
        mDecor.setVisibility(View.VISIBLE);
    }

看一下wm addView方法

//WindowManagerImpl
public void addView(@NonNull View view, @NonNull ViewGroup.LayoutParams params) {
        applyDefaultToken(params);
        mGlobal.addView(view, params, mContext.getDisplay(), mParentWindow);
    }

在看一下mGlobal.addView方法

//WindowManagerGlobal
 public void addView(View view, ViewGroup.LayoutParams params,
            Display display, Window parentWindow) {
                 ViewRootImpl root;
         .....
        View panelParentView = null;
        synchronized (mLock) {
            root = new ViewRootImpl(view.getContext(), display);
            view.setLayoutParams(wparams);
            mViews.add(view);
            mRoots.add(root);
        }
        ...
}

终于找到了ViewRootImpl的创建。那么回到上面makeVisible是什么时候被调用到的呢?
看Activity启动流程时,我们知道,Ativity的启动和AMS交互的代码在ActivityThread中,搜索makeVisible方法,可以看到调用地方为

//ActivityThrea
public void handleResumeActivity(IBinder token, boolean finalStateRequest, boolean isForward,
            String reason) {
            ...
            if (r.activity.mVisibleFromClient) {
                r.activity.makeVisible();
            }
            ...
 }
 
private void updateVisibility(ActivityClientRecord r, boolean show) { 
        ....
        if (show) {
            if (!r.activity.mVisibleFromServer) {
                    if (r.activity.mVisibleFromClient) {
                        r.activity.makeVisible();
                    }
        ...
}

//调用updateVisibility地方为
handleStopActivity()  handleWindowVisibility() handleSendResult()

这里我们只关注ViewRootImpl创建的第一个地方,从Acitivity声明周期handleResumeActivity会被优先调用到,也就是说在handleResumeActivity启动后(OnResume),ViewRootImpl就被创建了,这个时候,就无法在在子线程中访问UI了,上面子线程延迟了一会,handleResumeActivity已经被调用了,所以发生了崩溃。

SurfaceView是为什么可以直接子线程绘制呢?

Android 绘制原理浅析【干货】 提到了,我们一般的View有一个Surface,并且对应SurfaceFlinger的一块内存区域。这个本地Surface和View是绑定的,他的绘制操作,最终都会调用到ViewRootImpl,那么这个就会被检查是否主线程了,所以只要在ViewRootImpl启动后,访问UI的所有操作都不可以在子线程中进行。

那SurfaceView为什么可以子线程访问他的画布呢?如下

public class MainActivity extends AppCompatActivity implements SurfaceHolder.Callback {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SurfaceView surfaceView = findViewById(R.id.sv);
        surfaceView.getHolder().addCallback(this);
    }

    @Override
    public void surfaceCreated(final SurfaceHolder holder) {
        new Thread(new Runnable() {
            @Override
            public void run() {
               while (true){
                   Canvas canvas = holder.lockCanvas();
                   canvas.drawColor(Color.RED);
                   holder.unlockCanvasAndPost(canvas);
                   try {
                       Thread.sleep(100);
                   } catch (InterruptedException e) {
                       e.printStackTrace();
                   }
               }
            }
        }).start();
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }
}

其实查看SurfaceView的代码,可以发现他自带一个Surface

public class SurfaceView extends View implements ViewRootImpl.WindowStoppedCallback {
    ...
   final Surface mSurface = new Surface();   
   ...
}

在SurfaceView的updateSurface()中

  protected void updateSurface() {
  ....
    if (creating) {
      //View自带Surface的创建
         mSurfaceSession = new SurfaceSession(viewRoot.mSurface);
        mDeferredDestroySurfaceControl = mSurfaceControl;
        updateOpaqueFlag();
        final String name = "SurfaceView - " + viewRoot.getTitle().toString();
        mSurfaceControl = new SurfaceControlWithBackground(
            name,
            (mSurfaceFlags & SurfaceControl.OPAQUE) != 0,
            new SurfaceControl.Builder(mSurfaceSession)
                 .setSize(mSurfaceWidth, mSurfaceHeight)
                .setFormat(mFormat)
                .setFlags(mSurfaceFlags));
        }
    
    //SurfaceView 中自带的Surface
     if (creating) {
        mSurface.copyFrom(mSurfaceControl);
    }            
    ....
  }

SurfaceView中的mSurface也有在SurfaceFlinger对应的内存区域,这样就很容易实现子线程访问画布了。

这样设计有什么不好的地方吗?

因为这个 mSurface 不在 View 体系中,它的显示也不受 View 的属性控制,所以不能进行平移,缩放等变换,也不能放在其它 ViewGroup 中,一些 View 中的特性也无法使用。

别踩百块

我们知道SurfaceView可以在子线程中刷新画布(所称的离屏刷新),那做一些刷新频率高的游戏,就很适合.下面我们开始撸一个前些年比较火的小游戏。

image

看游戏分为几个步骤,这里主要讲一下原理和关键代码(下面有完整代码地址)

  • 绘制一帧
  • 动起来
  • 手势交互
  • 判断游戏是否结束
  • 优化内存

绘制一帧

image

我们把一行都成一个图像,那么他有一个黑色块,和多个白色块组成. 那就可以简单抽象为:

public class Block {
     private int height;
     private int top;
     private int random = 0; //第几个是黑色块
}

绘制逻辑

 public void draw(Canvas canvas,int random){
        this.random=random;
        canvas.save();
        for(int i=0;i<WhiteAndBlack.DEAFAUL_LINE_NUME;i++){
            if(random == i){
                blackRect=new Rect(left+i*width,top,width+width*i,top+height);
                canvas.drawRect(left+i*width,top,width+width*i,top+height,mPaint);
            }else if(error == i){
                canvas.drawRect(left+i*width,top,width+width*i,top+height, errorPaint);
            }else{
                canvas.drawRect(left+i*width,top,width+width*i,top+height,mDefaultPaint);
            }
        }
        canvas.restore();
    }

那么一行的数据有了,我只需要一个List就可以绘制一屏幕的数据

//List<Block> list;
  private void drawBg() {
        synchronized (list) {
            mCanvas.drawColor(Color.WHITE);
            if (list.size() == 0) {
                for (int i = 0; i <= DEAULT_HEIGHT_NUM; i++) {
                    addBlock(i);
                }
            } else {
            ...... 
            }
        }
    }
    
private void addBlock(int i) {
        Block blok = new Block(mContext);
        blok.setTop(mHeight - (mHeight / DEAULT_HEIGHT_NUM) * i);
        int random = (int) (Math.random() * DEAFAUL_LINE_NUME);
        blok.draw(mCanvas, random);
        list.add(blok);
 }

要让其动起来

SurfaceView在不断的刷新,那么只要让List里面的数据每一行的top不断增加,下面没有数据了,直接添加到上面

  //SurfaceView 新开的子线程Thread
    @Override
    public void run() {
        isRunning=true;
        while (isRunning){
            draw();
        }
    }
    
    private void draw() {
        try {
            mCanvas = mHolder.lockCanvas();
            if(mCanvas !=null) {
                drawBg();
            //  removeNotBg();
            //  checkGameover(-1,-1);
            }
        }catch (Exception e){
        }finally {
            mHolder.unlockCanvasAndPost(mCanvas);
        }
    }
    
     private void drawBg() {
        synchronized (list) {
            mCanvas.drawColor(Color.WHITE);
            if (list.size() == 0) {
              ....
            } else {
                for (Block block : list) {
                //top 不断添加
                    block.setTop(block.getTop() + mSpeend);
                    block.draw(mCanvas, block.getRandom());
                }
                if (list.get(list.size() - 1).getTop() >= 0) {
                    Block block = new Block(mContext);
                    block.setTop(list.get(list.size() - 1).getTop() - (mHeight / DEAULT_HEIGHT_NUM));
                    int random = (int) (Math.random() * DEAFAUL_LINE_NUME);
                    block.draw(mCanvas, random);
                    //如果上面的top出去了,那下面在加一个block
                    list.add(block);
                }
            }
            mCanvas.drawText(String.valueOf(count),350,mHeight/8,textPaint);
        }
    }

手势交互

如果用户黑块点击了,就开始游戏,如果已经开始,那么点击了正确的黑块,就绘制成灰色并加速,并检查游戏是否结束了

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(isRunning) {
                    checkGameover((int) event.getX(), (int) event.getY());
                }else{
                    count=0;
                    list.clear();
                    mSpeend=0;
                    thread = new Thread(this);
                    thread.start();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

绘制灰色代码见下面

判断游戏是否结束了

  • 下面到屏幕底端了,还未点击
  • 点击错误
  private boolean checkGameover(int x,int y){
        synchronized (list) {
            for (Block block : list) {
                if(x !=-1 && y !=-1) {
                    if (block.getBlackRect().contains(x, y)) {
                        count++;
                        if(mSpeend == 0){
                            mSpeend=DensityUtils.dp2px(getContext(),10);
                        }else if(mSpeend <=10){
                            mSpeend+=DensityUtils.dp2px(getContext(),2);
                        }else if(count == 60){
                            mSpeend+=DensityUtils.dp2px(getContext(),2);
                        } else if(count == 100){
                            mSpeend+=DensityUtils.dp2px(getContext(),2);
                        }else if(count == 200){
                            mSpeend+=DensityUtils.dp2px(getContext(),1);
                        } else if(count == 300){
                            mSpeend+=DensityUtils.dp2px(getContext(),1);
                        } else if(count == 400){
                            mSpeend+=DensityUtils.dp2px(getContext(),1);
                        }
                        block.setBlcakPaint();
                    } else if (y > block.getTop() && y < block.getTop() + block.getHeight()) {
                        isRunning = false;
                        block.setError(x / block.getWidth());
                    }
                }else{
                    if(block.getTop()+block.getHeight()-50 >=mHeight && !block.isChick()){
                        isRunning=false;
                        block.setError(block.getRandom());
                    }
                }
            }
        }
        return false;
    }

最后优化一下内存

因为我们在不断的添加block,玩一会内存就爆了,可以学习ListView,划出屏幕后上方就移除.

  private void removeNotBg() {
        synchronized (list) {
            for (Block block : list) {
                if (block.getTop() >= mHeight) {
                    needRemoveList.add(block);
                }
            }
            if(needRemoveList.size() !=0){
                list.removeAll(needRemoveList);
                needRemoveList.clear();
            }
        }
    }

由于代码量比较小,直接上传到了百度云网盘,地址:
https://pan.baidu.com/s/1-pSwF34OWuMSTPioFYfWmA 提取码: 2j3a

总结

在Android/IOS/Flutter/Window中,都有消息循环这套机制,保证了UI高效,安全。我们作为Android开发程序员,有必要掌握。如果文章对你有帮助,帮忙点一下赞,非常谢谢。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容