下拉菜单UI

时间:2015-03-05 08:52:31

标签: android user-interface

我想实现一个如下图所示的UI。单击按钮(如箭头所示)时,应显示下拉菜单。 是否可以在android中执行此操作?

任何建议都将受到高度赞赏。

2 个答案:

答案 0 :(得分:1)

使用弹出窗口选择此类选项:

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>

答案 1 :(得分:0)

首先使该下拉菜单不可见  添加onclick事件到按钮,当它被点击时,使该下拉菜单可见。这是我可以建议的,因为我无法看到您上传的图像