Animate all the things. Transitions in Android(译)

原文链接

Animate all the things. Transitions in Android

Github

Transitions-Everywhere

译文开始

嘿,各位Android开发者。我将告诉你们一些Android动画的新动向。Google最终发布了Material Design: 动画不仅仅是iOS了。其中的一个新概念: Material motion.

“动作使得(界面交互)变得有意义。即便对象在不断的变化,用户依然可以连续直观地体验到其过程。在 material design 的世界中,Motion使得空间关系,功能性和意向的表达 变得连贯而更具美感。”
– Material Design guidelines.

实际上,创建动画是个耗时的过程。在过往的开发中,只需要调用setVisibility(View.VISIBLE)就显示新功能的业务逻辑,肯定是充满诱惑力的。但是记住:每次你忽略补充有意义的过渡动画的机会,在世界某个地方就多了一名悲伤的设计师。
如果我告诉你,动画要比你想象的省力?你有没有听过Transitions API?是的,这是谷歌推广的Activities之间精美的动画,可悲的是,它仅适用于Android5.0以后。所以实际上没有人使用它。但是想象一下,这个API可以在许多不同的情况下得到有效利用,并且更令人兴奋的是,可在旧Android版本中使用。

让我们从一些历史开始

Android 4.0中,介绍了ViewGroup新的animateLayoutChange参数。但是,就算调用getLayoutTransition()和配置里面的一些东西,仍然不稳定,不够灵活。所以你不能使用它做太多事情。
4.4 Kitkat带给我们场景转换的想法。场景在技术上是指场景根中(布局容器)所有View的状态。转场(Transition)是将View的动画集合,从一个场景平滑过渡到另一个场景。举几个栗子,它会更加吸引人?当然。

想象一下,我们有一个按钮

点击之后,我们想在按钮的下面出现一串文字。这是布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/transitions_container" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical">
 
    <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DO MAGIC"/>
 
    <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Transitions are awesome!" android:visibility="gone"/>
 
</LinearLayout>

然后代码中添加一个click listener:

final ViewGroup transitionsContainer = (ViewGroup) view.findViewById(R.id.transitions_container);
final TextView text = (TextView) transitionsContainer.findViewById(R.id.text);
final Button button = (Button) transitionsContainer.findViewById(R.id.button);
 
button.setOnClickListener(new View.OnClickListener() {

    boolean visible;

    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(transitionsContainer);
        visible = !visible;
        text.setVisibility(visible ? View.VISIBLE : View.GONE);          
    }

});

效果:
have_a_text_appeared

还不错。一行代码搞定了动画。有趣的事情不只是text显示有动画,按钮的位置也有动画。当TextView显示是引起的布局变化,Transition框架会自动完成布局变化的动画,所以你不需要自己来做。就算前一个动画还在运行,你也可以启动一个新的动画。Transition框架会停止正在运行的动画,然后在当前位置继续动画。所有的都是自动的。

通过beginDelayedTransition(final ViewGroup sceneRoot, Transition transition)第二个参数,我们可以制定动画类型。

Transition的简单类型

  • ChangeBounds. 用于View的位置和大小动画。上面的例子就是移动按钮。
  • Fade. 它继承Visibility,并执行最流行的动画 – 淡入和淡出。上面的例子就是TextView的显示(淡入和淡出)。
  • TransitionSet. 它是Transition组合成的动画组。他们可以一起或顺序启动,可以通过setOrdering()来修改顺序。
  • AutoTransition. 它其实是一个TransitionSet,包含顺序动画:Fade out, ChangeBounds and Fade in。首先,View淡出动画,然后View的位置和大小变化动画,最后View淡入动画。

Backport(向后移植)

每个人都希望只写一个实现,在每一个Android版本中有一致的行为。希望我们使用Transitions API上,能够做到这一点。前一段时间我已经发现了两个非常相似的库::

github.com/guerwan/TransitionsBackport
github.com/pardom/TransitionSupportLibrary

他们不再维护,他们都错过了一些东西,还可以向后移植。所以基于他们两个库,我创建了一个自己的库,并增加了很多与老Android版本兼容的东西。从Lollipop到Marshmallow所有API的变化都已经合并了。
所以,我们有它:Transitions Everywhere 使Transitions API支持Android 4.0及以上。
开始使用它,只需要添加依赖(gradle):

dependencies {
    compile "com.andkulikov:transitionseverywhere:1.6.5"
}

然后将所有import android.transition.*,替换成com.transitionseverywhere.*

transitions_everywhere

我们还可以做什么

首先, 我们可以修改时长(duration)、插值器(interpolator)和延时启动(start delay):

transition.setDuration(300);
transition.setInterpolator(new FastOutSlowInInterpolator());
transition.setStartDelay(200);

让我们看看其他的可用的Transition类型

Slide(滑动)

就像 Fade transition, extends Visibility class. 它帮助View从一测滑向另一测,例子 Slide(Gravity.RIGHT):
slide_from_right

Explode and Propagation

Explode 很像Slide, 只是view在计算的方向上滑动,由Transition epicenter提供 (通过setEpicenterCallback方法来设置).
TransitionPropagation 为每个动画计算启动延时。比如, Explode 默认使用 CircularPropagation。动画启动延时取决于view和epicenter之间的距离。要使用它, 调用setPropagation

比方说,我们有RecyclerView与GridLayoutManager,在点击任何一个元素时,我们删除所有元素。如下所示:

public void onClick(View clickedView) {
    // save rect of view in screen coordinates
    final Rect viewRect = new Rect();
    clickedView.getGlobalVisibleRect(viewRect);
 
    // create Explode transition with epicenter
    Transition explode = new Explode()
        .setEpicenterCallback(new Transition.EpicenterCallback() {
            @Override
            public Rect onGetEpicenter(Transition transition) {
                return viewRect;
            }
        });
    explode.setDuration(1000);
    TransitionManager.beginDelayedTransition(recyclerView, explode);
 
    // remove all views from Recycler View
    recyclerView.setAdapter(null);
}

explode_and_propagation

ChangeImageTransform

ChangeImageTransform 图像矩阵变化动画. 当我们改变ImageView的scaleType时,它是非常有用。大多数情况下,都和ChangeBounds配合使用:位置、大小、scaleType的变化动画。

TransitionManager.beginDelayedTransition(transitionsContainer, new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeImageTransform()));
 
ViewGroup.LayoutParams params = imageView.getLayoutParams();
params.height = expanded ? ViewGroup.LayoutParams.MATCH_PARENT : 
    ViewGroup.LayoutParams.WRAP_CONTENT;
imageView.setLayoutParams(params);
 
imageView.setScaleType(expanded ? ImageView.ScaleType.CENTER_CROP : 
    ImageView.ScaleType.FIT_CENTER);

change_image_transform

Path (Curved) motion

“真实世界的力量,例如重力,驱动一个元素沿弧线的移动而非沿直线。”
– Material Design guidelines.

对于二维坐标的View转移操作(适用于使用ChangeBounds位置变化的例子),我们可以使用ChangeBounds.setPathMotion()方法设置移动的路径.

TransitionManager.beginDelayedTransition(transitionsContainer,
    new ChangeBounds().setPathMotion(new ArcMotion()).setDuration(500));
 
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) button.getLayoutParams();
params.gravity = isReturnAnimation ? (Gravity.LEFT | Gravity.TOP) :
    (Gravity.BOTTOM | Gravity.RIGHT);
button.setLayoutParams(params);

path_curved_motion

TransitionName

我们需要删除容器的所有view,并添加一组新的view。而一些新的元素实际上和之前创建的是相同的。我们如何告诉框架,删除哪些元素,哪些元素移动到一个新的位置? 简单。只需调用静态方法TransitionManager.setTransitionName(View v, String transitionName),为每个view提供唯一的名称。
例如,如果我们创建标题列表,每次点击按钮重新创建View并打乱排序:

createViews(inflater, layout, titles);
shuffleButton.setOnClickListener(new View.OnClickListener() {
 
    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(layout, new ChangeBounds());
        Collections.shuffle(titles);
        createViews(inflater, layout, titles);
    }
 
});
 
// 需要为每个view设置transition name

private static void createViews(LayoutInflater inflater, ViewGroup layout, List&lt;String&gt; titles) {
    layout.removeAllViews();
    for (String title : titles) {
        TextView textView = (TextView) inflater.inflate(R.layout.text_view, layout, false);
        textView.setText(title);
        TransitionManager.setTransitionName(textView, title);
        layout.addView(textView);
    }
}

transition_name

Scale

这个不是Transitions API的中的,而是我增加的。它可以使用缩放动画来显示或隐藏view。简单的使用:new Scale():
scale

也可以和其他Transition组合使用 例如, Fade:

TransitionSet set = new TransitionSet()
    .addTransition(new Scale(0.7f))
    .addTransition(new Fade())
    .setInterpolator(visible ? new LinearOutSlowInInterpolator() : 
        new FastOutLinearInInterpolator());

TransitionManager.beginDelayedTransition(transitionsContainer, set);
text2.setVisibility(visible ? View.VISIBLE : View.INVISIBLE);

scale_fade

Recolor

猜一下这一个是什么动画。 棒棒哒!背景和/或文本颜色的变化动画。

TransitionManager.beginDelayedTransition(transitionsContainer, new Recolor());
 
button.setTextColor(getResources().getColor(!isColorsInverted ? R.color.second_accent :R.color.accent));
button.setBackgroundDrawable(
    new ColorDrawable(getResources().getColor(!mColorsInverted ? R.color.accent :
        R.color.second_accent)));

re_color

Rotate

没时间解释, 例如:

TransitionManager.beginDelayedTransition(transitionsContainer, new Rotate());
icon.setRotation(isRotated ? 135 : 0);

rotate

ChangeText

帮助为文字变化增加淡入淡出动画,例如:

TransitionManager.beginDelayedTransition(transitionsContainer,
    new ChangeText().setChangeBehavior(ChangeText.CHANGE_BEHAVIOR_OUT_IN));
 textView.setText(isSecondText ? TEXT_2 : TEXT_1);

change_text

Targets

Transitions很容易配置. 你可以为任何Transition指定目标view,而且只有它们的可以动画.

Methods to add target:

  • addTarget(View target) — view itself
  • addTarget(int targetViewId) — id of view
  • addTarget(String targetName) — do you remember about method TransitionManager.setTransitionName?
  • addTarget(Class targetType) — for example android.widget.TextView.class

To remove target:

  • removeTarget(View target)
  • removeTarget(int targetId)
  • removeTarget(String targetName)
  • removeTarget(Class target)

To exclude some views:

  • excludeTarget(View target, boolean exclude)
  • excludeTarget(int targetId, boolean exclude)
  • excludeTarget(Class type, boolean exclude)
  • excludeTarget(Class type, boolean exclude)

And for excluding all children of some ViewGroup:

  • excludeChildren(View target, boolean exclude)
  • excludeChildren(int targetId, boolean exclude)
  • excludeChildren(Class type, boolean exclude)

Create Transition with xml

Transition可以xml. Xml创建, 文件目录 res/anim。例如:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:app="http://schemas.android.com/apk/res-auto"
              app:transitionOrdering="together"
              app:duration="400">
    <changeBounds/>
    <changeImageTransform/>
    <fade
       app:fadingMode="fade_in"
       app:startDelay="200">
        <targets>
            <target app:targetId="@id/transition_title"/>
        </targets>
    </fade>
</transitionSet>

// And inflating:
TransitionInflater.from(getContext()).inflateTransition(R.anim.my_the_best_transition);

Activity and Fragment transitions

Activity Transitions没办法向后移植,对不起(sadpanda)。大量的逻辑隐藏在Activity中。这同样适用于Fragment transitions。我们要创造我们自己的Fragment transitions逻辑。

Custom Transitions

对于任何view,Transitions可以用于各种用途。让我们创建一些独特-我们自己的Transition。所有的这些我们都需要实现三个方法: captureStartValues,captureEndValues and createAnimator. 前两个方法是动画之前和动画之后捕获view的状态。

我们将创建一个水平进度条(ProgressBar)进度平滑变化的动画:

private class ProgressTransition extends Transition {
 
    /**
     * Property is like a helper that contain setter and getter in one place
     */
    private static final Property&lt;ProgressBar, Integer&gt; PROGRESS_PROPERTY = 
        new IntProperty&lt;ProgressBar&gt;() {
 
        @Override
        public void setValue(ProgressBar progressBar, int value) {
            progressBar.setProgress(value);
        }
 
        @Override
        public Integer get(ProgressBar progressBar) {
            return progressBar.getProgress();
        }
    };
 
    /**
      * Internal name of property. Like a intent bundles 
      */
    private static final String PROPNAME_PROGRESS = "ProgressTransition:progress";
 
    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        captureValues(transitionValues);
    }
 
    @Override
    public void captureEndValues(TransitionValues transitionValues) {
        captureValues(transitionValues);
    }
 
    private void captureValues(TransitionValues transitionValues) {
        if (transitionValues.view instanceof ProgressBar) {
            // save current progress in the values map
            ProgressBar progressBar = ((ProgressBar) transitionValues.view);
            transitionValues.values.put(PROPNAME_PROGRESS, progressBar.getProgress());
        }
    }
 
    @Override
    public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues, 
            TransitionValues endValues) {
        if (startValues != null &amp;&amp; endValues != null &amp;&amp; endValues.view instanceof ProgressBar) {
            ProgressBar progressBar = (ProgressBar) endValues.view;
            int start = (Integer) startValues.values.get(PROPNAME_PROGRESS);
            int end = (Integer) endValues.values.get(PROPNAME_PROGRESS);
            if (start != end) {
                // first of all we need to apply the start value, because right now
                // the view is have end value
                progressBar.setProgress(start);
                // create animator with our progressBar, property and end value
                return ObjectAnimator.ofInt(progressBar, PROGRESS_PROPERTY, end);
            }
         }
         return null;
    }
}

然后怎么使用我们全新的 Transition?

private void setProgress(int value) {
    TransitionManager.beginDelayedTransition(mTransitionsContainer, new ProgressTransition());
    value = Math.max(0, Math.min(100, value));
    mProgressBar.setProgress(value);
}

效果:
progress_transition

PS

本文中所有的例子,都在Github的工程中:

github.com/andkulikov/transitions-everywhere

Never stop moving (and transitioning).

如何安装CocoaPods

安装ruby

CocoaPods使用ruby实现的,所以尽量使用配套ruby版本。
ps:不要用 RVM/rbenv 来安装,脚本错误繁多,而且下载源都很慢。

brew install ruby

设置镜像地址

你懂的,非常慢。

$ gem sources -a http://ruby.taobao.org/

$ gem sources --remove https://rubygems.org/

$ gem sources --remove http://rubygems.org/

# 查看 源列表
$ gem sources -l

安装CocoaPods

$ [sudo] gem install cocoapods

下载spec-repo

Master spec-repo 文件太大,做些处理,from here: Master-Spec-Repo-Rate-Limiting-Post-Mortem

$ cd ~/.cocoapods/repos
$ git clone https://github.com/CocoaPods/Specs.git master

# long long time...


使用CocoaPods

在工程目录执行下面的命令,这里还是慢。。。不知道还有什么办法

$ pod install --verbose --no-repo-update
$ pod update --verbose --no-repo-update

Xcode 打开 .xcworkspace,不是.xcodeproj

RadioGroup的一个bug

如果设置了默认选择,也没有给RadioButton添加ID,那么将没办法取消选择了。

<RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">

    <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content"/>

    <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"/>

</RadioGroup>

这个bug的原因:

RadioGroup在设置选择项的时候,RadioButton没有自动生成ID,导致选择项的ID为-1,等同于没选择。

创建流程:

  1. RadioButton创建
  2. RadioButton设置选中状态
  3. RadioGroup设置选中项(setCheckedId)
  4. RadioButton创建完成,添加到RadioGroup中

RadioButton创建的时候,回调onCheckedChanged()

private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // prevents from infinite recursion
        if (mProtectFromCheckedChange) {
            return;
        }

        mProtectFromCheckedChange = true;
        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }
        mProtectFromCheckedChange = false;

        int id = buttonView.getId();//这里是-1
        setCheckedId(id);
    }
}

RadioButton创建完成,添加到RadioGroup中

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    if (child instanceof RadioButton) {
        final RadioButton button = (RadioButton) child;
        if (button.isChecked()) {
            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;
            setCheckedId(button.getId());
        }
    }

    super.addView(child, index, params);
}

// 这里才生成ID (在add/removeView的时候回调)
public void onChildViewAdded(View parent, View child) {
    if (parent == RadioGroup.this && child instanceof RadioButton) {
        int id = child.getId();
        // generates an id if it's missing
        if (id == View.NO_ID) {
            id = View.generateViewId();
            child.setId(id);
        }
        ((RadioButton) child).setOnCheckedChangeWidgetListener(
                mChildOnCheckedChangeListener);
    }

    if (mOnHierarchyChangeListener != null) {
        mOnHierarchyChangeListener.onChildViewAdded(parent, child);
    }
}

最简单的解决办法:

给RadioButton加个ID

如果是动态添加RadioButton:参考这里(stackoverflow.com)

App开发如何保持迭代速度

前提

  1. 固定人员投入
  2. 固定上班时间
  3. 产品功能确定,不考虑功能是否有前景

以上条件相同的情况下,如何保持迭代的速度(更快的发布给用户使用、更快的反馈改进)

App开发的特点

App开发,涉及多个角色的协作,客户端依赖所有端:产品端、服务端、设计端、测试端。App的一个业务界面,可以做1天,也可以做1周(5天)。完全取决于产品设计、服务端接口、交互和视觉。

以一个按钮(button)为例

社交类产品,有新好友通知列表,可以:添加、同意、邀请好友三种操作。
最简的方式:默认button
经过设计的:每个操作,都不同的颜色来区分。

来看看这两种方式工作量的差别:

按钮文字(1)文字颜色(2)按钮背景(2)宽(1)高(1)总计
默认Add/Accept/Invite默认默认默认默认1
AddAdd22默认15
AcceptAccept22默认15
InviteInvite22默认15

吓尿了,5*3/1 = 15 倍,效果也确实”好看”。
p_i_t

产品设计

  1. 约定迭代周期(比如:2周或者1个月)
  2. 对于要实现的功能,在迭代周期内进行拆分(这个能力非常重要:优先级和紧急程度,再重要的功能也是要有个排序)
  3. 最简产品规划,但为未来做预留,但不为未来而实现(比如:推送消息,为了避免骚扰用户,进行发送频率限制?)
  4. 迭代内,不要变更需求了

服务端接口

  1. 优先定义好接口,接口就是客户端的血液。
  2. 接口的稳定,接口的改变导致Android、iOS都需要修改,两倍工作量额。
  3. 接口的异常情况说明
  4. 为未来做架构,根据需要实现
  5. 开发环境与测试环境分离

交互和视觉

  1. 风格统一,不要随性设计
  2. 多借鉴,少抄袭
  3. 界面的交互和视觉,紧密结合产品特点(否则一个界面展示的内容,得调用好几个API,扯着蛋了)

客户端

  1. 多封装代码,方便使用(app本质就是数据、UI、每个界面共同的东西比较多)
  2. 对于View慢慢封装不变的东西,把变的东西做薄。
  3. 除了View控件,对于View的界面慎重复用

Agera官方Wiki翻译完成

Agera-Wiki-中文版:Agera Wiki 中文版

专有名词解释

由于一些专有的单词,翻译不出来,在这里统一解释,以便后文的理解。

Updatable(Observer)

翻译为:观察者
用途:接收事件通知,更新数据。
说明:观察者模式中的Observer,在Agera中使用Updatable

public interface Updatable {
void update();
}

Observable

翻译为:被观察者、事件源
用途:作为事件源,通知观察者更新数据,可以注册、注销观察者。
说明:当事件发生的时候,调用dispatchUpdate()通知观察者。

public interface Observable {
void addUpdatable(@NonNull Updatable updatable);
void removeUpdatable(@NonNull Updatable updatable);
}

Supplier

翻译为:数据提供者
用途:get()新数据。

public interface Supplier {
@NonNull
T get();
}

Repository

翻译为:Repository、数据仓库
用途:接收事件源、提供数据源的结合体。

public interface Repository extends Observable, Supplier {
}

Reactive programming

翻译为:响应式编程
说明:一种面向数据流和变化传播的编程范式。
这意味着在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。
例如:在命令式编程环境中,a = b + c 表示将表达式的结果赋给a,而之后改变b或c的值不会影响a。但在响应式编程中,a的值会随着b或c的更新而更新。

Activation lifecycle

翻译为:激活生命周期
用途:注册观察者:数据仓库变为激活状态;注销观察者:数据仓库变为非激活状态。

Active

翻译为:激活状态

Inactive

翻译为:非激活状态

worker Looper thread

翻译为:有Looper的线程
说明:Agera 内部消息是通过Handler来完成的,所有线程需要有Looper,
更多参考:Android-Handler

Data Processing Flow

翻译为:数据处理流程

When, Where, What

翻译为:什么时候(时机),什么线程上,什么数据

Agera-Wiki-中文版:Agera Wiki 中文版

搞定Android Agera-04

Agera更新了,加入了RecycleView DataBinding的支持,先睹为快:

布局文件

<layout xmlns:android="http://schemas.android.com/apk/res/android">
  <data>
    <variable name="note" type="Note"/>
    <variable name="click" type="Receiver"/>
    <variable name="longClick" type="Predicate"/>
  </data>
  <TextView ... android:onClick="@{() -> click.accept(note)}"
      android:onLongClick="@{() -> longClick.apply(note)}"
      android:text="@{note.note}"/>
</layout>

dataBindingRepositoryPresenter

配合RepositoryAdapter使用,创建dataBindingRepositoryPresenter

RepositoryAdapter adapter = repositoryAdapter()
  .add(notesStore.getNotesRepository(), dataBindingRepositoryPresenterOf(Note.class)
      .layout(R.layout.text_layout)
      .itemId(BR.note)
      .handler(BR.click,
          (Receiver<Note>) note -> {
              ...;
          })
      .handler(BR.longClick,
          (Predicate<Note>) notesStore::deleteNote)
      .forList())
  .build();

// Setup the recycler view using the repository adapter
final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.result);
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));

比较难理解的部分

.itemId(BR.note)创建了一个staticFunction(),用来提供BR.id
然后和data绑定
viewDataBinding.setVariable(itemId.apply(item), item);

  @Override
  public final void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
    ...
    presenters[resolvedRepositoryIndex].bind(
        data[resolvedRepositoryIndex], resolvedItemIndex, holder);
  }


    @Override
    public void bind(@NonNull final Object item, @NonNull final View view) {
      final ViewDataBinding viewDataBinding = DataBindingUtil.bind(view);
      viewDataBinding.setVariable(itemId.apply(item), item);
      for (final Pair<Integer, Object> handler : handlers) {
        viewDataBinding.setVariable(handler.first, handler.second);
      }
      viewDataBinding.executePendingBindings();
    }

Agera对RecycleView的支持还太弱

如果只是展示一个固定的列表,每次都整体更新,那么可以使用:

  /**
   * Invalidates the data set so {@link RecyclerView} will schedule a rebind of all data.
   */
  @Override
  public final void update() {
    dataInvalid = true;
    notifyDataSetChanged();
  }

GitHub地址

AndroidAgeraTutorial

搞定Android Agera-03

Agera一句话总结:通过事件源驱动指令串执行并提供数据[push event, pull data],对于执行前、执行中的分支处理缺少,等待官方更新。
适合场景:事件源集中,对数据处理简单。

下拉刷新、上拉加载的事件定义

下拉刷新、上拉加载其实就是分页加载,需要提供下拉刷新、上拉加载的事件和页数数据提供,可以定义成一个Repository

    // 默认值
    private int mPagination = 1;
    private MutableRepository<Integer> mMutableRepository;
    // 可提供变化的数据源(accept输入->get输出),数据变化时通知事件
    mMutableRepository = Repositories.mutableRepository(mPagination);

    @Override
    public void onRefresh() {
        mPagination = 1;
        // 更新页数 并 update
        mMutableRepository.accept(mPagination);
    }

    @Override
    public void onLoadMore(int pagination, int pageSize) {
        mRefreshRecyclerView.showLoadMoreView();
        mPagination = pagination;
        // 更新页数 并 update
        mMutableRepository.accept(mPagination);
    }


分页加载数据

通过下拉刷新、上拉加载的事件和页数来加载数据

mLoadDataRepository = Repositories.repositoryWithInitialValue(Result.<ApiResult<GirlInfo>>absent())
        .observe(mMutableRepository)
        .onUpdatesPerLoop()
        .goTo(networkExecutor)
        .attemptGetFrom(new GirlsSupplier(mMutableRepository)).orSkip()
        .thenTransform(new Function<ApiResult<GirlInfo>, Result<ApiResult<GirlInfo>>>() {
            @NonNull
            @Override
            public Result<ApiResult<GirlInfo>> apply(@NonNull ApiResult<GirlInfo> input) {
                return absentIfNull(input);
            }
        })
        .onDeactivation(RepositoryConfig.SEND_INTERRUPT)
        .compile();

RecycleView 数据更新

更新RecycleView比较蛋疼,需要区分下拉和刷新。。。

    @Override
    public void update() {
        Result<ApiResult<GirlInfo>> result = mLoadDataRepository.get();

        result.ifSucceededSendTo(xxx).ifFailedSendTo(yyy);
    }

GitHub地址

AndroidAgeraTutorial

搞定Android Agera-02

goto

默认是在当前线程执行,如果需要访问网络啥的,需要切换至work thread。由于是异步执行可能出现并发,提供了.onDeactivation(int) 和 .onConcurrentUpdate(int) 来取消任务。
不知道怎么切换至UI线程,update默认是切换回原来线程了。

    networkExecutor = Executors.newSingleThreadExecutor();

    mMutableRepository = Repositories.mutableRepository(mPagination);

    mLoadDataRepository = Repositories.repositoryWithInitialValue(Result.<>absent())
            .observe(mMutableRepository)
            .onUpdatesPerLoop()
            .goTo(networkExecutor)
            .attemptGetFrom(new GirlsSupplier(mMutableRepository)).orSkip()
            .onDeactivation(RepositoryConfig.SEND_INTERRUPT)
            .compile();

goLazy

Repository执行到goLazy时,停下来(其实是跳过指令),直到Repository.get()时候返回上一次的值,然后继续执行下面的指令。
有价值的场景:

1. 可能cancel的任务,减少了不必要的处理
2. 如果是异步执行,get会返回上一次的值
3. 同步执行就是顺序的哈,没有效果

  public synchronized Object get() {
    if (runState == PAUSED_AT_GO_LAZY) {
      int index = lastDirectiveIndex;
      runState = RUNNING_LAZILY;
      runFlowFrom(continueFromGoLazy(directives, index), false);
    }
    return currentValue;
  }

但是
mRepository.addUpdatable(this)会触发StartFlow(),就是一定会执行一次,这有卵用。

  @Override
  protected void observableActivated() {
    eventSource.addUpdatable(this);
    maybeStartFlow();
  }

Result and Receiver

可以比较好的处理异常情况

  result.ifSucceededSendTo(this)
        .ifFailedSendTo(new Receiver<Throwable>() {
            @Override
            public void accept(@NonNull Throwable value) {
                
            }
        });

GitHub地址

AndroidAgeraTutorial

搞定Android Agera-01

Repository结合了被观察者和数据提供者,接收事件通知,提供数据(Repository.get())。

Repository组成

一个典型Agera风格的响应式Client由以下几部分组成:

  1. 向Observables注册一个Updatable,用于事件通知;
  2. 可直接调用update,来初始化或更改Client状态;
  3. 等待Observables的通知,拉取最新的数据来更新Client;
  4. 向Observables注销updatable,释放资源。

简单的Repository(Simple repositories)

static repository: 提供相同的数据源而且不生成通知事件,只有get()方法;
mutable repository: 可提供变化的数据源(accept输入->get输出),数据变化时生成通知事件.

    private void setUpRepository() {
        mObservable = new OnClickObservable() {
            @Override
            public void onClick(View view) {
                mRepository.accept(MockRandomData.getRandomImage());
            }
        };

        mRepository = Repositories.mutableRepository(MockRandomData.getRandomImage());
    }

复杂的Repository(Complex repositories)

这个真是超复杂,只做个简单的整理。
可以将很多个Repository、Observable串起来,可以指定执行线程(UI/Work Thred),组成一个“命令”执行流,也可以取消和中止这个执行流。
Agera 提供了repository compiler,可以使用近乎自然语言来声明complex repository。

repository compiler

一个典型声明的顺序:


// 1.声明RepositoryCompiler,并初始化,返回REventSource实例。
Repositories.repositoryWithInitialValue(...);

// 2.指定事件源(Observable),可以多个,返回RFrequency实例。
Event sources - .observe(...);

// 3.设置通知频率(比如click频率限制),返回RFlow实例。
Frequency of reaction - .onUpdatesPer(...) or .onUpdatesPerLoop();

// 4.设置数据源(Supplier),返回RFlow或RTermination实例。
Data processing flow - .getFrom(...), .mergeIn(...), .transform(...), etc.;

// 5.设置数据输出?(Function),返回RConfig实例。
Miscellaneous configurations - .notifyIf(...), .onDeactivation(...), etc.;

// 6.生成Repository实例。
.compile()

非常机智的通告返回类型,达到声明指令有序的目的。
goto返回的是Self,所以可以使用在其中任何位置。

    @NonNull
    TSelf goTo(@NonNull Executor executor);

也可以指定懒加载(goLazy)

    @NonNull
    RSyncFlow<TVal, TPre, ?> goLazy();

总结:指定事件源、限制频率、提供数据源、配置执行线程、结果处理(Function)、支持懒加载,简直是无所不能的万种组合。
ps:还有很多其他的方法,后续慢慢用起来。

数据处理流程(Data processing flow)

当进入数据处理流程,Repository.get()的值作为输入值,往下执行,可以做些异常处理:
.attemptXXX返回RTermination
.check()返回RTermination
RTermination可以跳出或者终止数据处理流程

interface RTermination<TVal, TTerm, TRet> {
//跳过所有未完成的data processing flow
@NonNull
TRet orSkip();
//终止未完成的data processing flow,输入结果:termination clause
@NonNull
TRet orEnd(@NonNull Function<? super TTerm, ? extends TVal> valueFunction);
}

GitHub地址

AndroidAgeraTutorial

搞定Android Agera-00

刚刚阅读完Agera的源码,先写一篇增加搜索曝光度 🙂
阅读源码比阅读文档理解更深,所以开启阅读源码历程(看到好的项目,就去读源码)。
ps:由于RxJava还没研究过,据说是一样的东西,那么从简单的学起吧。

Agera概述

Agera is a super lightweight Android library that helps prepare data for consumption by the Android application components (such as Activities), or objects therein (such as Views), that have life-cycles in one form or another. It introduces a flavor of functional reactive programming, facilitates clear separation of the when, where and what factors of a data processing flow, and enables describing such a complex and asynchronous flow with a single expression, in near natural language.
一句话:Android支持响应式编程(Reactive programming)了。
响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。
例如,在命令式编程环境中,a := b + c 表示将表达式的结果赋给a,而之后改变b或c的值不会影响a。但在响应式编程中,a的值会随着b或c的更新而更新。

关键角色

Agera 提供了一个新的事件响应和数据请求的模型,被称之为 “Push event, pull data”。也就是一个事件发生了,会通过回调来主动告诉你,你关心的事件发生了。然后你需要主动的去获取数据,根据获取到的数据做一些操作。
Observable:agera中的被观察者
Updatable: agera中的观察者//Push event
Supplier: agera中提供数据的,通过get()方法获取数据//Pull data
Repository:agera中集成了Observable和Supplier功能的一个[提供数据的被观察者]

实现功能:改变字体颜色

传统的实现方式:

几行代码(设置click事件,然后设置颜色值)

    @Override
    public void init(Bundle savedInstanceState) {
        mBinding = DataBindingUtil.setContentView(this, R.layout.change_txt_color);

        mBinding.btnChangeColor.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        mBinding.setTxtColor(MockRandomData.getRandomColor());
    }

使用Agera实现:

点击Button->触发Update->get颜色值->setColor

点击Button 触发Update Event
    //一个onClick事件被观察者
    mObservable = new OnClickObservable() {
        @Override
        public void onClick(View view) {
            dispatchUpdate();
        }
    };
    //点击Button的时候,dispatchUpdate()
    mBinding.setObservable(mObservable);
    android:onClick="@{observable::onClick}"

Repository关联

    //数据源定义(颜色值)
    Supplier<Integer> supplier = new Supplier<Integer>() {
        @NonNull
        @Override
        public Integer get() {
            return MockRandomData.getRandomColor();
        }
    };
    //
    mRepository = Repositories.repositoryWithInitialValue(0)
            .observe(mObservable)
            .onUpdatesPerLoop()
            .thenGetFrom(supplier)
            .compile();
    //添加Updatable
    @Override
    protected void onResume() {
        super.onResume();
        mRepository.addUpdatable(this);
    }
    //注销Updatable
    @Override
    protected void onPause() {
        super.onPause();
        mRepository.removeUpdatable(this);
    }

set颜色值

    @Override
    public void update() {
        mBinding.setTxtColor(mRepository.get());
    }

GitHub地址

AndroidAgeraTutorial

Reference

  1. Google Agera 从入门到放弃
  2. Agera Wiki
  3. 开启漫漫的agera之旅