[置顶] Android(安卓)实现对话框圆角功能

Android实现自定义dialog圆角功能

刚接触公司的Android项目，客户画好了界面，需求如下：

弹出的窗口是要四个圆角，并且标题栏颜色和下方不一样，还要以蓝色线分隔开，通过网上各种百度，给出的方案基本上是在/drawable文件夹下建立一个shape文件，里面对控件进行一些控制。（这里要注意的是shape文件应该是放在drawable文件夹下，至于为什么要放到这里，以及根元素下的各种元素用法，请参考这位前辈的博客：http://blog.csdn.net/lonelyroamer/article/details/8254592讲解的非常详细）。

关键点就在于shape提供了很多元素用来控制颜色、圆角（四个方向都可以控制半径大小）。既然要用到圆角的弹出窗口，我们就得用以下的元素corners来控制，工程目录为：F:\PopwindowOnLeft1\app\src\main\res\drawable-mdpi\shapeyuanjiao3.xml：

<?xmlversion="1.0"encoding="UTF-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<solidandroid:color="#0000FF"/>


<cornersandroid:topLeftRadius="@dimen/RoundedAmplitude"android:topRightRadius="@dimen/RoundedAmplitude"/>

<gradient
android:angle="270"
android:centerColor="#0000FF"
android:endColor="#0000FF"
android:startColor="#0000FF"/>

</shape>

上述代码中corner可以设置上面和下面的两个角，不设置的话默认是半径为0，这一点大家可以上机测试。

设置好了圆角尺寸之后，就要在布局文件里面使用，使用其实非常简单，通过Layout、view、textview等的android:background="@drawable/shapeyuanjiao3"属性，设置尺寸、圆角（可以定制单独显示哪个角需要圆角）。

好了，进入实际需求来吧，为了显示初步的布局，我用了一个相对布局，文件如下：

<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.pop.main.ClipImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"
android:id="@+id/front_image"/>

<ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"
android:background="#33000000"/>

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:orientation="vertical"android:layout_centerInParent="true"
android:background="@drawable/shapeyuanjiao">
<TextViewandroid:layout_width="match_parent"android:layout_height="30dip"
android:background="@drawable/shapeyuanjiao3"
android:text="保證金狀態"
android:gravity="center"
android:textColor="@color/white"/>
<Viewandroid:layout_height="1dip"
android:layout_width="match_parent"
android:background="@color/blue"/>
<TextViewandroid:layout_width="match_parent"
android:layout_height="30dip"

android:text="賬號09102"
android:textColor="@color/black"/>

<TextViewandroid:layout_width="match_parent"android:layout_height="30dip"

android:text="浮動損益"
android:textColor="@color/black"/>

</LinearLayout>

</RelativeLayout>

请注意<TextViewandroid:layout_width="match_parent"android:layout_height="30dip"
android:background="@drawable/shapeyuanjiao3"
android:text="保證金狀態"
android:gravity="center"
android:textColor="@color/white"/>
<Viewandroid:layout_height="1dip"
android:layout_width="match_parent"
android:background="@color/blue"/>

这段代码就是关键所在，textview为dialog的表头，单独设置成蓝色的。整体的dialog窗口需要设置成灰色的，所以需要另外一个shape文件，两个文件只是在圆角的显示个数和颜色上面有一点差异，大家可以稍作修改就可以看到效果。下列是整个dialog的设置情况：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:orientation="vertical"android:layout_centerInParent="true"
android:background="@drawable/shapeyuanjiao">

实际运行结果如下图:

界面有点丑，莫见怪。其实在做的过程当中，走了很多弯路，我列出来吧，给遇到同样问题的人提供一些经验，技术不够的地方请批评指正。

弯路一：

我从网上找了另外一种设置dialog为圆角的方式，也是通过shape文件来设置，但方法有点曲折，是通过给整个dialog外层另外增加一层圆角，这里会看到整个窗口像是被包在一起，效果很不理想，shape文件如下：

<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android">
<solidandroid:color="#0033FF"/>
//设置边距,实现圆角功能
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp"/>

//控制边界线颜色和笔触大小
<stroke
android:width="1dp"
android:color="#CdCdCd"/>

//控制界面颜色渐变（你这个用不到）
<gradient
android:startColor="#E9E9E9"
android:endColor="#FFFFFF"
android:type="linear"
android:angle="90"/>

//控制圆角大小
<cornersandroid:radius="10dp"/>

</shape>

注意这段代码：

//设置边距,实现圆角功能
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp"/>这个方式有点不太符合客户的要求，有需要的朋友可以参考一下，我运行的结果如下：

弯路2：

在布局文件中，一开始我是这样考虑的，既然标题的颜色和下列显示的不太一样，我就用android:background="@color/blue"这样设置，然后外围的LineLayout设置android:background="@drawable/shapeyuanjiao3"但是发现，运行之后，是没有圆角效果的，咨询了公司同事才发现，虽然设置了整个的Layout的shape圆角效果，但给每一行的imageview设置background的时候，就会覆盖外围的样式，导致显示不出来，解决方案就是每个单独的imageview不用设置颜色，给标题蓝色单独再用另外一个shape设置成蓝色的就可以了。

有些地方说的不太明白，可以问我，这个小demo可以从这里下载，欢迎下载。

http://download.csdn.net/detail/omayyouhappy/8888251是免费的，可以给新手一些建议。还有这个代码还是先了背景图片模糊的功能，具体可以参考我下一篇博客：关于Android背景图片模糊的解决方案？

更多相关文章

随机推荐