如果想要做出這樣的畫面
一般會使用什麼元件?
我試過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的時候, 顯是對應的文字,
大功告成。
程式碼