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

Posted 2021-10-10 Tobey_r1

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

• 关于
• 效果
• • 实现
  • 修改MapSearchActivity.kt文件

关于

  最近一个项目的新需求才让我知道自己很多基本功都不扎实，一个简单的底部滑入滑出就让我摸不着头脑了，后面还是去看了以前买的书才知道可以用属性动画的（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)
    }

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