Android模仿知乎的回答详情页的动画效果

时间:2021-11-04 23:21:47

 废话不多说,咱们第一篇文章就是模仿“知乎”的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果

Android模仿知乎的回答详情页的动画效果

    在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限,所以不是很连贯,推荐你直接下载一个知乎,找到这个界面自己玩玩
☞当文章往上移动到一定位置之后,最上面的标题栏bar和问题布局title是会隐藏的,回答者author布局不会隐藏
☞当文章往下移动移动到一定位置之后,原先隐藏的标题栏bar和问题布局title会下降显示
☞当文章往上移动的时候,下部隐藏的tools布局会上升显示
☞当文章往下移动的时候,如果tools布局是显示的,则隐藏
☞当标题栏bar和问题布局title下降显示的时候,title是从bar的下面出来的,有个遮挡的效果
☞当快速滑动内容到达底部的时候,隐藏的tools会显示出来
☞当快速滑动内容到顶部的时候,隐藏的bar和title也会显示出来

    不分析不知道,这样一个简单地效果,经过分析需要完成不少东西呢,那么下面根据要实现的需求,咱们分析一下解决方案。
    在做这种仿界面之前,我们可以使用adt带的view hierarchy工具看一下“知乎”原生是怎么实现的

Android模仿知乎的回答详情页的动画效果

    从右边的分析图可以看出,知乎的这个界面,内容用的webview,这很正常,因为用户的回答里面格式比较复杂,用webview是最好的解决方案,而标题栏是一个view,是actionbar还是自定义view呢,不得而知,下面是就是一个linearlayout包了4个togglebutton,布局很简单,我们没有webview,所以使用scrollview代替,上面的布局直接imageview了,设置个src,模拟一个布局。
    其实布局很简单,咱们一个效果一个效果的来实现。
    首先是下面的tools如何显示和隐藏呢?当然是用动画了!什么动画呢?能实现的有属性动画和帧动画,属性动画能够真实的改变view的属性,帧动画只是视觉上移动了,view的实际属性并不改变,这两种都可以,我们这里使用属性动画

?
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
/**
  * 显示工具栏
  */
 private void showtools() {
 
  objectanimator anim = objectanimator.offloat(img_tools, "y", img_tools.gety(),
    img_tools.gety() - img_tools.getheight());
  anim.setduration(time_animation);
  anim.start();
 
  istoolshide = false;
 }
 
 /**
  * 隐藏工具栏
  */
 private void hidetools() {
 
  objectanimator anim = objectanimator.offloat(img_tools, "y", img_tools.gety(),
    img_tools.gety() + img_tools.getheight());
  anim.setduration(time_animation);
  anim.start();
 
  istoolshide = true;
 
 }

    那么什么时候调用呢?从上面的需求分析中,我们知道,用户手指下拉的时候,tools显示,反之隐藏,那么我们就可以监听scrollview的ontouch,判断手指方向,实现动画效果的调用

?
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
35
mscroller.setontouchlistener(new view.ontouchlistener() {
   @override
   public boolean ontouch(view v, motionevent event) {
 
 
    switch (event.getaction()) {
 
     case motionevent.action_down:
      lasty = event.gety();
      break;
     case motionevent.action_move:
 
      float disy = event.gety() - lasty;
 
      //垂直方向滑动
      if (math.abs(disy) > viewslop) {
       //是否向上滑动
       isupslide = disy < 0;
 
       //实现底部tools的显示与隐藏
       if (isupslide) {
        if (!istoolshide)
         hidetools();
       } else {
        if (istoolshide)
         showtools();
       }
      }
 
      break;
    }
 
    return false;
   }
  });

     用变量istoolshide放置代码重复调用。

    下面的tools的问题解决了,我们再看一下上面的布局动画如何来实现。上面的思路和下面一样,也是通过属性动画,完成位置的移动,移动的布局有bar、title和根布局。为什么答题人布局author不移动呢?因为根布局必须移动,否则就会挡住下面的文字内容,根布局的移动会让子布局都跟着移动,所以只移动根布局即可。
    对了,为了更大范围的现实文本,“知乎”的webview是占据整个布局的,其他布局都是在根布局framelayout里面,所以,在首次加载的时候,下面的文本在开头需要留出一定的间隔,防止被遮挡,当上面的布局隐藏之后,就没有问题了。
    在简单分析之后,我再给出实现的布局的代码

?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
 >
 
 
 <com.socks.zhihudetail.myscrollview
  android:id="@+id/scroller"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >
 
  <textview
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:textsize="16sp"
   android:textcolor="@android:color/black"
   android:text="@string/hello_world"/>
 
 </com.socks.zhihudetail.myscrollview>
 
 
 <framelayout
  android:id="@+id/ll_top"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  android:orientation="vertical"
  android:layout_gravity="top">
 
  <imageview
   android:id="@+id/img_author"
   android:layout_width="match_parent"
   android:layout_height="80dp"
   android:scaletype="fitxy"
   android:src="@drawable/bg_author"/>
 
  <textview
   android:id="@+id/tv_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margintop="55dp"
   android:text="为什么美国有那么多肌肉极其强大的肌肉男?"
   android:textsize="18sp"
   android:background="#dbdbdb"
   android:gravity="center|left"
   android:paddingleft="15dp"
   android:paddingright="15dp"
   android:paddingtop="5dp"
   android:paddingbottom="5dp"
   android:textcolor="@android:color/darker_gray"
   />
 
  <imageview
   android:id="@+id/img_bar"
   android:layout_width="match_parent"
   android:layout_height="55dp"
   android:scaletype="fitxy"
   android:src="@drawable/bg_actionbar"/>
 
 </framelayout>
 
 <imageview
  android:id="@+id/img_tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:scaletype="fitxy"
  android:layout_gravity="bottom"
  android:src="@drawable/bg_bottom"/>
 
 
</framelayout>

    效果图如下,文本留了一些空行,保证不被遮挡。

Android模仿知乎的回答详情页的动画效果

    有的同学看了上面的效果图可能会疑惑,这里为什么没有答题人的布局呢?
    其实是这样的,为了模拟上部的布局显示时,title从bar下面出现的效果,所以特意这样设计的。我试过用linearlayout实现,效果也是可以实现的,但是当title往下移动显示的时候,会覆盖在bar上面,这也很好理解,linearlayout没有层次顺序,所以会遮挡。我试过view.bringtofront(),试图把bar的布局提高层次,但是这样会导致布局的紊乱,在首次加载的时候,bar会显示在最下面,是因为提高层次之后,bar的布局重新计算,所以不按照linearlayout的布局规则来了。无奈之下,换成了framelayout,但是又出现了问题,bar的高度可以设置,但是title的高度会随着文本的增加而改变,这样一来,最下面author的布局的位置就不能设置了,因为不知道距离上面多远,所以我们只能在代码里面动态的计算bar和title的高度,然后在界面加载的时候,动态的给author的布局设置margentop,保证位置的正确。
    因为在oncreate里面,还没有开始view的绘制,所以得不到控件的真实高度,我们可以用下面的方法,获取这个时期的高度

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//获取bar和title的高度,完成auther布局的margentop设置
  viewtreeobserver viewtreeobserver = fl_top.getviewtreeobserver();
  viewtreeobserver.addonpredrawlistener(new viewtreeobserver.onpredrawlistener() {
   @override
   public boolean onpredraw() {
 
    if (!hasmeasured) {
     framelayout.layoutparams layoutparams = new framelayout.layoutparams(framelayout
       .layoutparams.match_parent, framelayout.layoutparams.wrap_content);
     layoutparams.setmargins(0, img_bar.getheight() + tv_title.getheight(), 0, 0);
     img_author.setlayoutparams(layoutparams);
     hasmeasured = true;
    }
    return true;
   }
  });

     获取了高度之后,我们就可以正确地设置位置了。但是,如果保证上面的布局随着我们的内容的移动,而改变现实状态呢?
    经过我手动直观测试,知乎的这个界面是根据一个固定的值,来改变显示状态的,因此,我们可以监听scrollview的滑动距离,来判断。但是scrollview并没有给我们这样一个监听器,咋办?重写!

?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * created by zhaokaiqiang on 15/2/26.
 */
public class myscrollview extends scrollview {
 
 private bottomlistener bottomlistener;
 
 private onscrolllistener scrolllistener;
 
 
 public myscrollview(context context) {
  this(context, null);
 }
 
 public myscrollview(context context, attributeset attrs) {
  super(context, attrs);
 }
 
 protected void onscrollchanged(int l, int t, int oldl, int oldt) {
  super.onscrollchanged(l, t, oldl, oldt);
  if (getscrolly() + getheight() >= computeverticalscrollrange()) {
 
   if (null != bottomlistener) {
    bottomlistener.onbottom();
   }
 
  }
 
  if (null != scrolllistener) {
   scrolllistener.onscrollchanged(l, t, oldl, oldt);
  }
 
 
 }
 
 public void setbottomlistener(bottomlistener bottomlistener) {
  this.bottomlistener = bottomlistener;
 }
 
 public void setscrolllistener(onscrolllistener scrolllistener) {
 
  this.scrolllistener = scrolllistener;
 
 }
 
 
 public interface onscrolllistener {
 
  public void onscrollchanged(int l, int t, int oldl, int oldt);
 
 }
 
 
 public interface bottomlistener {
 
  public void onbottom();
 
 }
 
 
}

    我们只需要重写onscrollchange()方法即可,在里面不光可以时时的得到位置的变化,还添加了一个bottomlistener接口来监听滑动到底部的事件,写好之后就很简单了

?
1
2
mscroller.setbottomlistener(this);
mscroller.setscrolllistener(this);

 

?
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
  * 显示上部的布局
  */
 private void showtop() {
 
  objectanimator anim1 = objectanimator.offloat(img_bar, "y", img_bar.gety(),
    0);
  anim1.setduration(time_animation);
  anim1.start();
 
  objectanimator anim2 = objectanimator.offloat(tv_title, "y", tv_title.gety(),
    img_bar.getheight());
  anim2.setinterpolator(new decelerateinterpolator());
  anim2.setduration(time_animation + 200);
  anim2.start();
 
  objectanimator anim4 = objectanimator.offloat(fl_top, "y", fl_top.gety(),
    0);
  anim4.setduration(time_animation);
  anim4.start();
 
  istophide = false;
 }
 
 
 /**
  * 隐藏上部的布局
  */
 private void hidetop() {
 
  objectanimator anim1 = objectanimator.offloat(img_bar, "y", 0,
    -img_bar.getheight());
  anim1.setduration(time_animation);
  anim1.start();
 
  objectanimator anim2 = objectanimator.offloat(tv_title, "y", tv_title.gety(),
    -tv_title.getheight());
  anim2.setduration(time_animation);
  anim2.start();
 
  objectanimator anim4 = objectanimator.offloat(fl_top, "y", 0,
    -(img_bar.getheight() + tv_title.getheight()));
  anim4.setduration(time_animation);
  anim4.start();
 
  istophide = true;
 }
 
 @override
 public void onbottom() {
  if (istoolshide) {
   showtools();
  }
 }
 
 @override
 public void onscrollchanged(int l, int t, int oldl, int oldt) {
 
  if (t <= dp2px(top_distance_y) && istophide && isanimationfinish) {
   showtop();
   log.d(tag, "显示");
  } else if (t > dp2px(top_distance_y) && !istophide && isanimationfinish) {
   hidetop();
   log.d(tag, "隐藏");
  }
 }

    我们只需要根据当前的位置,来实现布局的显示和隐藏就可以啦!

    ok,这篇文章就到这里,希望对大家的学习有所帮助。