对话框从底部滑动 - Android

时间:2014-02-25 21:58:06

标签: android android-fragments

我想显示一个类似于Google地图应用在用户在地图上选择地点时显示的对话框。您可以在图1,图2和图3中看到它。此对话框就像一个片段,我可以在全屏和部分模式下显示,当我不想再看到它时我可以滑出。在这一刻,我只有一个动画对话框,当提示对话框时有一个样式,另一个对话框被解除时,你可以在图4中看到。这不是预期的行为,因为我想与对话框而不是应用简单的动画。

问题

  1. 我认为Google地图对话框就像一个片段,但我不知道如何能够部分显示它,然后以全屏模式显示它。 ¿我可以用片段做到这一点吗? ¿我可以仅将ViewPager父级的幻灯片停用到此片段吗?

  2. ¿你还有其他建议可以像谷歌地图应用程序对话框一样进行对话吗?

  3. 感谢。

    图1 Figure 1

    图2 Figure 2

    图3 Figure 3

    图4 Figure 4

1 个答案:

答案 0 :(得分:0)

我解决了我的问题,调整了this的一些元素(感谢Saif Hamed)并管理触摸事件来动画对话框。它并不完美,因为动画不是很流畅但它有效。这是涉及的代码:

i)我将对话框布局叠加到相机布局

    <?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:orientation="vertical" >

        <FrameLayout
            android:id="@+id/cameraPreviewFrame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <!-- Camera Preview -->

            <com.easyshopping.activities.CameraPreview
                android:id="@+id/cameraSurfaceView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </com.easyshopping.activities.CameraPreview>

            <!-- Dialog layout -->

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/layoutDialogProduct"
                android:layout_gravity="center_horizontal"
                android:background="@color/white"
                android:orientation="vertical" >

                <LinearLayout
                    android:id="@+id/layoutUpRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="30dp"
                    android:orientation="horizontal" >

                    <TextView
                        android:id="@+id/textViewLabelNickname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_nickname" />

                    <EditText
                        android:id="@+id/editTextNickname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:ems="10"
                        android:inputType="textPersonName" >
                    </EditText>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/layoutMediumRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layoutUpRegister"
                    android:layout_marginTop="20dp" >

                    <TextView
                        android:id="@+id/textViewLabelEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_email" />

                    <EditText
                        android:id="@+id/editTextEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="45dp"
                        android:ems="10"
                        android:inputType="textEmailAddress" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/layoutBottomRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layoutMediumRegister"
                    android:layout_marginTop="20dp" >

                    <TextView
                        android:id="@+id/textViewLabelPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_password" />

                    <EditText
                        android:id="@+id/editTextPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:ems="10"
                        android:inputType="textPassword" />
                </LinearLayout>

                <Button
                    android:id="@+id/btnOkRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_below="@+id/layoutBottomRegister"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="40dp"
                    android:text="@string/positive_button" />

                <Button
                    android:id="@+id/btnCancelRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/layoutBottomRegister"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="40dp"
                    android:text="@string/negative_button" />
            </RelativeLayout>
    </LinearLayout> 

ii)动画和触摸事件

// DIALOG SLIDER

    // Effects when overlay layout
    final OvershootInterpolator intp = new OvershootInterpolator();

    // Animation duration
    final int d = getResources().getInteger(android.R.integer.config_shortAnimTime);

    // Dialog layout
    final RelativeLayout layoutDialogProduct = (RelativeLayout) rootView.findViewById(R.id.layoutDialogProduct);

    // ViewTreeObserver of dialog to get its height
    ViewTreeObserver vto = rootView.findViewById(R.id.layoutDialogProduct).getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

        @Override
        public void onGlobalLayout() {
            // TODO Auto-generated method stub

            headerDialogHeight = rootView.findViewById(R.id.layoutDialogProduct).getHeight();

            // Removel OnGlobalLayoutListener
            ViewTreeObserver obs = rootView.findViewById(R.id.layoutDialogProduct).getViewTreeObserver();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                obs.removeOnGlobalLayoutListener(this);
            } else {
                obs.removeGlobalOnLayoutListener(this);
            }

            // ViewTreeObserver of cameraview to get its height

            ViewTreeObserver vto2 = mPreview.getViewTreeObserver();
            vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

                @Override
                public void onGlobalLayout() {
                    // TODO Auto-generated method stub
                    heightCameraView = mPreview.getHeight();

                    // Get spacing error when show the dialog
                    int tY = heightCameraView - headerDialogHeight;

                    // Remove ViewTreeObserver
                    ViewTreeObserver obs2 = mPreview.getViewTreeObserver();

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                        obs2.removeOnGlobalLayoutListener(this);
                    } else {
                        obs2.removeGlobalOnLayoutListener(this);
                    }

                    //Do animation
                    layoutDialogProduct.animate().translationY(tY).setDuration(d).setInterpolator(intp).start();

                }
            });

        }
    });

    layoutDialogProduct.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            // TODO Auto-generated method stub
            viewPager.setmIsUnableToDrag(false);

            // float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {

                case MotionEvent.ACTION_MOVE : {
                    // Hacer la animación

                    if (headerDialogHeight - y <= headerDialogHeight) {
                        layoutDialogProduct.animate().translationY(heightCameraView - headerDialogHeight + y)
                                .setDuration(d).setInterpolator(intp).start();
                    }

                    break;
                }
            }

            viewPager.setmIsUnableToDrag(true);
            return true;
        }
    });

截图 Screenshot 1

Screenshot 2

Screenshot 3