Android调整第三方库PickerView宽高--回忆录

人民的石头

已于 2024-09-05 10:00:23 修改

阅读量278

点赞数 6

分类专栏：移动端 Android 文章标签： android

于 2024-09-05 09:57:49 首次发布

本文链接：https://blog.csdn.net/shi450561200/article/details/141922712

版权

Android 同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

移动端

32 篇文章 1 订阅

订阅专栏

一、效果

  // 时间选择
    implementation 'com.contrarywind:Android-PickerView:4.1.9'

多年前，使用到事件选择器，但是PickerView默认宽度使满屏的，不太符合业务需求，当时为此花了许多时间，最终找到了解决方案，就是把PickerView添加到弹框中，可以任意调整PickerView的宽高，说干就干，下面使源码。

二、新建以一个对话框布局

1.文件名称custom_picker_dialog.xml，源代码如下

修改布局的宽高如下

android:layout_width="@dimen/dp_300"
android:layout_height="@dimen/dp_160"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/picker_container"
        android:layout_width="@dimen/dp_300"
        android:layout_height="@dimen/dp_160"
        android:background="@drawable/bg_alarm_dialog_sp"
        android:orientation="vertical">

</LinearLayout>

2.自定义样式

   <style name="CustomDialog" parent="Theme.AppCompat.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowBackground">@drawable/bg_alarm_dialog_sp</item> <!-- 透明背景 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 这里不能直接设置宽度，但可以通过Dialog的内容布局来控制 -->
    </style>

三、java代码部分

1.弹框与数据处理



    /**
     * 初始化
     * 数据
     */
    //日历上午下午数据集合
    private final List<String> options1Items = new ArrayList<>();
    //日历小时数据集合
    private final List<List<String>> options2Items = new ArrayList<>();
    //日历分钟数据集合
    private final List<List<List<String>>> options3Items = new ArrayList<>();

    private void initDateTimeData() {

        //加入第一个列表数据
        options1Items.add("上午");
        options1Items.add("下午");

        List<String> a = new ArrayList<>();
        List<String> b = new ArrayList<>();
        List<List<String>> c = new ArrayList<>();

        //创建最后一个列表数据（分）
        for (int i = 0; i < 60; i++) {
            if (i < 10) {
                a.add("0" + i + "分");
            } else {
                a.add(i + "分");
            }
        }

        //创建第二个列表数据（时）,同时将最后一个列表数据加入c,加入次数为第二个列表的大小
        for (int i = 0; i <= 12; i++) {
            if (i < 10) {
                b.add("0" + i + "时");
            } else {
                b.add(i + "时");
            }
            c.add(a);
        }

        //将第二个列表数据加入options2Itmes,加入次数为options1Items的大小
        for (int j = 0; j < options1Items.size(); j++) {
            options2Items.add(b);
        }

        //将第三个列表数据加入options3Items,加入次数为第二个列表数据的长度
        for (int i = 0; i < b.size(); i++) {
            options3Items.add(c);
        }

    }

    /**
     * 显示时间选择对话框
     */
    private void showDialogTimePicker() {
        // 假设你已经有了上下文context、数据data等
        // 使用自定义的Dialog样式（如果需要）
        Dialog dialog = new Dialog(this, R.style.CustomDialog);
        OptionsPickerView pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int options2, int options3, View v) {
                String date = options1Items.get(options1) + " " + options2 + "时 " + options3 + "分";
                Logger.d("=======在此获取选择到的内容==111========");
                dialog.cancel();
            }
        })
                .setTitleText("")
                .setTitleSize(10)
                .addOnCancelClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.cancel();
                    }
                })
                .setContentTextSize(12)
                .build();

        pvOptions.setPicker(options1Items, options2Items, options3Items);

//        pvOptions.show();


        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.custom_picker_dialog);
        LinearLayout pickerContainer = dialog.findViewById(R.id.picker_container);
        // 将OptionsPickerView添加到容器中
        pickerContainer.addView(pvOptions.getDialogContainerLayout().getRootView());

        Window window = dialog.getWindow();
        window.setGravity(Gravity.BOTTOM);

        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.WRAP_CONTENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        params.y = 8;//设置与底部距离
        window.setAttributes(params);

        // 显示Dialog
        dialog.show();
    }

核心方法，就是在这里把OptionsPickerView加载到对话框当中

   // 将OptionsPickerView添加到容器中
        pickerContainer.addView(pvOptions.getDialogContainerLayout().getRootView());

由于时间选择对话框位于dialog里面，故本身的取消与确定无法关闭dialog，故需要在以下方法中调用 dialog.cancel();关闭弹框。

 public void onOptionsSelect(int options1, int options2, int options3, View v) {
                String date = options1Items.get(options1) + " " + options2 + "时 " + options3 + "分";
                Logger.d("=======在此获取选择到的内容==111========");
                dialog.cancel();
            }
        })
                .setTitleText("")
                .setTitleSize(10)
                .addOnCancelClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.cancel();
                    }
                })

2.调用方式

 /**
     * 事件处理
     */
    private void initEventListener() {

        mDataBinding.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDialogTimePicker();
            }
        });
    }

四、附上dialog各种弹出动画

1.从上往下弹出: (包含了2种实现方式一种是基于放大效果的，一种是基于平移方式的，可以自己放开注释看效果；需要在res下新建anim文件夹用于存放动画文件)

<style name="AnimTop" parent="@android:style/Animation">
    <!--进入动画-->
    <item name="android:windowEnterAnimation">@anim/dialog_top_in</item>
    <!--退出动画-->
    <item name="android:windowExitAnimation">@anim/dialog_top_out</item>
</style>
进入动画:dialog_top_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="true">
    <!-- 自上向下滑入 -->
<!--    pivotY 原点y坐标加上自身高度的百分之百 的位置-->
<!-- 放大动画实现-->
    <scale
        android:fromXScale="1"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:pivotX="0"
        android:pivotY="0"/>
<!--平移动画实现-->
<!--    <translate-->
<!--        android:fromXDelta="1"-->
<!--        android:fromYDelta="-100%p"-->
<!--        android:toXDelta="1"-->
<!--        android:toYDelta="0" />-->

</set>
退出动画:dialog_top_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="false">
    <!-- 自下向上滑出 -->
<!-- 放大动画-->
        <scale
            android:fromXScale="1"
            android:toXScale="1"
            android:fromYScale="1"
            android:toYScale="0"
            android:pivotX="0"
            android:pivotY="0" />
<!--平移动画-->
<!--    <translate-->
<!--        android:fromXDelta="1"-->
<!--        android:fromYDelta="0"-->
<!--        android:toXDelta="1"-->
<!--        android:toYDelta="-100%p" />-->

</set>
2.从下往上弹出:

 <style name="AnimBottom" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_bottom_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_bottom_out</item>
    </style>
底部弹出进入动画: dialog_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!-- 自下向上滑入 -->
<!--        <translate-->
<!--            android:fromYDelta="100%p"-->
<!--            android:toYDelta="0" />-->

    <!--    fromYScale、pivotY 和Y坐标无关只是单纯的缩放-->
    <scale
        android:fromXScale="1"
        android:fromYScale="0"
        android:pivotX="0"
        android:pivotY="100%"
        android:toXScale="1"
        android:toYScale="1" />

</set>
底部弹出退出动画: dialog_bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!-- 自下向上滑出 -->
<!--        <translate-->
<!--            android:fromYDelta="0"-->
<!--            android:toYDelta="100%p" />-->

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="0"
        android:pivotY="100%"
        android:toXScale="1"
        android:toYScale="0" />
</set>
 

3.从左往右弹出:

 <style name="AnimLeft" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_left_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_left_out</item>
    </style>
进入动画：dialog_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromXDelta="-100%p"
            android:toXDelta="0"
            android:duration="300"/>

    <!-- pivotX 可以是   -->
<!--    <scale-->
<!--        android:fromXScale="0"-->
<!--        android:fromYScale="1"-->
<!--        android:pivotX="0"-->
<!--        android:pivotY="0"-->
<!--        android:toXScale="1"-->
<!--        android:toYScale="1" />-->

</set>
退出动画:dialog_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">

        <translate
            android:fromXDelta="0"
            android:toXDelta="-100%p" />

<!--    <scale-->
<!--        android:fromXScale="1"-->
<!--        android:fromYScale="1"-->
<!--        android:toXScale="0"-->
<!--        android:toYScale="1"-->
<!--        android:pivotX="0"-->
<!--        android:pivotY="0"/>-->
</set>
 

4.从右往左弹出:

  <style name="AnimRight" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_right_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_right_out</item>
    </style>
进入动画:dialog_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromXDelta="100%p"
            android:toXDelta="0"
            android:duration="300"/>

    <!-- pivotX 可以是数字、百分比
    50px表示原点坐标加上50即是控件的x位置
    50%表示原点坐标加上控件自身的50%
    50%p 表示原点位置加上父控件的50%  -->
<!--    <scale-->
<!--        android:fromXScale="0"-->
<!--        android:fromYScale="1"-->
<!--        android:pivotX="100%"-->
<!--        android:pivotY="0"-->
<!--        android:toXScale="1"-->
<!--        android:toYScale="1" />-->

</set>
退出动画:dialog_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

        <translate
            android:fromXDelta="0"
            android:toXDelta="100%p"
            android:duration="300"/>

<!--    <scale-->
<!--        android:fromXScale="1"-->
<!--        android:fromYScale="1"-->
<!--        android:toXScale="0"-->
<!--        android:toYScale="1"-->
<!--        android:pivotX="100%"-->
<!--        android:pivotY="0"/>-->
</set>
5.从中间弹出:

    <style name="AnimCenter" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_center_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_center_out</item>
    </style>
进入动画:dialog_center_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!--    若均为 0% 或 0.0 ，起始点为 View 左上角；
            均为 50% 或 0.5 ，起始点为控件中心点；
            均为100% 或 1.0 ，起始点是 View 右下角。-->
    <!--    100%p会下移一个单位-->
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
</set>
退出动画:dialog_center_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0"
        android:toYScale="0" />
</set>