『自定义View实战』—— 银行种类选择器

  |     |   本文总阅读量:

在工作中难免遇到自定义 View 的相关需求,本身这方面比较薄弱,因此做个记录,也是自己学习和成长的积累。自定义View实战

前言

年前的最后一个开发需求,将之前H5开卡界面转变成native。意思就是开卡这个需求做成Android原生的界面,就这单单一个界面需要请求 8 个接口!可想逻辑是有多复杂,其中中间有个小需求-「选择银行卡」。来看一下UI出图。

设计图

大致就是点击「银行」弹出popupWindow,在里面嵌套一个银行选择器。这个「银行选择器」可以滚动类似IOS那边的UIPickerView,或者安卓的日期选择器,但是为了完成特殊的定制效果,所以咱们得自己写一个。

看一下效果图:

BankPickerView.gif

实现

思路其实也很简单。

滚动

ScrollViewListViewRecyclerView都可以实现滚动,这自然不用说,首尾都有offset个位置是留占坑,可以添加空数据作为占坑的显示。

回弹

那就在手指松开的时候,拿到滑动的距离,通过一系列的逻辑处理,回弹到最近的Item处即可。

回调

在滑动停止的时候,通过计算获取当前所处的item的位置,通过listener回调给调用者。

因为时间有限,所以没对其进行封装,如果想使用请自行下载,通过修改源码满足特定的需求。

至于弹出的效果,用的是popupWindow,其中遇到了一下坑,在这里记录并分享一下。

背景透明

popupWindow不像dialog本身是没有背景透明的效果的,需要自己实现。主要就是两种实现方式。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:skin="http://schemas.android.com/android/skin"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#7D000000"
    skin:enable="true">

        <!-- 内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fff"
            android:layout_alignParentBottom="true"
            android:orientation="vertical">
        </LinerarLayout>
 </RelativeLayout>

一种就是直接在pooupWidnow展示的布局强行假如半透明的背景。

第二种获取WindowManager修改当前窗口的透明值。

点击返回关闭 popupWindow

首先如果想实现点击返回让popupWindow消失,就得实现View.OnKeyListener接口,并且在回调中,让其消失。

@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        dismiss();
        return true;
    }
    return false;
}

但是你会发现并没有生效,那是因为当前没有获取到焦点,需要设置setFocusable(true)即可。

#rewardButton { background-color: #ea6f5a; } .btn-pay { margin-bottom: 20px; padding: 8px 25px; font-size: 16px; color: #fff; background-color: #ea6f5a; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #QR img{ height: 200px; height: 200px; margin: 20px; }
文章目录
  1. 1. 前言
  2. 2. 实现
您是第 位小伙伴 | 本站总访问量 | 已经写了 120.4k 字啦

载入天数...载入时分秒...