Android 仿高德地图可拉伸的BottomSheet的示例代码

前言

最近项目中需要用到高德地图搜索结果后的结果展示的可拉伸控件。

gaode.gif

而我看到这个效果图,觉得这个就是一个slidingpanel,但是翻阅了一些发现用google自带的bottomsheet实现更方便

什么是BottomSheet?

Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件,可以暂且叫做底部弹出框吧。 Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操作将其完全展开,或者完全隐藏,或者部分隐藏。对于Bottom Sheet的描述可以在官网查询:https://material.io/design/#

怎么使用?

添加依赖

implemention 'com.android.support:design:25.3.1'

布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/cl_chouti"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.amap.api.maps.MapView
   android:id="@+id/map_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

  <RelativeLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center">

   <ImageView
    android:id="@+id/mark"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:src="@drawable/poi_marker_pressed" />
   <!--为了更好与定位之后的红点适配此imagview只是适配用没有意义-->
   <ImageView
    android:layout_width="30dp"
    android:layout_height="40dp"
    android:layout_below="@+id/mark" />
  </RelativeLayout>
 </FrameLayout>

 <RelativeLayout
  android:id="@+id/bottom_sheet"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  app:behavior_hideable="true"
  app:behavior_peekHeight="160dp"
  app:layout_behavior="@string/bottom_sheet_behavior">

  <include layout="@layout/layout_bottom_sheet" />
 </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

layout_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#ffffff"
 android:orientation="vertical">
 <TextView
  android:id="@+id/tv_tishi"
  android:layout_gravity="center_horizontal"
  android:layout_marginTop="40dp"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="附近热点"
  android:textSize="10sp"/>
 <android.support.v7.widget.RecyclerView
  android:id="@+id/recyclerview"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>
</LinearLayout>

activity中的使用

 //底部抽屉栏展示地址
  bottomSheet = findViewById(R.id.bottom_sheet);
  behavior = BottomSheetBehavior.from(bottomSheet);

  behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
   @Override
   public void onStateChanged(@NonNull View bottomSheet, @BottomSheetBehavior.State int newState) {
    String state = "null";
    switch (newState) {
     case 1:
      state = "STATE_DRAGGING";//过渡状态此时用户正在向上或者向下拖动bottom sheet
      break;
     case 2:
      state = "STATE_SETTLING"; // 视图从脱离手指自由滑动到最终停下的这一小段时间
      break;
     case 3:
      state = "STATE_EXPANDED"; //处于完全展开的状态

      break;
     case 4:
      state = "STATE_COLLAPSED"; //默认的折叠状态
      break;
     case 5:
      state = "STATE_HIDDEN"; //下滑动完全隐藏 bottom sheet
      break;
    }

   }

   @Override
   public void onSlide(@NonNull View bottomSheet, float slideOffset) {
//    Log.d("BottomSheetDemo", "slideOffset:" + slideOffset);
   }
  });

注意分析

CoordinatorLayout 是Meterial Design中的一个新控件,通过behavior用来协调其他组件, 实现联动,因此父布局必须是CoordinatorLayout 。

注意到布局中,RelativeLayout中的app:layout_behavior=”@string/bottom_sheet_behavior”属性,点进去可以看到,这个属性实际上是设置系统默认实现的BottomSheet的behavior。原则上来说,只要是可以滚动的View,在加上了这个属性后,都可以作为BottomSheet来使用,建议使用NestedScrollView或者RecyclerView。

【贡献源码地址】

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android中ImageView.src设置图片拉伸、填满控件的方法

    问题 ImageView.src设置图片资源,图片不拉伸了,却有空隙部分: <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView andro

  • Android中关于自定义相机预览界面拉伸问题

    关于自定义相机预览界面拉伸问题 1.导致主要变形的原因是Camera预览界面旋转的角度和摄像头挂载的角度不同导致的 2.我们的Activity设置的方向是竖屏,这是手机的自然方向 所以宽比高短 3.角度:所谓屏幕和摄像头的角度,指的是相对于自然方向旋转过的角度,根据旋转角度即可获知当前的方向 4.假如说:手机是竖屏的情况下, 自然角度为0,但是Camera逆时针旋转90度,那咱们设置顺时针旋转90度,就正常 .手机是横屏的情况下Camera返回为0度 ,如果设置顺时针旋转90度,就回旋转 怎么设

  • Android Zxing二维码扫描图片拉伸问题的解决方法

    还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多人遇到,并分享在网上了,所以,我这里也就不需要重复造轮子了. 这里看了一篇博客:Android Zxing二维码扫描图片拉伸,用了上面的办法, 成功的解决图片拉伸问题. 解决方法如下: 修改CameraConfigurationManager.Java里面的initFromCameraParamet

  • Android开发框架之自定义ZXing二维码扫描界面并解决取景框拉伸问题

    先给大家展示下效果图: 扫描内容是下面这张,二维码是用zxing库生成的 由于改了好几个类,还是去年的事都忘得差不多了,所以只能上这个类的代码了,主要就是改了这个CaptureActivity.java package com.zxing.activity; import java.io.IOException; import java.util.Vector; import android.app.Activity; import android.content.Intent; import

  • Android Zxing二维码扫描图片拉伸的解决方法

    二维码扫描,Android Zxing图片拉伸解决. Zxing是google提供的二维码扫描工程 默认是横屏的  转换成竖屏后图片出现拉伸 这里提供解决办法: Zxing 修改 CameraConfigurationManager.Java文件的void initFromCameraParameters(Camera camera)方法 在Log.d(TAG, "Screen resolution: " + screenResolution);这句之后增加 Point screenR

  • Android 仿高德地图可拉伸的BottomSheet的示例代码

    前言 最近项目中需要用到高德地图搜索结果后的结果展示的可拉伸控件. gaode.gif 而我看到这个效果图,觉得这个就是一个slidingpanel,但是翻阅了一些发现用google自带的bottomsheet实现更方便 什么是BottomSheet? Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件,可以暂且叫做底部弹出框吧. Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

  • Android仿微信发送语音消息的功能及示例代码

    微信的发送语音是有一个向上取消的,我们使用onTouchListener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private MediaPlayer mPlayer = null; private MediaRecorder mRecorder = null; //语音文件保存路径 private String FileName = null; FileName = Environment.getExternalStorageDirectory().getAbs

  • android 仿QQ动态背景、视频背景的示例代码

    本文介绍了android 仿QQ动态背景.视频背景的示例代码,分享给大家,具体如下: 效果如下: 如上图类似效果图: 1, 自定义视频类 继承VideoView public class CustomVideoView extends VideoView { public CustomVideoView(Context context) { super(context); } public CustomVideoView(Context context, AttributeSet attrs)

  • 最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWork

  • Android 仿京东、拼多多商品分类页的示例代码

    最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取. 先放一个写完之后的样子: 写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果.右边的listView再嵌套一个GridView即可.如下图所示. 所以,我们需要的数据结构也就确定了,应该是数组套数组,也就说护肤大分类下又有子分类商品,类似于这个样子: ok,数据和UI结构确定了,就可以

  • Android基于高德地图poi的仿微信获取位置功能实例代码

    1.打开页面自动定位,同时搜索周边所有poi 2.点击搜索按钮,输入关键子,获取关键字搜索结果 3.选取listview中的一项即可定位到该位置,或者获取任何消息 4.文件类 1.MapActivity public class MapActivity extends Activity implements PoiSearch.OnPoiSearchListener { private MapView mMapView = null; private AMap aMap; private MyL

  • Android调用高德地图定位的方法

    在App中使用地图定位十分常见,购物功能的可以直接定位当前位置,发动态功能可以定位当前位置发出,社交功能可以定位周边用户等等.这里我使用高德地图定位当前位置并显示地址和经纬度. github代码传送门 先上效果图: 实现步骤: 1. 创建应用获取key: 接入第三方无一例外,去高德地图官网注册账号并创建应用.填入包名和keystore的Sha1. 创建应用 获取Sha1,输入命令keytool -v -list -keystore keystore文件路径,我在这里通过控制台获取调试版的: 进入

  • Android封装高德地图定位工具类Util的详细步骤

    目录 前提 第一步.去官网创建高德Key 第二步  通过Gradle集成SDK(方便): 第三步    配置参数 第四步   获取定位数据 总结 前提 每次做的项目中或者维护公司之前旧项目的时候,都会用到通过定位来获取经纬度,我们都知道,Android官方也提供了获取经纬度的方法,但是不太好使,所以就用了高德地图的API,不能每次用的时候都要写一堆代码,效率挺低的,于是就想着,封装成一个工具类,方便调用,为以后的项目,不管是管理方面还是查找方面都简洁了不少. 第一步.去官网创建高德Key 官网地

  • Android集成高德地图详细介绍

    最终效果是,本App展示地图,点击地图导航,调转三方实现导航. 1.迈出第一步,去创建自己的应用key https://lbs.amap.com/1.1创建完应用之后,点击页面的{添加},要求填写自己项目的信息 对于调试获取SHA1的方法是:1.打开cmd,2.在弹出的控制台窗口中输入 cd .android 定位到 .android 文件夹: 3.继续在控制台输入命令: 调试版本使用 debug.keystore,命令为:keytool -list -v -keystore debug.key

随机推荐