java constraint_[译]Constraint Layout 动画 |动态 Constraint |用 Java... - 简书

喔,又是新的一天,是时候学些新东西来让今天变得精彩起来了。

各位读者朋友你们好,希望各位一切顺利。我们之前已经在第一部分和 第二部分

中学习了许多关于 Constraint Layout 的新东西。现在是时候学习这个令人惊讶的布局剩下的部分了。这一篇很有可能是关于 Constraint Layout系列的最后一篇文章了。

动机:

写这篇文章的动机和在第一部分讨论的是一样的。现在在这篇文章里我主要谈论的是关于 Constraint Layout 的动画。关于这个主题有一个坏消息,那就是 Android 的开发文档并没有提供足够的帮助。在开始这篇文章之前我想先道个歉,由于知识的欠缺我可能会在某些地方出现错误的观点。但是我可以 100% 的保证通过我的讲述,最终你会喜欢并且适应这些动画。

我对这个主题的命名有些犹豫,所以我决定使用三个名字组成的题目,《Constraint Layout 动画 |动态 Constraint |用 Java 实现的 UI》。在这篇文章的最后,你会了解到为什么我选择这三个名字。

现在我不打算讲解 Constraint Layout 动画 API 带来的新特点,而是准备和你们分享我在实现动画效果时遇到的一些问题。那么让我们开始吧。

我们需要下载 2.3 版本的 Android studio。在之前的版本里 Visual Editor 不太好,在 Design Tab 里经常会出现一些错误信息。所以下载 2.3 测试版的 Android studio 非常重要,这个版本在我写这篇文章的时候是可以下载到的。

介绍:

在这篇文章里我们主要使用 Java 语言来工作,但是在开始之前我打算解释下在这篇文章里一切是如何运作的。

575829baa39d

我将基于上面的 APP 来进行这篇文章的论述。我有一个 constraint layout ,这里面总共有五个按钮。

应用和重置按钮除了应用和重置我们的动画之外不做其他事情。另外三个按钮被用来进行我们的动画。我们通过应用不同的动画来使这三个按钮共同协作。最重要的一点,我们在开始之前应该知道这三个按钮的 constraint。

android:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/applyButton"

android:text="Apply"

...

/>

android:id="@+id/resetButton"

android:text="Reset"

...

/>

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:text="Button 1"

android:layout_marginLeft="52dp"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginStart="52dp"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginTop="69dp" />

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/colorPrimaryDark"

android:text="Button 2"

app:layout_constraintLeft_toRightOf="@+id/button1"

android:layout_marginLeft="8dp"

android:layout_marginStart="8dp"

android:layout_marginRight="8dp"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintHorizontal_bias="0.571"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginTop="136dp" />

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@android:color/holo_red_dark"

android:text="Button 3"

android:layout_marginTop="102dp"

app:layout_constraintTop_toBottomOf="@+id/button1"

android:layout_marginLeft="88dp"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginStart="88dp" />

在你检查这段代码之后你可以轻松地了解这三个按钮之间的关系,下面这张图会给你一个更直观的认识。

575829baa39d

哈哈,我知道把这张图与 XML 文件对照来看很容易理解。现在你了解了这三个按钮互相之间的关系以及与父控件的关系。

在深入的发掘之前我想再介绍一个新的 API。

public class MainActivity extends AppCompatActivity {

private ConstraintLayout constraintLayout;

private ConstraintSet applyConstraintSet = new ConstraintSet();

private ConstraintSet resetConstraintSet = new ConstraintSet();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

constraintLayout = (ConstraintLayout) findViewById(R.id.main);

resetConstraintSet.clone(constraintLayout);

applyConstraintSet.clone(constraintLayout);

}

public void onApplyClick(View view) {

}

public void onResetClick(View view) {

}

留意粗体字,这些代码很简单。 ConstraintSet 就是我们要在这个教程中经常用到的一个 API。简单来说,你可以这样理解,这个 API 将记住我们在 XML 文件里实现的所有的 constraints。怎样使用呢?就像你看到的,在上面的代码里我拥有了一个 constarintLayout 引用,在那之后,我将把它的 constraints 复制到我们的两个变量 resetConstraintSet 和 applyConstraintSet 中。非常的简单。

现在为了适应新的要求,我将改变我的写作风格。

我将为同样的要求使用不同的语句,这样你可以轻易的理解我这篇文章的标题。

新需求:

我想要让按钮 1 动起来,当用户点击启动按钮的时候,让它与父控件的左边对齐。你能帮我一下么?

用开发语言来说:

兄弟,我想要在 constraint layout 里使用 Java 代码让按钮 1 在用户点击启动按钮的时候与父控件的左边对齐。你可以帮我一下么。

解决方案:

public void onApplyClick(View view) {

applyConstraintSet.setMargin(R.id.button1,ConstraintSet.START,8);

applyConstraintSet.applyTo(constraintLayout);

}

public void onResetClick(View view) {

resetConstraintSet.applyTo(constraintLayout);

}

从现在开始我只向你展示 onApplyClick() 方法,其他的代码始终是不变的。如果你看见了 onResetClick()方法,噢,请你忘掉它。我会一直使用最初时的 constraints 来返回到最开始的 UI 界面

现在有两个新的 API 方法。setMargin() 和 applyTo(),我感觉没有必要去解释 applyTo() 方法。

SetMargin() 方法将使用三个参数(viewId, anchor, margin)。

按钮 1 有 52dp 的左边距,但是当用户点击之后我会把间距改变到 8px。是时候看下这个过程了。

575829baa39d

除了猛地一跳,没有按钮移动的轨迹,这看起来并不像动画。所以我们需要重新检查下我们的代码。在检查之后我发现需要在 applyButton() 方法里再加点东西。在增加了之后,得到动画效果如下图所示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值