• 自定义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

  • 相关阅读:
    JavaScript 倒计时器,闹钟功能
    JS实现手风琴效果
    JS原生选项卡 – 幻灯片效果
    JS/CSS 响应式样式实例
    JS/CSS 全屏幕导航 – 从上到下动画
    JS实现下拉菜单的功能
    node.js服务器核心http和文件读写
    JS实现联想自动补齐功能
    JS搜索菜单实现
    关于写专利(专利交底书)
  • 原文地址:https://www.cnblogs.com/toly-top/p/9782043.html
Copyright © 2020-2023  润新知