模仿qq头像上传的弹出框效果

1.涉及到知识点，如下：

1.1.自定义对话框

1.2.动画

1.3.样式选择器

        1.4.shape的使用

2.代码编写

       2.1首先创建选择照片的弹出对话框的布局文件，代码如下：

headicon_choose_dialog.xml

        

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

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#00000000"

    android:gravity="bottom"

    android:padding="5dip"

    android:orientation="vertical">

    

<Button 

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@drawable/headicon_camera_selector"

    android:paddingTop="10dip"

    android:paddingBottom="10dip"

    android:text="拍照"

    android:textColor="#000000"

    android:textSize="16sp"

    />

<!-- 拍照按钮和从相册中选择按钮分割线 -->

<TextView 

    android:layout_width="match_parent"

     android:layout_height="0.5dip"

     android:background="#DAD9DB"

    />

<Button 

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

  android:background="@drawable/headicon_gallery_selector"

    android:paddingTop="10dip"

    android:paddingBottom="10dip"

    android:text="从相册中选择"

    android:textColor="#000000"

    android:textSize="16sp"

    />

<Button 

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_marginTop="5dip"

    android:background="@drawable/headicon_cancel_selector"

    android:paddingTop="10dip"

    android:paddingBottom="10dip"

    android:text="取消"

    android:textColor="#000000"

    android:textSize="16sp"

    />

</LinearLayout>

       效果如下图：

      2.1中需要的三个样式选择器及其样式选择器中使用到的图形代码如下：

       

2.1.1.拍照按钮对应的样式选择器headicon_camera_selector.xml

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

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

    <!-- 获得焦点或者点击的时候显示 pressed背景 -->

    <itemandroid:drawable="@drawable/headicon_camera_pressed"android:state_focused="true"></item>

    <itemandroid:drawable="@drawable/headicon_camera_pressed"android:state_pressed="true"></item>

    <!-- 失去焦点的时候显示 normal 背景 -->

    <itemandroid:drawable="@drawable/headicon_camera_normal"android:state_focused="false"></item>

</selector>

2.1.1.1.按钮获得焦点或者被点击时使用按钮使用的背景，headicon_camera_pressed.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="0dip"

        android:bottomRightRadius="0dip"

        android:topLeftRadius="5dip"

        android:topRightRadius="5dip"/>

</shape>

2.1.1.2.正常情况下使用按钮使用的背景，headicon_camera_normal.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="0dip"

        android:bottomRightRadius="0dip"

        android:topLeftRadius="5dip"

        android:topRightRadius="5dip"/>

</shape>

2.1.2.从相册中选择按钮的样式选择器文件：headicon_gallery_selector.xml

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

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

    <!-- 获得焦点或者点击的时候显示 pressed背景 -->

    <itemandroid:drawable="@drawable/headicon_gallery_pressed"android:state_focused="true"></item>

    <itemandroid:drawable="@drawable/headicon_gallery_pressed"android:state_pressed="true"></item>

    <!-- 失去焦点的时候显示 normal 背景 -->

    <itemandroid:drawable="@drawable/headicon_gallery_normal"android:state_focused="false"></item>

</selector>

2.1.2.1.按钮获得焦点或者被点击时使用按钮使用的背景，headicon_gallery_pressed.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="5dip"

        android:bottomRightRadius="5dip"

        android:topLeftRadius="0dip"

        android:topRightRadius="0dip"/>

</shape>

2.1.2.2.正常情况下使用按钮使用的背景，headicon_gallery_normal.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="5dip"

        android:bottomRightRadius="5dip"

        android:topLeftRadius="0dip"

        android:topRightRadius="0dip"/>

</shape>

2.1.3.从相册中选择按钮的样式选择器文件：headicon_cancel_selector.xml

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

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

    <!-- 获得焦点或者点击的时候显示 pressed背景 -->

    <itemandroid:drawable="@drawable/headicon_cancel_pressed"android:state_focused="true"></item>

    <itemandroid:drawable="@drawable/headicon_cancel_pressed"android:state_pressed="true"></item>

    <!-- 失去焦点的时候显示 normal 背景 -->

    <itemandroid:drawable="@drawable/headicon_cancel_normal"android:state_focused="false"></item>

</selector>

2.1.3.1.按钮获得焦点或者被点击时使用按钮使用的背景，headicon_cancel_pressed.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="5dip"

        android:bottomRightRadius="5dip"

        android:topLeftRadius="5dip"

        android:topRightRadius="5dip"/>

</shape>

2.1.3.2.正常情况下使用按钮使用的背景，headicon_cancel_normal.xml

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

<shapexmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <!-- 设置按钮的渐变颜色  angle指从什么方向颜色渐变，0表示从左到右，90表示从下到上 -->

    <gradient

        android:angle="90"

        android:endColor="#CACACB"

        android:startColor="#CACACB"/>

    

    <!-- 按钮的圆角半径设置 -->

    <corners

        android:bottomLeftRadius="5dip"

        android:bottomRightRadius="5dip"

        android:topLeftRadius="5dip"

        android:topRightRadius="5dip"/>

</shape>

2.2.在res/anim目录下创建对话框弹入弹出的动画的配置文件

2.2.1.对话框弹入动画，headicon_dialog_in_anim.xml

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

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

    <!-- 注意位移动画的y坐标轴上方为负，下方为正 -->

    <translate

        android:duration="500"

        android:fromXDelta="0"

        android:fromYDelta="100%p"

        android:toXDelta="0"

        android:toYDelta="0"/>

</set>

2.2.2.对话框弹入动画，headicon_dialog_out_anim.xml

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

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

    <!-- 注意位移动画的y坐标轴上方为负，下方为正 -->

    <translate

        android:duration="500"

        android:fromXDelta="0"

        android:fromYDelta="0"

        android:toXDelta="0"

        android:toYDelta="100%p"/>

</set>

2.3.定义对话框样式的背景文件，headicon_dialog_bg.xml

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

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

    

</shape>

2.4.定义对话框弹出弹入样式及其对话框背景样式

<resources>

    <!-- 弹出框的背景颜色 -->

<stylename="headicon_dialog_style"parent="android:style/Theme.Dialog">

    <itemname="android:windowBackground">@drawable/headicon_dialog_bg</item>

</style>

<!-- 弹出框的弹出弹入动画配置 -->

<stylename="headicon_dialog_anim_style">

<itemname="android:windowEnterAnimation">@anim/headicon_dialog_in_anim</item>

<itemname="android:windowExitAnimation">@anim/headicon_dialog_out_anim</item>

</style>

</resources>

2.5.在主activity按钮对应的点击事件方法中别写如下代码：

//创建dialog的布局文件对象

View dialogView = getLayoutInflater().inflate(R.layout.headicon_choose_dialog,null);

//创建dialog对象

Dialog dialog = new Dialog(this, R.style.headicon_dialog_style);

//设置dialog的ContentView

dialog.setContentView(dialogView, new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));

//获得window对象

Window window = dialog.getWindow();

//设置动画样式

window.setWindowAnimations(R.style.headicon_dialog_anim_style);

//设置对话框的属性

WindowManager.LayoutParams wl= window.getAttributes();

//设置显示位置

wl.x = 0;

wl.y = getWindowManager().getDefaultDisplay().getHeight();

//设置对话框横向铺满全屏

wl.width = ViewGroup.LayoutParams.MATCH_PARENT;

wl.height = ViewGroup.LayoutParams.WRAP_CONTENT;

//设置相关属性

dialog.onWindowAttributesChanged(wl);

//设置点击对话框外围隐藏对话框

dialog.setCanceledOnTouchOutside(true);

//显示对话框

dialog.show();

2.6运行效果如下图：

希望对大家有帮助，本人初学者，并且第一次写博客。写的不好请大家见谅。