Android仿简书搜索框效果的示例代码
作者:人言落日是天涯 发布时间:2023-06-18 16:02:58
标签:Android,搜索框
前言
之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的。话不多说,直接上图。
Activity 布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<LinearLayout
android:id="@+id/id_ll_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:gravity="right"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/id_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/search_white_bg"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:gravity="center"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginRight="16dp"
>
<TextView
android:id="@+id/id_tv_search_min"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:gravity="center"
android:maxLines="1"
android:drawableLeft="@mipmap/search_icon"
android:text="搜索"
android:drawablePadding="10dp"
android:textColor="#b7b7b7"
android:textSize="13sp"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
这里的TextView要添加maxLines=1属性,如果不添加,当text=“搜索简书内容和朋友”时会有2行变1行的效果,看起来效果不太好。
头部视图:
<?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"
android:id="@+id/id_header_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/id_tv_header_view"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@color/c_3ec88e"
android:gravity="center"
android:text="我是头部"
/>
</RelativeLayout>
activity 头部 xml.png
下面咱们省略findViewById的代码,直接看核心代码:
变量初始化:
//获取屏幕宽度
mMaxWidth = ScreenUtil.getScreenWidth();
//搜索框距离屏幕边缘的margin
int rightMargin = Px2DpUtil.dp2px(this, 17);
//屏幕宽度减去左右margin后的搜索框宽度最大值
mMaxWidth = mMaxWidth -rightMargin*2;
//搜索框宽度最小值
mMinWidth = Px2DpUtil.dp2px(this, R.dimen.d_80);
//header布局高度
mHeaderHeight=Px2DpUtil.dp2px(this,R.dimen.d_120);
RecyclerView 滚动监听:
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
LinearLayoutManager l = (LinearLayoutManager)recyclerView.getLayoutManager();
//获取第一个可见视图的position
int position = l.findFirstVisibleItemPosition();
//获取第一个完全可见视图的position
int firstCompletelyVisibleItemPosition = l.findFirstCompletelyVisibleItemPosition();
//当position=0时,对标题栏执行透明度变化
if (position == 0) {
//计算滚动的距离占header高度的比例
double delta = Math.floor(((float) getScollYDistance(recyclerView) % mHeaderHeight));
//给标题栏设置透明度
mLlTitle.getBackground().setAlpha((int) delta);
}
//当position=1时,搜索框最大
if (position == 1) {
ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMaxWidth);
setAnimatorListener(animator,1);
}
//当position=0时,搜索框最小
if(firstCompletelyVisibleItemPosition==0){
ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMinWidth);
setAnimatorListener(animator,0);
}
}
});
获取RecycleView垂直滚动的距离:
public int getScollYDistance(RecyclerView rv) {
LinearLayoutManager layoutManager = (LinearLayoutManager) rv.getLayoutManager();
//获取第一个可见item的position
int position = layoutManager.findFirstVisibleItemPosition();
//获取第一个position的View
View firstVisiableChildView = layoutManager.findViewByPosition(position);
//获取第一个可见View的高度
int itemHeight = firstVisiableChildView.getHeight();
return (position) * itemHeight - firstVisiableChildView.getTop();
}
搜索框执行的动画(ObjectAnimator):
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
if (visibity == 1) {
mMinTvSearchView.setText("搜索简书内容和朋友");
}
if (visibity == 0) {
mMinTvSearchView.setText("搜索");
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.setDuration(100).start();
来源:http://www.jianshu.com/p/4419f6448d88?utm_source=tuicool&utm_medium=referral
0
投稿
猜你喜欢
- //==============================================// &n
- 0. 困扰很久的问题Android控件的宽和高保持比例,这是从我接触Android以来,一直不断会遇到的需求。以前,要么就是在代码里直接设置
- 比如在窗体中显示时间:错误思路一:我在窗体结构函数中写入一个死循环,每隔一秒显示一次当前时间public Form6() &n
- /* - - - - - - - - - 
- 本文是Java IO总结系列篇的第4篇,前篇的访问地址如下:总结java中创建并写文件的5种方式-JAVA IO基础总结第一篇总结java从
- 本文实例为大家分享了Android分类侧滑菜单的制作方法,供大家参考,具体内容如下classificmenuActivity.java代码:
- 冒泡排序原理①比较相邻的元素,如果前一个元素比后一个元素大,则交换这两个元素的位置②对每一对相邻的元素循环上面的步骤,最终最后面的元素就是最
- 前提:集成开发环境(IDE):eclipsejdk版本:8.0File类的几个方法:1)isFile()测试此抽象路径名表示的文件是否为普通
- 本文实例讲述了java生成随机数的方法。分享给大家供大家参考。具体实现方法如下:package com.tool.code; import
- 一、对象的创建1.1 new 类名虚拟机遇到一条new指令时,首先检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并检查这个符号引
- 前言安卓的Material库提供了许多样式更精美的控件,其中就有悬浮控件,它表现出一种悬浮在页面的效果,也就是有立体效果的,让人产生这种控件
- 项目背景我们开发过程中会碰到这样一类问题,就是数据层或三方接口返回的Bean对象需要转换重新装换一下我们需要的对象。我们通常的做法就是通过g
- mybatis 报错显示sql中有两个limit使用mybatis进行分页查询时,打印的查询sql中带有两个limit。经过审查:原因是由于
- 记录Java执行groovy脚本的两种方式,简单粗暴:一种是通过脚本引擎ScriptEngine提供的eval(String)方法执行脚本内
- 本文实例为大家分享了Javafx实现国际象棋游戏的具体代码,供大家参考,具体内容如下基本规则棋子马设计“日”的移动方式兵设计只能向前直走,每
- 1. ObsoleteAttributeObsoleteAttribute 适用于除组件、模块、参数和返回值以外的所有程序元素。将元素标记为
- 前言基于安卓平台的连续滚动图像组件ContinuousScrollableImageView(https://github.com/Cutt
- /// <summary> /// 设置程序开机启动 /// 或取消开机启动 /// &l
- 关于idea2021最新激活教程,请点击此处,获取最新激活教程还有一种激活方法,点击此处获取吧 !下面看下IDEA 2021.2 启动报错问
- 在多线程编程中,最简单的方法,无非就是利用 AfxBeginThread 来创建一个工作线程,看一下这个函数的说明:CWinTh