安卓仿知乎个人主页,实现嵌套滑动和渐隐效果

该博客详细介绍了如何在安卓应用中实现类似知乎个人主页的嵌套滑动和头像名字渐隐效果。通过使用CoordinatorLayout、AppBarLayout和NestedScrollView等组件,结合Behavior进行布局联动,实现了头部滑动伸缩、ViewPager的滑动支持以及头像透明度的动态调整。同时,解决了标题点击的问题,确保在头部滑动过程中仍能正常响应点击事件。
摘要由CSDN通过智能技术生成
本篇文章已经授权微信公共号guolin_blog(郭霖)独家发布

转载请注明作者AndroidMsky和出处
http://blog.csdn.net/AndroidMsky/article/details/53784984
本文github:
https://github.com/AndroidMsky/linkScrollMsky

先看知乎的效果:

这里写图片描述

再看我们实现的效果:

这里写图片描述

网上也有很多嵌套滑动的例子,先说说我这个的优点。
1.头部可以参与滑动
2.下面可以加viewpager
3.支持RecyclerView和ScrollView
4.基于Behavior可以获取事实滚动距离可做更多联动
5.不必重写过多的滑动事件处理,几乎只是玩xml

实现思路:
CoordinatorLayout做最上层布局,上方伸缩处AppBarLayout,下面viewpager里面放NestedScrollView。

观察知乎主页的效果:

1.下面多item处向上滑动首先伸缩上面的head头部,头部收缩后下面则进入滑动,

2.反之向下拉先回把多item出拉到最上方,之后伸展头部。

3.下面多item处支持左右滑动。

4.头像名字渐隐效果。

5.两个title可以点击(title是在head中而不是下面)

1。2

下面我们来各个击破:
1和2其实最容易只要实现系统的CoordinatorLayout

自从谷歌推出CoordinatorLayout后嵌套滑动玩起就没那么难了,
12实现其实十分简单就是系统自带的CoordinatorLayout即可实现,不用书写java代码。结构如下

CoordinatorLayout—– AppBarLayout—–CollapsingToolbarLayout——Toolbar。
CoordinatorLayout—–viewPager。

父布局CoordinatorLayout两个节点AppBarLayout和viewPager
AppBarLayout中的节点ollapsingToolbarLayout它的节点又是Toolbar
如此布局嵌套联动伸缩toolsbar效果就实现了。下面是布局嵌套结构的简略代码。

<?xml version="1.0" encoding="
  • 5
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
实现仿知乎滑动动画可以使用Android平台自带的ViewPager组件,通过设置页面切换时的滑动动画效果实现。具体步骤如下: 1. 在布局文件中添加ViewPager组件。 2. 创建Fragment或者View作为ViewPager的子页面,并将其添加到ViewPager中。 3. 通过ViewPager.setAdapter方法设置ViewPager的适配器,适配器需要继承自FragmentPagerAdapter或者FragmentStatePagerAdapter类。 4. 通过ViewPager.setPageTransformer方法设置页面切换时的滑动动画,可以使用Android平台提供的一些默认动画效果,也可以自定义动画效果。 5. 最后在代码中通过ViewPager.setCurrentItem方法切换页面即可。 以下是一个简单的实现代码示例: ``` // 布局文件中添加ViewPager组件 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> // 创建Fragment或者View作为ViewPager的子页面 // 创建ViewPager适配器 public class MyPagerAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentList; public MyPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) { super(fm); this.fragmentList = fragmentList; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } } // 在代码中设置ViewPager适配器和滑动动画效果 ViewPager viewPager = findViewById(R.id.viewpager); List<Fragment> fragmentList = new ArrayList<>(); fragmentList.add(new MyFragment1()); fragmentList.add(new MyFragment2()); fragmentList.add(new MyFragment3()); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragmentList); viewPager.setAdapter(adapter); viewPager.setPageTransformer(true, new ZoomOutPageTransformer()); // 设置滑动动画 // 自定义动画效果 public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0f); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0f); } } } ``` 以上就是实现仿知乎滑动动画的基本步骤和示例代码。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值