zoukankan      html  css  js  c++  java
  • 自定义Dialog(QQ头像选择弹出的对话框)

    运行效果:

                                

    一 资源准备:

    1.弹出的按钮:

    (1)图库按钮(drawable中)-上角有弧度

    正常状态:gallery_normal.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
        <gradient
            android:angle="90"
            android:endColor="#EBEBEB"
            android:startColor="#EBEBEB" />
        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="0dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    
    </shape>

    按下状态:gallery_pressed.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
        <gradient
            android:angle="90"
            android:endColor="#CACACB"
            android:startColor="#CACACB" />
        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="0dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    
    </shape>

    状态选择器:selector_gallery.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/gallery_pressed" android:state_focused="true"/>
        <item android:drawable="@drawable/gallery_pressed" android:state_focused="false" android:state_pressed="true"/>
        <item android:drawable="@drawable/gallery_normal" android:state_focused="false"/>
    
    </selector>


    (2)拍照按钮(drawable中)-下角有弧度

    正常状态:camera_normal.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
        <gradient
            android:angle="90"
            android:endColor="#EBEBEB"
            android:startColor="#EBEBEB"/>
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp"/>
    </shape>
    按下状态:camera_pressed.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <gradient
            android:angle="90"
            android:endColor="#CACACB"
            android:startColor="#CACACB" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp" />
    </shape>
    状态选择器:selector_camera.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/camera_pressed" android:state_focused="true"/>
        <item android:drawable="@drawable/camera_pressed" android:state_focused="false" android:state_pressed="true"/>
        <item android:drawable="@drawable/camera_normal" android:state_focused="false"/>
    
    </selector>


    (3)取消按钮(drawable中)-四角有弧度

    正常状态:cancel_normal.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
        <gradient
            android:angle="90"
            android:endColor="#EBEBEB"
            android:startColor="#EBEBEB" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    </shape>
    按下状态:cancel_pressed.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
        <gradient
            android:angle="90"
            android:endColor="#CACACB"
            android:startColor="#CACACB" />
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    </shape>

    状态选择器:selector_cancel.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/cancel_pressed" android:state_focused="true"/>
        <item android:drawable="@drawable/cancel_pressed" android:state_focused="false" android:state_pressed="true"/>
        <item android:drawable="@drawable/cancel_normal" android:state_focused="false"/>
    
    </selector>

    (4)对话框的布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns: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:orientation="vertical"
        android:padding="5dip" >
    
        <Button
            android:id="@+id/but_open_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/selector_gallery"
            android:paddingBottom="10dip"
            android:paddingTop="10dip"
            android:text="图库"
            android:textSize="16sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dip"
            android:background="#DAD9DB" />
    
        <Button
            android:id="@+id/but_take_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/selector_camera"
            android:paddingBottom="10dip"
            android:paddingTop="10dip"
            android:text="拍照"
            android:textSize="16sp" />
    
        <Button
            android:id="@+id/but_cancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:background="@drawable/selector_cancel"
            android:paddingBottom="10dip"
            android:paddingTop="10dip"
            android:text="取消"
            android:textSize="16sp" />
    
    </LinearLayout>
    布局效果:

    2.对话框进出动画(anim文件夹中)

    (1)对话框弹出动画dialog_in_anim.xml:(进出时长300ms)

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

    (2)对话框消失动画dialog_in_anim.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <translate
            android:duration="300"
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:toXDelta="0"
            android:toYDelta="1000" />
    
    </set>
    3.style.xml中添加样式
        <style name="style_anim_dialog">
            <item name="android:windowEnterAnimation">@anim/dialog_in_anim</item>
            <item name="android:windowExitAnimation">@anim/dialog_out_anim</item>
        </style>

    二 主代码编写

    此处将逻辑抽取到方法里,在需要的地方调用即可:

       /**
         *对话框使用逻辑
         */
        protected void showQQDialog() {
            //加载对话框布局
            View view = getLayoutInflater().inflate(R.layout.dialog_qq_item, null);
            final Dialog dialog = new Dialog(this);
            dialog.setContentView(view, new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    
            Window window = dialog.getWindow();//获取窗口
            window.setWindowAnimations(R.style.style_anim_dialog); // 设置显示动画
            //设置对话框背景为透明 <color name="trans">#00000000</color>
            window.setBackgroundDrawableResource(R.color.trans);
            WindowManager.LayoutParams wl = window.getAttributes();
    
            wl.y = getWindowManager().getDefaultDisplay().getHeight();
            // 以下这两句是为了保证按钮可以水平满屏
            wl.width = Toolbar.LayoutParams.MATCH_PARENT;
            wl.height = Toolbar.LayoutParams.WRAP_CONTENT;
            dialog.onWindowAttributesChanged(wl); // 设置显示位置
            dialog.setCanceledOnTouchOutside(true); // 设置点击外围解散
            dialog.show();//展示对话框
    
            view.findViewById(R.id.but_cancel).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });
            view.findViewById(R.id.but_open_photo).setOnClickListener(new View.OnClickListener() {
    
                @Override
                public void onClick(View v) {
    
                    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
                    intent.setType("image/*");
                    startActivity(intent); //打开系统图库
                }
            });
            view.findViewById(R.id.but_take_photo).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                    startActivity(intent);// 打开系统拍照
                }
            });
        }
    本项目源码地址:https://github.com/toly1994328/DialogTest

  • 相关阅读:
    41. 缺失的第一个正数
    101. 对称二叉树 38. 外观数列
    leecode 394. 字符串解码 java版本
    敏感词过滤(java)
    vue项目中async、await+promise来将异步转为同步
    vue项目目录详解及自定义事件
    如何搭建vue项目
    Sublime Text 3 离线安装插件
    拿到别人的vue项目如何跑起来?
    js设置定时器和清除定时器
  • 原文地址:https://www.cnblogs.com/toly-top/p/9782043.html
Copyright © 2011-2022 走看看