Android BottomSheet实现可拉伸控件

一、简介

Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件。 Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操作将其完全展开,或者完全隐藏,或者部分隐藏。

二、使用

1、添加依赖:

implementation 'com.android.support:design:28.0.0'

2、布局

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.amap.api.maps.MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
  <RelativeLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/height52px"
    app:behavior_hideable="false"
    app:behavior_peekHeight="@dimen/height84px"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    tools:ignore="MissingPrefix"
    android:background="#ffffffff"
    >

    <include layout="@layout/bottom_sheet" />
  </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>
<?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="@dimen/height216px"
  >
  <TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:gravity="center"
    android:text="bottom_sheet_peek" />
</RelativeLayout>

3、代码实现

//底部抽屉栏展示地址
    mBehavior = BottomSheetBehavior.from(mRelativeLayout);

    mBehavior.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.i("BottomSheetDemo", "slideOffset:" + slideOffset);
      }
    });

4、几个属性含义:

// behavior_hideable:定义是否能通过下滑手势收起Bottom Sheet。
   app:behavior_hideable="true"
  //  behavior_peekHeight:定义可见部分的高度。
  app:behavior_peekHeight="80dp"
  app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

5、BottomSheet的五种状态:

STATE_DRAGGING:手指在BottomSheet上下拖动从而使得布局跟着上下移动
STATE_SETTLING:当手指抬起之后,会根据当前的偏移量,决定是要将BottomSheet收起还是展开

这两种属于中间态,类似于ViewPager的SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING
--------------------------------------
STATE_EXPANDED:展开
STATE_COLLAPSED:收起
STATE_HIDDEN:隐藏

三、封装的框架推荐

Flipboard/bottomsheet

soarcn/BottomSheet

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

(0)

相关推荐

  • Android BottomSheet效果的两种实现方式

    本文介绍了Android BottomSheet效果的两种实现方式,分享给大家,具体如下: BottomSheet效果 BottomSheet的效果是指从屏幕底部向上滑的效果,是MaterialDesign风格的一种,视觉效果如下: BottomSheet效果 实现这种效果有几种不同的方式,如果是在一个固定的页面上添加这种效果,可以在该页面布局中添加BoottomSheet相关的控件.如果是作为通用控件来提供给不同页面使用,则可以使用BottomSheetDialog实现,本文将对两种方法进行讲

  • 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 BottomSheetDialog实现底部对话框的示例

    Android 6.0新控件 BottomSheetDialog | 底部对话框 介绍及使用详情 extends AppCompatDialog Base class for Dialogs styled as a bottom sheet 基于Dialog样式的一个底部对话框 先看看效果 对于弹出的内容完全由自己来掌控,想实现什么样子就实现什么样子,很灵活 使用方法 BottomSheetDialog来自design兼容包,使用需要添加依赖.android studio 添加依赖如下: dep

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

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

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

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

  • Android BottomSheet实现可拉伸控件

    一.简介 Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件. Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操作将其完全展开,或者完全隐藏,或者部分隐藏. 二.使用 1.添加依赖: implementation 'com.android.support:design:28.0.0' 2.布局 <?xml version="1.0" encoding="

  • android应用开发之spinner控件的简单使用

    Android的控件有很多种,其中就有一个Spinner的控件,这个控件其实就是一个下拉显示列表.Spinner是位于 android.widget包下的,每次只显示用户选中的元素,当用户再次点击时,会弹出选择列表供用户选择,而选择列表中的元素同样来自适配器.Spinner是View类的一个子类. 先看spinner的效果图: 代码: MainActivity package com.mecury.spinnertest; import java.util.ArrayList; import a

  • 分享Android仿刮奖效果控件

    本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr

  • Android编程开发之TextView控件用法(2种方法)

    本文实例讲述了Android编程开发之TextView控件用法.分享给大家供大家参考,具体如下: 这里我们会讲讲常用控件的使用. 在今后的大多数章节里面也是一样的,我们会具体的说说某些控件的用法.因为只要把这些控件组合在一起它们就是一个应用了. 好吧我们直接看看这个控件怎么用. 细心的同学会发现,其实这个控件的内容是定义在values文件夹里面的strings.xml中的. 那么我们只需要给它加一段代码: 复制代码 代码如下: <string name="test">Wel

  • Android开发之瀑布流控件的实现与使用方法示例

    本文实例讲述了Android开发之瀑布流控件的实现与使用方法.分享给大家供大家参考,具体如下: public class FlowLayout extends ViewGroup { /**行里子view之间的行距离*/ public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding); /**行里子view之间的垂直距离*/ public int mVerticalSpace = Util.getDimen(R.dimen.top

  • Android开发中自定义ProgressBar控件的方法示例

    本文实例讲述了Android开发中自定义ProgressBar控件的方法.分享给大家供大家参考,具体如下: 很简单,首先加载Drawable,在onMeasure设置好其区域大小, 然后使用canvas.clipRect绘图 public class ProgressView extends ImageView { private Drawable maskDraw; /** * 加载的进度 0-100 */ private int mProcess = 20; public ProgressV

  • 总结Android中MD风格相关控件

    要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如: compile 'com.android.support:design:24.1.1' 一.CoordinatorLayout 1.CoordinatorLayout + AppBarLayout 布局文件代码如下: <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.

  • Android实现显示电量的控件代码

    下面介绍了Android实现显示电量的控件代码,具体代码如下: 1.目录结构,本人是使用安卓死丢丢. 2.运行界面,输入框中输入数值,点击刷新,会再电池中显示出相应的电量 3.绘制自定义电池控件,首先,新建一个类BatteryState继承View private Context mContext; private float width; private float height; private Paint mPaint; private float powerQuantity=0.5f;/

  • Android开发中给EditText控件添加TextWatcher监听实现对输入字数的限制(推荐)

    做这个功能是因为开发项目的时候,由于后台接口的一些参数的值的长度有要求,不能超过多少个字符,所以在编辑框中输入的字符是要有限制的. 下面就来看一下demo的实现过程: 首先,在xml控件中放置一个EditText控件,然后初始化该控件并对该控件添加文本监听.xml自己简单的设计一下,代码较为简单,直接上代码: package com.example.edittext; import android.app.Activity; import android.os.Bundle; import an

  • Android自定义View之组合控件实现类似电商app顶部栏

    本文实例为大家分享了Android自定义View之组合控件,仿电商app顶部栏的相关代码,供大家参考,具体内容如下 效果图: 分析:左右两边可以是TextView和Button,设置drawableTop即可,中间的看着像是EditText,但是用过淘宝天猫等类似app的话会发现点击搜索不是在当前Activit进行搜索的,是跳转到另外的页面进行的,所以用TextView然后设置背景即可. 实现流程 参数列表: 设置属性文件:values下建立attrs.xml文件,添加需要自定义的属性. <?x

随机推荐