Givemepass's Android 惡補筆記

如何使用自訂Dialog-2

| Comments

如果想要做出這樣的畫面


一般會使用什麼元件?
我試過popupwindow, spinner都沒有達到我要的效果,
因此我用dialog刻出了一個view。

這個view位置可以自訂

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/more_outside_layout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/PXP600_PX"
                android:background="#00000000" >
    <LinearLayout
        android:id="@+id/more_inside_layout"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="@dimen/PXP8_PX"
        android:layout_marginTop="@dimen/PXP10_PX"
        android:layout_width="@dimen/PXP330_PX"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@drawable/abcd_menu_dropdown_panel_holo_light"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/PXP90_PX"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/PXP32_PX"
            android:id="@+id/file_sharing_add_new_folder"
            android:textColor="#707070"
            android:textSize="@dimen/PXP32_TS"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/PXP90_PX"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/PXP32_PX"
            android:id="@+id/file_sharing_upload_file"
            android:textColor="#707070"
            android:textSize="@dimen/PXP32_TS"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/PXP90_PX"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/PXP32_PX"
            android:id="@+id/file_sharing_upload_photo"
            android:textColor="#707070"
            android:textSize="@dimen/PXP32_TS"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/PXP90_PX"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/PXP32_PX"
            android:id="@+id/file_sharing_upload_video"
            android:textColor="#707070"
            android:textSize="@dimen/PXP32_TS"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="@dimen/PXP90_PX"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/PXP32_PX"
            android:id="@+id/file_sharing_take_picture_or_record"
            android:textColor="#707070"
            android:textSize="@dimen/PXP32_TS"
            />
    </LinearLayout>
</RelativeLayout>


因為dialog是全螢幕的, 而內部的view可以根據我們的需求進行調整位置跟大小,
如上面程式碼是設定成330*600的狀態。

public class MoreDialog extends Dialog {

    private Context mContext;

    private View outSideLayout;

    private OnItemSelectedListener mOnItemSelectedListener;

    public interface OnItemSelectedListener{
        public void OnItemSelected(int pos);
    }

    public void setOnItemSelectedListener(OnItemSelectedListener listener){
        mOnItemSelectedListener = listener;
    }

    private TextView item1, item2, item3, item4, item5;

    public MoreDialog(Context context) {
        super(context, android.R.style.Theme);
        mContext = context;

        getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        View mainView = LayoutInflater.from(mContext).inflate(R.layout.file_sharing_more, null, false);
        setContentView(mainView);

        outSideLayout = mainView.findViewById(R.id.more_outside_layout);
        outSideLayout.getLayoutParams().height = 2000;
        outSideLayout.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                dismiss();

            }
        });
        item1 = (TextView) findViewById(R.id.file_sharing_add_new_folder);
        item2 = (TextView) findViewById(R.id.file_sharing_upload_file);
        item3 = (TextView) findViewById(R.id.file_sharing_upload_photo);
        item4 = (TextView) findViewById(R.id.file_sharing_upload_video);
        item5 = (TextView) findViewById(R.id.file_sharing_take_picture_or_record);

        item1.setText("Item 1");
        item2.setText("Item 2");
        item3.setText("Item 3");
        item4.setText("Item 4");
        item5.setText("Item 5");

        item1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(mOnItemSelectedListener != null){
                    mOnItemSelectedListener.OnItemSelected(0);
                }
                dismiss();
            }
        });
        item2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(mOnItemSelectedListener != null){
                    mOnItemSelectedListener.OnItemSelected(1);
                }
                dismiss();
            }
        });
        item3.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(mOnItemSelectedListener != null){
                    mOnItemSelectedListener.OnItemSelected(2);
                }
                dismiss();
            }
        });
        item4.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(mOnItemSelectedListener != null){
                    mOnItemSelectedListener.OnItemSelected(3);
                }
                dismiss();
            }
        });
        item5.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(mOnItemSelectedListener != null){
                    mOnItemSelectedListener.OnItemSelected(4);
                }
                dismiss();
            }
        });
    }


}

再來就是new出dialog,
我就可以在右上角產生出一個小list。

private Button showDialog;

    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getApplicationContext();
        setContentView(R.layout.activity_main);
        showDialog = (Button) findViewById(R.id.show_dialog);

        showDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MoreDialog mMoreDialog = new MoreDialog(MainActivity.this);
                mMoreDialog.setOnItemSelectedListener(new MoreDialog.OnItemSelectedListener() {
                    @Override
                    public void OnItemSelected(int pos) {
                        Toast.makeText(MainActivity.this, "Item " + (pos + 1) + " is selected.", Toast.LENGTH_SHORT).show();
                    }
                });
                mMoreDialog.show();
            }
        });

    }

註冊dialog的listener,
而當點下item的時候, 顯是對應的文字,
大功告成。
程式碼

Comments

comments powered by Disqus