这篇文章是实现Material 风格的INSTAGRAM 系列文章第第五部分。今天我们将实现概念视频20到27秒里面 新闻item中like操作的效果。
下面是今天所要达到的效果（分别是Lollipop以及Lollipop之前的效果）：
视频暂略
Like the feed item
根据概念视频，我们有两种“like”一条新闻的方式-通过点击心形按钮或者点击图片（实际上应该是双击才对，真实的Instagram app也是双击，不过这点就留给你们自己下去做练习吧，嘻嘻）。
如以往一样，我需要在项目中添加一些资源文件，这次是一串心形图片：
从左到右的心形依次是like计数按钮，like按钮，图片like按钮。
like计数按钮
我们从最简单的效果开始做。like计数按钮的数字更新需要伴随这进/出动画（旧数字向上滚出，同时新数字由下到上移动），下面是实际效果图：
看起来眼熟？那就对了，这和我们在 第三篇文章 中实现的评论发送按钮是一样的效果。
但是这次我们使用TextSwitcher – 一个帮助我们动画切换两个TextView文字的ViewGroup。这两个TextView均有用（我们需要通过调用TestSwitcher.setText()方法来实现在两个TextView之间动画切换并更新值）。
首先，我们修改item_feed.xml布局，在底部添加一个like计数按钮：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!--...--> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical|right"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_heart_small_blue" /> <TextSwitcher android:id="@+id/tsLikesCounter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:inAnimation="@anim/slide_in_likes_counter" android:outAnimation="@anim/slide_out_likes_counter"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="123 likes" android:textColor="@color/text_like_counter" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/text_like_counter" /> </TextSwitcher> </LinearLayout> <!--...--> |
下面是添加的view在Android Studio中的预览效果：
代码中TextSwitcher将让两个子TextView动画切换，我们不需要担心隐藏的问题-内部已经实现了。android:inAnimation 和 android:outAnimation用于指定前一个子view和后一个子view的过度动画。
用0dp来达到更好的性能
包含了like计数按钮的LinearLayout被赋予了layout_weight="1"的属性,其父布局依然是LinearLayout，当LinearLayout只有一个子view使用了weight值，那么这个子view将吸收剩余的所有空间。而使用layout_width="0dp"可以让性能更高，因为这个view不需要被测量宽度了。
现在，我们添加一些代码到FeedAdapter。唯一值得一提的代码是updateLikesCounter()方法，这里是 包含所有改变的一次提交。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
private void updateLikesCounter(CellFeedViewHolder holder, boolean animated) { int currentLikesCount = likesCount.get(holder.getPosition()) + 1; String likesCountText = context.getResources().getQuantityString( R.plurals.likes_count, currentLikesCount, currentLikesCount ); if (animated) { holder.tsLikesCounter.setText(likesCountText); } else { holder.tsLikesCounter.setCurrentText(likesCountText); } likesCount.put(holder.getPosition(), currentLikesCount); } |
这个方法用两种方式更新like计数按钮：
带动画的：(用于动态更新，当用户点击like按钮的时候使用) – 使用 TextSwitcher.setText() 方法。
不带动画的：(onBindViewHolder()中被调用，这种情况不需要动画) – 使用方法 – 这个方法更新当前TextView的值。
其实你可能还是不了解这两个方法的区别，看看官网的解释就一目了然了。
TextSwitcher.setCurrentText()： 设置当前正在显示的TextView的值。
TextSwitcher.setText()： 设置下一个TextView的值，并切换到下一个TextView。
你可能注意到了，我们使用了Quantity字符串来处理单复数的问题，这里你可以找到更多关于android中使用Plurals 的知识。
like按钮动画
现在我们将专注于like按钮的动画，它的行为比概念视频上的看起来还要炫一些，截图如下：
同时播放多个动画
这个动画效果由捆绑在一起的多个动画组成。因此我们不能像以前那样使用 ViewPropertyAnimator。幸好有播放多个动画的简便方法。 AnimatorSet 这个类可以将多个动画放在一起，然后可以选择同时播放，顺序播放，或者是混合播放。这里有更多的描述 Choreographing Multiple Animations 。
我们的like按钮效果由3个动画组成：
360度的旋转动画 – 这个是最开始播放的动画
Bounce动画 – 由两个动画组成（ scaleX 和 scaleY 动画），当旋转动画结束后触发这个动画。
下面是设置like按钮的所有相关代码（和like计数按钮一样，分为动画与静态两种方式）：
|
1 2 able class="crayon-table">
| 1 2 今天我们将实现概念视频20到27秒里面 新闻item中like操作的效果。
下面是今天所要达到的效果（分别是Lollipop以及Lollipop之前的效果）： 视频暂略 Like the feed item根据概念视频，我们有两种“like”一条新闻的方式-通过点击心形按钮或者点击图片（实际上应该是双击才对，真实的Instagram app也是双击，不过这点就留给你们自己下去做练习吧，嘻嘻）。 如以往一样，我需要在项目中添加一些资源文件，这次是一串心形图片：
从左到右的心形依次是like计数按钮，like按钮，图片like按钮。 like计数按钮我们从最简单的效果开始做。like计数按钮的数字更新需要伴随这进/出动画（旧数字向上滚出，同时新数字由下到上移动），下面是实际效果图：
看起来眼熟？那就对了，这和我们在 第三篇文章 中实现的评论发送按钮是一样的效果。 但是这次我们使用TextSwitcher – 一个帮助我们动画切换两个TextView文字的ViewGroup。这两个TextView均有用（我们需要通过调用 首先，我们修改
下面是添加的view在Android Studio中的预览效果：
代码中TextSwitcher将让两个子TextView动画切换，我们不需要担心隐藏的问题-内部已经实现了。 用0dp来达到更好的性能包含了like计数按钮的 现在，我们添加一些代码到
这个方法用两种方式更新like计数按钮： 带动画的：(用于动态更新，当用户点击like按钮的时候使用) – 使用 不带动画的：( 其实你可能还是不了解这两个方法的区别，看看官网的解释就一目了然了。
你可能注意到了，我们使用了Quantity字符串来处理单复数的问题，这里你可以找到更多关于android中使用Plurals 的知识。 like按钮动画现在我们将专注于like按钮的动画，它的行为比概念视频上的看起来还要炫一些，截图如下：
同时播放多个动画这个动画效果由捆绑在一起的多个动画组成。因此我们不能像以前那样使用 ViewPropertyAnimator。幸好有播放多个动画的简便方法。 AnimatorSet 这个类可以将多个动画放在一起，然后可以选择同时播放，顺序播放，或者是混合播放。这里有更多的描述 Choreographing Multiple Animations 。 我们的like按钮效果由3个动画组成： 360度的旋转动画 – 这个是最开始播放的动画 Bounce动画 – 由两个动画组成（ scaleX 和 scaleY 动画），当旋转动画结束后触发这个动画。 下面是设置like按钮的所有相关代码（和like计数按钮一样，分为动画与静态两种方式）： |
