Android实现布局顶部底部上下滑动效果

Posted Tobey_r1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android实现布局顶部底部上下滑动效果相关的知识,希望对你有一定的参考价值。

android实现布局顶部底部上下滑动效果

关于

  最近一个项目的新需求才让我知道自己很多基本功都不扎实,一个简单的底部滑入滑出就让我摸不着头脑了,后面还是去看了以前买的书才知道可以用属性动画的(ObjectAnimator)来实现:

效果

实现

这里我是直接在项目上操作的,所以布局文件里面你们就看看就行了,实际还是看代码(布局文件activity_map_search):
因为我使用的绝对布局,然后我将要底部滑动的布局(id是ll_layout)通过 android:layout_alignParentBottom="true"放到了最底部并设置invisible。同样如果是顶部的话就不需要设置位置了,默认置顶。

<?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"
    tools:context=".LocationModel.MapSearchActivity">
    <com.tobey.zhdj.widget.MyMapViewLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.baidu.mapapi.map.TextureMapView
            android:id="@+id/mapView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.baidu.mapapi.map.TextureMapView>
    </com.tobey.zhdj.widget.MyMapViewLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/img_location"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:src="@mipmap/icon_imbt_location"/>

       
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_below="@id/img_location"
        android:id="@+id/ll_layout"
        android:padding="@dimen/text_10"
        android:layout_marginBottom="@dimen/text_40"
        android:layout_alignParentBottom="true"
        android:visibility="invisible"
        android:orientation="vertical"
        >
        <include layout="@layout/location_list_item" android:id="@+id/test"/>
        <include layout="@layout/location_list_item"/>
        <include layout="@layout/location_list_item"/>
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_marginTop="@dimen/text_10"
            android:visibility="gone"
            android:layout_height="match_parent"
            android:id="@+id/recycle_view"/>
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#F8F8F8"
        android:id="@+id/rl_click"
        android:layout_alignParentBottom="true"
        android:layout_height="@dimen/text_40">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/text_name_scenic_bottom"
            android:text="景点列表"
            android:textColor="@color/black_text"
            android:textSize="@dimen/size_20sp"
            android:layout_centerInParent="true"
            android:textStyle="bold"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/img_bottom_up"
            android:layout_centerVertical="true"
            android:src="@mipmap/ic_bottom_scenic_up"
            android:layout_toRightOf="@id/text_name_scenic_bottom"
            android:layout_marginStart="@dimen/text_10"/>
    </RelativeLayout>
</RelativeLayout>

修改MapSearchActivity.kt文件

  主要方法是 ObjectAnimator.ofFloat(ll_layout, "translationY",xxf, xxxf),其中ll_layout是要滑动的对象,translationY表示垂直滑动,对应translationX表示侧边滑动,后面的两个参数表示移动的距离,从xxf移动到xxxf。

//定义标识符作为上下滑动的判断
 private var flag = false
 override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_map_search)
       rl_click.setOnClickListener  if (flag) closeMenu() else openMenu() 
    
    
    private fun closeMenu()
       //这里是用来实现上滑下滑时候图片的上下方向示意
        img_bottom_up.setImageDrawable(resources.getDrawable(R.mipmap.ic_bottom_scenic_up))
        //注释部分是当布局文件在父布局的顶端时,弹入回收效果
        //val animator = ObjectAnimator.ofFloat(ll_layout, "translationY",0f, (0 - ll_layout.height - 10).toFloat())
        //当布局在父布局的底部时,弹入回收布局
        ObjectAnimator.ofFloat(ll_layout, "translationY",0f, (ll_layout.height).toFloat()).apply 
            duration = 250
            interpolator = DecelerateInterpolator() //减速插值器
            start()
        .addListener(close)
    
    
    private fun openMenu() 
        img_bottom_up.setImageDrawable(resources.getDrawable(R.mipmap.ic_bottom_scenic_down))
        if (ll_layout.visibility == View.INVISIBLE) ll_layout.visibility = View.VISIBLE
        //注释部分是当布局文件在父布局的顶端时,弹出效果
     //   val animator = ObjectAnimator.ofFloat(ll_layout, "translationY", (0 - ll_layout.height - 10).toFloat(),0f)
        ObjectAnimator.ofFloat(ll_layout, "translationY", ll_layout.height.toFloat(),0f).apply 
            duration = 250
            interpolator = DecelerateInterpolator() //减速插值器
            start()
        .addListener(open)
    

  写到这里文章就结束了,有问题欢迎批评指正!

以上是关于Android实现布局顶部底部上下滑动效果的主要内容,如果未能解决你的问题,请参考以下文章

android可滑动收起展开布局

Android 中怎么判断WebView已经滑动到底部或顶部还在滑动类似上拉刷新下来加载更多.

android开发中,怎么实现上下滑动,不是ScrollView,我要的是一次滑动整个页面,跟横向滑动效果一样。。

简单Fragment+Tablayout+ViewPage实现底部和顶部滑动(菜单栏)

【Axure】触摸屏上下滑动效果

解决ios移动端,滑动回弹效果遮挡页面顶部和底部Fixed元素的问题