欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android 仿简书搜索栏实现方法

程序员文章站 2022-05-14 09:49:38
需求分析 当整个页面的轮播图部分上划消失的过程中,透明度会出现渐变的效果,同时当全部消失或者全部显示的时候搜索框宽度动态变化。 效果如下 实现这个效果, 只要关注几个点 1.搜索栏伸展和收缩动画效...

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

效果如下
Android 仿简书搜索栏实现方法

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

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样式文件



    
    
    
    
    
    

布局文件




    

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

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

                
            </framelayout>
        </framelayout>
    

    

        

            

                
            
        
    

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);
    }
}