Android仿简书搜索框效果的示例代码
时间:2022-07-28
本文章向大家介绍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();
好了,以上就是搜索框效果的全部内容,代码中都有比较详细的注释。希望对大家的学习有所帮助。
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 第七节:Activiti6.0——Task的变量使用
- 第八节:Activiti6.0——启动流程相关
- 第九节:Activiti6.0——ReceiveTask接收信号、中间信号捕获事件和中间消息捕获事件的流程推进
- SpringBoot——全局异常捕获和自定义异常
- RTSP协议视频平台EasyNVR接入到EasyNVS管理平台后无法显示RTMP及RTSP视频流地址问题
- SpringBoot——配置logback日志
- Istio 运维实战系列(2):让人头大的『无头服务』-上
- 第十节:Activiti6.0——四种Job工作的产生与管理
- 使用vue3.0,不需要build也可以
- 听说vue项目不用build也能用?
- 使用 Vue 3.0,你可能不再需要Vuex了
- MySQL InnoDB索引:存储结构
- Element 根据描述展示表单
- VUE 插件注册
- 表格中的输入框验证