仿IPhone、ios圆角Dialog


网上看了很多例子,基本上都是很片面的,参考网上的例子,整合了Dialog和Button样式 ,很简单的,小白轻喷!吐舌头


1.定义圆角Dialog
<shape xmlns:android=" http://schemas.android.com/apk/res/android" >

    <corners android:radius="20dp" />

    <stroke android:width="1dp" />

    <gradient
        android:centerColor="@color/white"
        android:endColor="@color/white"
        android:startColor="@color/white" />

</shape>


2.定义圆角Button


<selector xmlns:android=" http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/dialog_button_right_style" android:state_selected="true"/>
    <item android:drawable="@drawable/dialog_button_right_style" android:state_focused="true"/>
    <item android:drawable="@drawable/dialog_button_right_style" android:state_pressed="true"/>
    <item android:drawable="@drawable/dialog_button_right_style" android:state_checked="true"/>
    <item android:drawable="@color/invisible_color"/>

</selector>


<shape xmlns:android=" http://schemas.android.com/apk/res/android" >

    <corners android:bottomLeftRadius="20dp" />

    <stroke android:width="1dp" />

    <gradient
        android:centerColor="@color/dialog_button_white"
        android:endColor="@color/dialog_button_white"
        android:startColor="@color/dialog_button_white" />

</shape>







2.定义style

    <style name="Corner_dialog" parent="@android:style/Theme.Dialog">
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowIsFloating">true</item> <!--是否浮现在activity之上-->   
        <item name="android:windowIsTranslucent">true</item> <!--半透明-->   
        <item name="android:windowNoTitle">true</item> <!--无标题-->   
        <item name="android:background">@drawable/my_dialog</item> <!--dialog背景样式-->   
        <item name="android:windowBackground">@color/invisible_color</item> <!-- 背景透明 -->   
        <item name="android:backgroundDimEnabled">true</item> <!--模糊-->  
        <item name="android:backgroundDimAmount">0.6</item> <!--界面灰度值-->   
    </style>


最后在代码中引用就好了

 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您使用的是 Vue.js 框架,并且使用的是 vant UI 组件库中的 Dialog 对话框组件,那么您可以通过设置对话框组件的 `overlay` 属性来实现遮盖底部的 tabbar。 具体来说,您可以将 `overlay` 属性设置为 `true`,这样对话框组件就会显示一个半透明的背景遮盖住整个页面,包括底部的 tabbar。示例代码如下: ```html <van-dialog v-model="show" title="标题" :overlay="true" :lock-scroll="false" @confirm="handleConfirm" @cancel="handleCancel" > <p>对话框内容</p> </van-dialog> ``` 在上面的示例代码中,我们将 `overlay` 属性设置为 `true`,这样对话框组件就会显示一个半透明的背景遮盖住整个页面,包括底部的 tabbar。另外,我们还设置了对话框组件的标题和内容,并且监听了 `confirm` 和 `cancel` 事件,用于处理用户点击确认和取消按钮后的操作。 需要注意的是,如果您想要在对话框组件弹出时隐藏底部的 tabbar,可以在组件的 `show` 属性发生变化时,通过调用底部 tabbar 的 `hide` 方法来实现。示例代码如下: ```html <van-dialog v-model="show" title="标题" :overlay="true" :lock-scroll="false" @confirm="handleConfirm" @cancel="handleCancel" @show="handleShow" @hide="handleHide" > <p>对话框内容</p> </van-dialog> ``` ```javascript export default { data() { return { show: false } }, methods: { handleShow() { this.$refs.tabbar.hide() }, handleHide() { this.$refs.tabbar.show() }, handleConfirm() { // 处理确认按钮点击后的操作 }, handleCancel() { // 处理取消按钮点击后的操作 } } } ``` 在上面的示例代码中,我们监听了对话框组件的 `show` 和 `hide` 事件,并且在 `show` 事件中调用了底部 tabbar 的 `hide` 方法,将其隐藏起来。在 `hide` 事件中则相反,调用了底部 tabbar 的 `show` 方法,将其显示出来。这样就可以避免对话框组件遮盖底部的 tabbar 了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值