Android 仿简书搜索栏

最新推荐文章于 2023-02-10 11:21:07 发布
最新推荐文章于 2023-02-10 11:21:07 发布
阅读量586 收藏 6
点赞数 3
分类专栏： Code小生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40543575/article/details/79392256
版权

需求分析
当整个页面的轮播图部分上划消失的过程中，透明度会出现渐变的效果，同时当全部消失或者全部显示的时候搜索框宽度动态变化。

效果如下
这里写图片描述

实现这个效果， 只要关注几个点

1.搜索栏伸展和收缩动画效果实现
2.搜索栏伸展和收缩的时机
3.顶部透明度的渐变

搜索栏伸展和收缩动画效果实现：

我们只要明确，使用系统为我们提供的Transition框架，就可以轻而易举的实现了。
首先要引入依赖compile ‘com.android.support:design:25.3.1’，要知道我们使用到的这部分Transition效果只是封装了属性动画的内容，是可以兼容到5.0之前的。

private void expand() {
 //设置伸展状态时的布局
 tvSearch.setText("搜索简书的内容和朋友");
 RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
 LayoutParams.width = LayoutParams.MATCH_PARENT;
 LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
 mSearchLayout.setLayoutParams(LayoutParams);
 //设置动画
 beginDelayedTransition(mSearchLayout);
 }

 private void reduce() {
 //设置收缩状态时的布局
 tvSearch.setText("搜索");
 RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
 LayoutParams.width = dip2px(80);
 LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
 mSearchLayout.setLayoutParams(LayoutParams);
 //设置动画
 beginDelayedTransition(mSearchLayout);
 }

 void beginDelayedTransition(ViewGroup view) {
 mSet = new AutoTransition();
 //设置动画持续时间
 mSet.setDuration(300);
 // 开始表演
 TransitionManager.beginDelayedTransition(view, mSet);
 }

其中mSearchLayout就是搜索框的布局，只需要动态设置一下伸展和收缩的布局大小和其中显示的文字，剩下的就交给Transition吧~ 这样搜索框就可以来回摇摆了。

搜索栏伸展和收缩的时机：

观察一下效果，伸展的时机是当顶部完全盖住banner的时候开始的，收缩的时机是滚动到顶部的时候触发。需要我们监听scllerview的滚动状态。这里的顶部我是用了自定义布局的toolbar，然后用一个imageview代替了banner。

//scrollview滚动状态监听
 mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
  @Override
  public void onScrollChanged() {
  //改变toolbar的透明度
  changeToolbarAlpha();
  //滚动距离>=大图高度-toolbar高度 即toolbar完全盖住大图的时候 且不是伸展状态 进行伸展操作
  if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
   expand();
   isExpand = true;
  }
  //滚动距离<=0时 即滚动到顶部时 且当前伸展状态 进行收缩操作
  else if (mScrollView.getScrollY()<=0&& isExpand) {
   reduce();
   isExpand = false;
  }
  }
 });
 }

顶部透明度的渐变

private void changeToolbarAlpha() {
int scrollY = mScrollView.getScrollY();
//快速下拉会引起瞬间scrollY<0
if(scrollY<0){
 toolbar.getBackground().mutate().setAlpha(0);
 return;
}
//计算当前透明度比率
float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
//设置透明度
toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}

注意刚才监听滚动事件的时候调用changeToolbarAlpha()方法，并且需要初始设置为全透明
toolbar.getBackground().mutate().setAlpha(0);

edittext样式文件

<?xml version="1.0" encoding="utf-8"?><!-- 定义圆角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF" />
    <!-- 圆角 -->
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
    <!-- 边框颜色 -->
    <stroke
        android:width="1dip"
        android:color="#BDC7D8" />
</shape>

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c2c0c0"
    android:orientation="vertical"
    tools:context="com.project.exam0225searchview.MainActivity">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="1500dp">

                <ImageView
                    android:id="@+id/iv_img"
                    android:layout_width="match_parent"
                    android:layout_height="180dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/timg" />
            </FrameLayout>
        </FrameLayout>
    </ScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:fitsSystemWindows="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/ll_search"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:gravity="center">

                <EditText
                    android:id="@+id/tv_search"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bgcolor"
                    android:drawableLeft="@drawable/search_icon2"
                    android:gravity="center_vertical"
                    android:hint="搜索"
                    android:textColor="#8A8A8A" />
            </LinearLayout>
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

activity文件

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.tv_search)
    EditText tvSearch;
    @BindView(R.id.ll_search)
    LinearLayout mSearchLayout;
    @BindView(R.id.scrollView)
    ScrollView mScrollView;
    boolean isExpand = false;
    @BindView(R.id.iv_img)
    ImageView ivImg;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    private TransitionSet mSet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //设置全屏透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            ViewGroup rootView = (ViewGroup) ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0);
            ViewCompat.setFitsSystemWindows(rootView, false);
            rootView.setClipToPadding(true);
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS |
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }
        //设置toolbar初始透明度为0
        toolbar.getBackground().mutate().setAlpha(0);
        //scrollview滚动状态监听
        mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void onScrollChanged() {
                //改变toolbar的透明度
                changeToolbarAlpha();
                //滚动距离>=大图高度-toolbar高度 即toolbar完全盖住大图的时候 且不是伸展状态 进行伸展操作
                if (mScrollView.getScrollY() >= ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
                    expand();
                    isExpand = true;
                }
                //滚动距离<=0时 即滚动到顶部时 且当前伸展状态 进行收缩操作
                else if (mScrollView.getScrollY() <= 0 && isExpand) {
                    reduce();
                    isExpand = false;
                }
            }
        });

    }

    private void changeToolbarAlpha() {
        int scrollY = mScrollView.getScrollY();
        //快速下拉会引起瞬间scrollY<0
        if (scrollY < 0) {
            toolbar.getBackground().mutate().setAlpha(0);
            return;
        }
        //计算当前透明度比率
        float radio = Math.min(1, scrollY / (ivImg.getHeight() - toolbar.getHeight() * 1f));
        //设置透明度
        toolbar.getBackground().mutate().setAlpha((int) (radio * 0xFF));
    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void expand() {
        //设置伸展状态时的布局
        tvSearch.setHint("搜索喜欢的内容和朋友");
        RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
        LayoutParams.width = LayoutParams.MATCH_PARENT;
        LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
        mSearchLayout.setLayoutParams(LayoutParams);
        //开始动画
        beginDelayedTransition(mSearchLayout);
    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void reduce() {
        //设置收缩状态时的布局
        tvSearch.setHint("搜索");
        RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
        LayoutParams.width = dip2px(80);
        LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
        mSearchLayout.setLayoutParams(LayoutParams);
        //开始动画
        beginDelayedTransition(mSearchLayout);
    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    void beginDelayedTransition(ViewGroup view) {
        mSet = new AutoTransition();
        mSet.setDuration(300);
        TransitionManager.beginDelayedTransition(view, mSet);
    }

    private int dip2px(float dpVale) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dpVale * scale + 0.5f);
    }
}
时光锁定在过往的曾经
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android富文本编辑器(高仿简书)
06-11
一个Android富文本类库，支持编辑和预览，支持修改文字大小，各种样式（斜体，加粗。。。）、支持插入和删除图片。
android搜索框 仿qq搜索框
01-16
这是一个很不错的搜索框，简单易懂 感觉样子还可以 ，总之还不错啦，你可以根据你的需求改
android 简书个人主页,使用Kotlin仿的简书个人主页，只需一个控件
weixin_31109967的博客
06-03 576
界面做的比较丑，但是基本上实现了功能。为了学习最近比较火的kotlin语言，就试着写了个demo。参考上篇文章仿掌上英雄联盟的效果。效果图一、开始前的准备导入kotlin开发环境：在androidStudio3.0版本默认已经集成好了。直接在创建项目的时候勾选include Kotlin support，会自动帮我们创建好kotlin语言的项目。不勾选就是java。image.png如果是手动集成...
Android高仿QQ搜索框滑动功能
04-07
高仿android版QQ搜索框向上滑动动画效果，代码简单易懂。。。自己在项目中遇到这个功能，网上查不到，此demo希望帮助一些需要的童鞋少走弯路。。。
Android高仿QQ搜索框动画效果
01-15
鄙人，反复研究qq动画，虽未能有所成，但是一些基本的也都研究明白了，比如手机QQ里的搜索框点击效果，我反复观察，发现居然是一个动画效果。这里是由本人亲手写的，代码简单明了，在模拟器上一跑便知。
Android仿简书动态searchview搜索栏效果
08-30
总的来说，实现Android仿简书动态searchview效果主要涉及动画框架的使用、滚动事件监听、布局动态调整和自定义布局等多个方面。通过合理地组合这些技术，可以创造出与简书类似的高大上搜索栏效果。在实际开发中，...
Android仿简书搜索框效果的示例代码
08-29
Android仿简书搜索框效果的示例代码详解 本文主要介绍了Android仿简书搜索框效果的示例代码的实现细节，包括Activity布局、搜索框效果的实现原理、RecyclerView的使用等多个知识点。 一、Activity布局 Activity...
Android仿简书长按文章生成图片效果
01-20
总结来说，实现“Android仿简书长按文章生成图片效果”的过程涉及到布局设计、数据处理、事件监听、JavaScript交互、图片生成等多个技术点。开发者需要掌握WebView的使用，理解JavaScript与Android之间的交互机制，...
仿简书APP源码
08-14
仿简书APP源码，具体仅做参考。可以学习交流互动，满足开发需求
仿qq搜索效果SearchView
11-22
仿qq搜索效果SearchView，详情参见博客：http://blog.csdn.net/djl461260911/article/details/41391277
仿IOS搜索栏---SearchLayout
10-16
将EditText，ImageView组合，做成一个仿IOS的搜索栏，当然这是一个demo,是一个可重用的组件，如果要使用到项目里面，需要修改一下
Android实现简单实用的搜索框
08-28
主要为大家详细介绍了Android实现简单实用的搜索框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 仿京东顶部搜索框滑动伸缩动画效果.zip
10-16
android 仿京东顶部搜索框滑动伸缩动画效果,实现下滑搜索框变化效果
安卓搜索相关相关-如何用Android实现搜索输入框的动画效果.rar
07-29
如何用Android实现搜索输入框的动画效果.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android仿微信朋友圈全文、收起功能
大灰狼的小绵羊哥哥的博客
07-02 1617
前言一般在社交APP中都有类似朋友圈的功能，其中发表的动态内容很长的时候不可能让它全部显示。这里就需要做一个仿微信朋友圈全文、收起功能来解决该问题。在网上看到一个例子--&gt; http://blog.csdn.net/e042kuuw/article/details/55107537 ，写的很不错，但是有个bug，他这个Demo只有在条目固定的时候才正常，当增加、删除条目的时候会出现全文、收起...
仿简书动态 searchview 的实现，代码就这么多点
果酱大师的博客
06-20 927
转载地址http://www.jianshu.com/p/3d990193dcfb 实现这个效果， 只要关注几个点 1.搜索栏伸展和收缩动画效果实现 2.搜索栏伸展和收缩的时机 3.顶部透明度的渐变搜索栏伸展和收缩动画效果实现： 我们只要明确，使用系统为我们提供的 Transition 框架，就可以轻而易举的实现了。 首先要引入依赖 compile ‘com.android.suppor
android 简书搜索,Android_SearchView
weixin_33201508的博客
05-29 117
布局文件xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent">android:id="@+id/search_view"android:layout_width="match_parent"android:lay...
TabLayout选择指定位置，并且滑动到该位置
Gn____的博客
02-10 1174
使用View.post滑动tablayout到指定位置
Android 仿京东顶部搜索框滑动伸缩动画效果
热门推荐
仰望星空
06-17 1万+
最近使用京东发现，京东顶部的搜索框有一个动态的伸缩效果，根据用户的手势滑动，伸缩搜索框。觉得效果还不错，就看了下其他的应用有没有这种伸缩的效果，发现安居客也使用了类似的一种效果，然后就想着实现这样的一种动画效果。 首先看下第三方的效果图： 京东效果： 安居客效果： 我们最终实现的效果： 仿京东效果： 仿安居客效果： 看完效果图，接下来，我们开始具体实现上面的效果： 布局文件的编写 根据效果...
仿简书分享：UIActivityViewController系统原生分享
最新发布
05-25
UIActivityViewController 是 iOS 中一个非常方便的系统原生分享组件，可以让用户快速、简单地分享内容到短信、邮件、社交平台等。 使用 UIActivityViewController 非常简单，只需要以下几步： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值