Android 底部弹出窗popuwindows含有list动态控制显示内容高度

开篇,这是我写的第一篇博文,希望能和各位技术大牛们一起交流技术,平日里写的代码很少归纳总结,借此机会,整理了一下平时在解决问题是 的一些方案和方法,希望能给需要的人带来帮助,提高开发的进度,如有不合理的地方,欢迎斧正,不吝感谢。

标题所描述的问题正式之前我开发中经常会遇到的问题,因为listview和RecycleView本来就有一个通病,如果不设置一下高度,那么就会被顶到最上面,导致显示布局过大,影响效果,所以要想解决这个问题那么最直接的办法就是动态计算屏幕的高度然后进行动态设置和显示。

首先,在popuwindows初始化listview或者RecycleView(这里统一称作内部列表View)之前,进行屏幕高度和内部列表View显示高度的计算,如果内部列表item个数比较少,全部显示都不足屏幕高度的话 ,那么就不进行内部控件高度的处理,否则多余一页的话,进行高度控制,不能超过一个屏幕的高度,防止内部View因为太高顶到ActionBar栏,导致效果不理想。

然后,通过查看布局中占高度的地方和控件自身的高度计算出需要去除的高度差,然后通过xp和dp转换方法来进行统一计算,得到内部列表组建的可现实的高度差,然后进行验证。
此处做了两个按钮在底部,分别代表item个数少于一屏和多于一屏的情况的情况显示,方便对比查看显示效果。

此方法为计算内部列表组件显示高度的核心方法

public static void resetViewHeight(Context context, List<String> mData, View needChangeView){
        int itemHeight= dip2px(context,46);
        int otherHeight= dip2px(context,46);

        int sumItemtHeight=0;
        if(null!=mData){
            sumItemtHeight=mData.size()*itemHeight;
        }
        int sumHeight=sumItemtHeight+otherHeight;


        int maxScreenHeght=getScreenHeightByPix(context)-
                getNavigationBarHeight(context);
                //此处判断如果显示列表view的高度小于一屏的显示高度

        if(sumHeight<maxScreenHeght){
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, sumHeight);
            // LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT,sumHeight);
            needChangeView.setLayoutParams(layoutParams);
        }else{
        //此处判断如果显示列表view的高度大于一屏的显示高度
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, maxScreenHeght- dip2px(context,130));
            // LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT,sumHeight);
            needChangeView.setLayoutParams(layoutParams);
        }

    }

这里是布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.toyong.ct.mytestaa.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">

        <Button
            android:id="@+id/btn_smalllist"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="展示小列表"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/btn_biglist"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:text="展示大列表"/>
    </LinearLayout>
</RelativeLayout>

-这里是布局文件显示样式:
这里写图片描述

-这里是点击大列表显示按钮效果:
这里写图片描述
-这里是点击小列表显示按钮效果:
这里写图片描述

总结

-此方法针对需要动态显示底部弹框效果并且显示列表个数不确定但是需要保证不会导致顶部title被覆盖的效果显示的处理,存在的不足之处是对于后续添加其他组件仍然需要手动的计算xml布局中的占高度的包括marginTop,paddingTop,以及内部其他View组件,然后通过手动代码控制显示弹框的高度,不够灵活。
这里面如果在布局中再添加占高度的控件的话需要把该控件高度通过xpTodp换算方法:

public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

来计算出具体xp在

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, maxScreenHeght- dip2px(context,130));

代码中的130数值位置,将该view所占高度的dp累加

这里其实底部弹框的高度受内部列表view影响,所以采用手动计算高度的办法只能算其中一种在我没找到更好办法之前的最好的解决办法,对于不足之处,我后期会继续更新文章,能够实现动态的代码计算来直接适配不同分辨率手机的高度问题。代码中有什么问题欢迎斧正~ 我的邮箱 xiayunyouran@126.com

资源地址
http://download.csdn.net/download/choklongchen/9744627

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过使用CSS和JavaScript来实现底部弹出动态效果。具体的实现方法如下: 1. 首先,在HTML文件中添加一个底部弹出的容器,例如: ```html <div class="bottom-popup"> <p>这是一个底部弹出口</p> <button class="close-btn">关闭</button> </div> ``` 2. 使用CSS来设置底部弹出容器的初始样式和动画效果,例如: ```css .bottom-popup { position: fixed; bottom: -300px; left: 0; width: 100%; height: 300px; background-color: #fff; padding: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); transition: all 0.3s ease-in-out; } .bottom-popup.show { bottom: 0; } ``` 这里使用了`position: fixed`来固定底部弹出容器的位置,`bottom`属性设置为负数,使其隐藏在屏幕外。在`.bottom-popup.show`中,将`bottom`属性设置为0,使其向上弹出,同时使用`transition`属性设置动画效果。 3. 使用JavaScript来控制底部弹出容器的显示和隐藏,例如: ```javascript const popup = document.querySelector('.bottom-popup'); const closeBtn = document.querySelector('.close-btn'); // 显示底部弹出口 function showPopup() { popup.classList.add('show'); } // 隐藏底部弹出口 function hidePopup() { popup.classList.remove('show'); } // 点击关闭按钮隐藏口 closeBtn.addEventListener('click', hidePopup); // 3秒后自动显示口 setTimeout(showPopup, 3000); ``` 这里使用了`querySelector`方法来获取底部弹出容器和关闭按钮,定义了`showPopup`和`hidePopup`函数来控制容器的显示和隐藏。最后使用`setTimeout`方法来延迟3秒后自动显示口。 通过上述步骤,就可以实现一个简单的底部弹出动态效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值