下拉菜单 UI

Question

我想实现如下图所示的 UI。单击按钮（如箭头所示）时，应出现下拉菜单。是否可以在 android 中执行此操作？

如有任何建议，我们将不胜感激。

Answer 1

首先使下拉菜单不可见将 onclick 事件添加到按钮，当它被点击时制作下拉菜单 visible.That 这是我可以建议的，因为我看不到你上传的图片

Answer 2

对此类选项使用弹出窗口 window：

llBack.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                showPopupMenu();
            }
        });

showPopupMenu() 方法是：

public void showPopupMenu() {
        LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

        View popupView = inflater.inflate(R.layout.add_file_lay,
                this.container, false);

        popupWindow = new PopupWindow(popupView, popupwidth,
                WindowManager.LayoutParams.WRAP_CONTENT, true);
        popupWindow.setOutsideTouchable(true);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        popUpwindowinIt(popupView);

        popupWindow.showAsDropDown(findViewById(R.id.places), 0, 0);

    }

上面代码中R.id.places是布局文件中我们要显示菜单的隐藏布局，如菜单按钮下方；

这里是显示为弹出菜单的 add_file_lay 命名视图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingRight="5dp" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#262127" >

        <ImageView
            android:id="@+id/downarrow_afile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="1dp" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal" >

                <RelativeLayout
                    android:id="@+id/gallerylay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/gallerybtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/gal" />

                    <TextView
                        android:id="@+id/gallerytxt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/gallerybtn"
                        android:layout_centerHorizontal="true"
                        android:singleLine="true"
                        android:text="Gallery"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ffffff" />

                <RelativeLayout
                    android:id="@+id/photolay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/photobtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/cam" />

                    <TextView
                        android:id="@+id/phototxt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/photobtn"
                        android:layout_centerHorizontal="true"
                        android:singleLine="true"
                        android:text="Take Photo"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ffffff" />

                <RelativeLayout
                    android:id="@+id/videolay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/videobtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/video" />

                    <TextView
                        android:id="@+id/videotxt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/videobtn"
                        android:layout_centerHorizontal="true"
                        android:singleLine="true"
                        android:text="Video"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#ffffff" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#ffffff" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#ffffff" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal" >

                <RelativeLayout
                    android:id="@+id/audiolay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/audiobtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/ausio" />

                    <TextView
                        android:id="@+id/audiotxt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/audiobtn"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="1dp"
                        android:singleLine="true"
                        android:text="Audio"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ffffff" />

                <RelativeLayout
                    android:id="@+id/locationlay"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/locationbtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/location" />

                    <TextView
                        android:id="@+id/locationtxt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/locationbtn"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="1dp"
                        android:singleLine="true"
                        android:text="Location"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ffffff" />

                <RelativeLayout
                    android:id="@+id/relativeLayoutAddContact"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:visibility="visible" >

                    <ImageView
                        android:id="@+id/contactbtn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:clickable="false"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/contact" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:clickable="false"
                        android:layout_below="@id/contactbtn"
                        android:layout_centerHorizontal="true"
                        android:text="Contact"
                        android:textColor="#ffffff"
                        android:textSize="12sp" />
                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

下拉菜单 UI

Drop down menu UI

user-interface

android