来自Google的响应式——Agera

  响应式编程越来越符合现在的数据为核心的开发思路。所以,在去年,响应式也越来越火,从RxJava到React(支持了响应式)。如今,为了满足更多开发者的需求,Google也推出了自己的响应式框架——Agera。

  我之前从来没有进行过相关的开发,Agera算是第一次接触响应式开发,虽说它是一种新的开发思路。但我更习惯于,从它解决了什么问题,开始说起。

  其实在Android开发中,大家常常会面对非UI线程更新UI的问题。这个问题在百度上解答已经非常多了。其根本就是使用Handler,传递消息。但是Handler这个类的使用,不那么美观,结构不好看,还容易内存泄露。因此,各种框架对其进行了封装。从原生框架中的AsyncTask到后面EventBus,到如今的Agera都是对Handler传递消息这件事,进行了各种封装,让它更加的优雅。由于刚接触这个框架,原理暂时无力细说。在此先记录一下它的用法。

  Agera其实就是个观察者模式。分为两部分,数据源和观察者。当然,一个类也可以同时拥有这两种身份。

  先看数据源的demo代码:

  

import com.google.android.agera.BaseObservable;/**
 * Created by longsiyang on 2016/4/20.
 */
public class BaseBean extends BaseObservable  {

    private String content = "";

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
        update();
    }

    public void update(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                content += " after other thread";
                dispatchUpdate();
            }
        }).start();
    }
}

  这个类继承了BaseObservable,成为了Agera的数据源。我自己为这个数据写了get、set、update方法。

  我们可以注意到,update方法代码,是在一个新线程中执行的。在执行完成后,会调用dispatchUpdate()。这个方法是从BaseObservable继承下来的,功能就是通知这个数据源的所有观察者,执行update()方法。

  我们点进去看源码会发现:

    void dispatchUpdate() {
      handler.obtainMessage(MSG_UPDATE, this).sendToTarget();
    }

  以上就是数据源相关的。

  

  接下来,我们看看如何成为观察者。本例中,让一个Activity成为观察者。

  

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;

import com.google.android.agera.Updatable;

public class MainActivity extends AppCompatActivity implements Updatable {

    BaseBean baseBean;
    EditText editText;
    TextView textView1 , textView2 , textView3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView1 = (TextView) findViewById(R.id.test_tv_id1);
        textView2 = (TextView) findViewById(R.id.test_tv_id2);
        textView3 = (TextView) findViewById(R.id.test_tv_id3);
        baseBean = new BaseBean();

        editText = (EditText) findViewById(R.id.test_eidt_id);
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (baseBean != null){
                    baseBean.setContent(s.toString());
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        baseBean.addUpdatable(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        baseBean.removeUpdatable(this);
    }

    @Override
    public void update() {
        textView1.setText(baseBean.getContent());
        textView2.setText(baseBean.getContent());
        textView3.setText(baseBean.getContent());
    }
}

  这个Activity中,我监听了Edittext的内容变化。

  在onResume中让观察者加入数据源,在onPause中让观察者移出数据源。并在Edittext内容变化时,改变数据源内容。改变内容时,由于调用了数据源的dispatchUpdate()方法,会使观察者调用update()方法。此时,Activity中的update()方法就会调用,更新textview1、textview2、textview3中的内容。

通过这些简洁的代码,我们就完成了一个结构优雅的,非UI线程更新UI。

Done~

时间: 2024-10-17 11:50:24

来自Google的响应式——Agera的相关文章

谷歌Web中文开发手册:3响应式

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive (译者注:全部按照教程的代码,并不能实现代码,我调试之后发了全部代码出来.ps:没有使用翻墙工具,谷歌给的例子访问不到.) 每个设备都有自己独特的优势和限制,要让这个网页在众多的不同的显示设备中被接受,作为一名Web开发者,你要尽力让这个页面支持所有设备. 目录: 添加viewport 应用简

使用 CSS 媒体查询创建响应式网站

来自:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/ 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网站,都可以呈现一个可用的界面.响应式设计可以响应各种屏幕大小,因此也成为了 “前瞻性” 的网站,屏幕将随着新的智能手机和平板电脑的问世而快速演变.实现响应式设计的主要途径是使用 CSS 媒体查询.在本文中,我们将了解如何将

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

响应式布局(Responsive layout,RL)的简单Demo

★背景: 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. ★利弊分析 凡事有利必有弊.响应式布局的优缺点也是有必要了解的. 优点:面对不同分辨

响应式网站技巧

1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码.这种操作方式更容易实现响应式特性,在同一时间专注于一个任务. 当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间.这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智

【前端】响应式媒体查询

响应式媒体查询 媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> <link rel="stylesheet&

响应式开发(2)

1.像素 因为浏览器不是根据硬件像素宽度工作的,而是根基DIPs工作的叫什么设备独立像素值,这个有个链接给你 (http://yunkus.com/physical-pixel-device-independent-pixels/) 2.DPR 设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值 例子 以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px 深入了解我

纯CSS3大转盘抽奖(响应式、可配置)

源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:https://github.com/givebest/wechat-turntalbe-canvas. 事后想起,CSS3 实现也并不是无有益处,比如简单.快捷.调试方便.渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转

如何使用CSS绘制一个响应式的矩形

背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案. 有如下几种方案: 使用js来设置元素的高度 使用vw单位  div {width: 50vw; height: 50vw;} 使用伪元素设置padding的方式来实现正方形(也就是本次使用的方式) 实现一个正方形 1 .square 2 position: relative 3 width: 100% 4 5 &::before 6 content: '' 7 display: block 8 padding-t