Ref : https://github.com/codepath/android-menus-popups-dialogs-demo

Menus + Popups + Dialogs Demo

Android demo of menus, popups and dialogs. See the Menus and Popups cliffnotes for more details.

Features:

Displaying a custom dialog with layout content
Displaying a custom dialog with alert builder
Displaying a popup menu to show secondary actions
Displaying a popup window for a tooltip
Enabling contextual action modes for list items

Screens:

先看 AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codepath.example.menuspopupsdialogsdemo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.codepath.example.menuspopupsdialogsdemo.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

發覺只有一個 MainActivity

接下來看 MainActivity.java

@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	populateListView();
	}

可以看出試用 activity_main.xml

然後呼叫 populateListView()

public void populateListView() {
	items = new ArrayList<String>();
	items.add("First");
	items.add("Second");
	items.add("Third");
	items.add("Fourth");
	items.add("Fifth");
	adapterItems = new ArrayAdapter<String>(this,
	android.R.layout.simple_list_item_1, items);
	ListView lvItems = (ListView) findViewById(R.id.lvItems);
	lvItems.setAdapter(adapterItems);
	// Setup contextual action mode when item is clicked
	lvItems.setOnItemClickListener(new AdapterView.OnItemClickListener() {
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
	if (currentActionMode != null) { return; }
	currentListItemIndex = position;
	currentActionMode = startActionMode(modeCallBack);
	view.setSelected(true);
	}
	});
	}

可以看出在初始話ListView

items = new ArrayList<String>();

items.add("First");

adapterItems = new ArrayAdapter<String>(this,android.R.layout.simple_list_itme_1,items);// //把剛剛 ArrayList放進去

ListView lvItems = (ListView) findViewById(R.id.LvItems);

lvItmes.setAdapter(adapterItems );

接下來看 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:padding="10dp"
	tools:context="com.codepath.example.menuspopupsdialogsdemo.MainActivity"
	tools:ignore="MergeRootFrame" >

	<Button
	android:id="@+id/btnShowPopupWindow"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:onClick="onShowPopupWindow"
	android:layout_alignBaseline="@+id/btnShowPopupMenu"
	android:layout_alignBottom="@+id/btnShowPopupMenu"
	android:layout_toRightOf="@+id/btnShowPopupMenu"
	android:text="PopWindow" />

	<ListView
	android:id="@+id/lvItems"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentLeft="true"
	android:layout_alignParentRight="true"
	android:layout_below="@+id/tvLabel" >

	</ListView>

	<Button
	android:id="@+id/btnShowDialogWindow"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/lvItems"
	android:layout_alignParentTop="true"
	android:onClick="onShowDialogWindow"
	android:text="Dialog Window" />

	<Button
	android:id="@+id/btnShowAlertDialog"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignBaseline="@+id/btnShowDialogWindow"
	android:layout_alignBottom="@+id/btnShowDialogWindow"
	android:layout_toRightOf="@+id/btnShowDialogWindow"
	android:onClick="onShowAlertDialog"
	android:text="Dialog Alert" />

	<TextView
	android:id="@+id/tvLabel"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/btnShowPopupMenu"
	android:layout_alignRight="@+id/lvItems"
	android:layout_below="@+id/btnShowPopupMenu"
	android:text="Click item below to trigger contextual action mode" />

	<Button
	android:id="@+id/btnShowPopupMenu"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:onClick="onShowPopupMenu"
	android:layout_alignLeft="@+id/btnShowDialogWindow"
	android:layout_below="@+id/btnShowDialogWindow"
	android:text="PopMenu" />

	</RelativeLayout>

把整個主畫面的layout 表現出來... 有 Button 和 ListView 和 TextView等等...

當按下Button

android:id="@+id/btnShowPopupWindow" -> android:onClick="onShowPopupWindow"

android:id="@+id/btnShowDialogWindow" -> android:onClick="onShowDialogWindow"

android:id="@+id/btnShowAlertDialog" -> android:onClick="onShowAlertDialog"
android:id="@+id/btnShowPopupMenu" -> android:onClick="onShowPopupMenu"

總共有四個 OnClickLister function 要實做在 MainActivity.java

public void onShowDialogWindow(View v) {
	FragmentManager fm = getSupportFragmentManager();
	EditNameDialog editNameDialog = EditNameDialog.newInstance("Type your name");
	editNameDialog.show(fm, "fragment_edit_name");
	}

	public void onShowAlertDialog(View v) {
	FragmentManager fm = getSupportFragmentManager();
	CustomAlertDialogFragment alertDialog = CustomAlertDialogFragment.newInstance("Some title");
	alertDialog.show(fm, "fragment_alert");
	}

	public void onShowPopupWindow(View v) {
	PopupWindow popup = new PopupWindow(MainActivity.this);
	View layout = getLayoutInflater().inflate(R.layout.popup_window, null);
	popup.setContentView(layout);
	// Set content width and height
	popup.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
	popup.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
	// Closes the popup window when touch outside of it - when looses focus
	popup.setOutsideTouchable(true);
	popup.setFocusable(true);
	// Show anchored to button
	popup.setBackgroundDrawable(new BitmapDrawable());
	popup.showAsDropDown(v);
	}

	public void onShowPopupMenu(View v) {
	PopupMenu popup = new PopupMenu(this, v);
	// Inflate the menu from xml
	popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());
	// Setup menu item selection
	popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
	public boolean onMenuItemClick(MenuItem item) {
	switch (item.getItemId()) {
	case R.id.menu_more:
	Toast.makeText(MainActivity.this, "More!", Toast.LENGTH_SHORT).show();
	return true;
	case R.id.menu_hide:
	Toast.makeText(MainActivity.this, "Hide!", Toast.LENGTH_SHORT).show();
	return true;
	default:
	return false;
	}
	}
	});
	// Show the menu
	popup.show();
	}

先來看 onShowDialogWindow(View V) // (View V) 很重要...一定要寫...不然就會變成另外的function...

//呼叫 getSupportFragmentManager 來得到 FragmentManager 物件fm
FragmentManager fm = getSupportFragmentManager();

// 新增一個 EditNameDialog 的物件
EditNameDialog editNameDialog = EditNameDialog.newInstance("Type your name");

// 然後呼叫 show function ... 把 fragmentmanager 傳進去
editNameDialog.show(fm, "fragment_edit_name");

接下來我們來實做 EditNameDialog 這個class...

// 繼承自 DialogFragment
public class EditNameDialog extends DialogFragment {

// 改寫這個 onCreateView function

@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	Bundle savedInstanceState) { //先得到View .... 要指定用那個 layout.xml
	View view = inflater.inflate(R.layout.fragment_edit_name, container); // 利用剛剛得到的view.. 可以用呼叫 view物件的 findViewById function 來得到 // 元件(EditText 或是Button)
	mEditText = (EditText) view.findViewById(R.id.txt_your_name);
	btnSubmit = (Button) view.findViewById(R.id.btnSubmit);
	btnSubmit.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View v) {
	EditNameDialogListener listener = (EditNameDialogListener) getActivity();
	listener.onFinishEditDialog(mEditText.getText().toString());
	dismiss();
	}
	});
	String title = getArguments().getString("title", "Enter Name");
	getDialog().setTitle(title);
	// Show soft keyboard automatically
	mEditText.requestFocus();
	getDialog().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
	return view;
	}

}

定位出 mEditText 和 btnSubmit

如果使用者點擊 btnSubmit... 就會建立 EditNameDialogListener 這個listener ....
然後呼叫onFinishEditDialog()... 把mEditText 裡面的文字內容抓出來....
然後呼叫 dismiss();///

然後EditNameDialogListener 其實就只是一個interface..... 裡面只是呼叫 onFinishEditDialog()

public interface EditNameDialogListener {
    void onFinishEditDialog(String inputText);
}

// 接下來實做  EditNameDialog newInstance ...  因為MainActivity 會呼叫他

//  內容就是 產生一個  EditNameDialog  物件...然後把  title 的內容放進去  Bundle 裡面

//  然後把Bundle 放進去 EditNameDialog   物件...並且回傳回去...


public static EditNameDialog newInstance(String title) {
    EditNameDialog frag = new EditNameDialog();
    Bundle args = new Bundle();
    args.putString("title", title);
    frag.setArguments(args);
    return frag;
}

再回到MainActivity

接下來看 onShowPopupMenu function....

public void onShowPopupMenu(View v) {
    PopupMenu popup = new PopupMenu(this, v);
    // Inflate the menu from xml    popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());
    // Setup menu item selection    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.menu_more:
                    Toast.makeText(MainActivity.this, "More!", Toast.LENGTH_SHORT).show();
                    return true;
                case R.id.menu_hide:
                    Toast.makeText(MainActivity.this, "Hide!", Toast.LENGTH_SHORT).show();
                    return true;
                default:
                    return false;
            }
        }
    });
    // Show the menu    popup.show();
}

就是產生一個 PopupMenu 的物件... 然後呼叫 getMenuInflater () 來指定 menu 的layout....

最後改寫他的 setOnMenuItemClickListener function....

這裡我們只有實做兩個item 的定義... R.id.menu_more 和 R.id.menu_hide

定義在 menu folder 下面的 popmenu_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_more"        android:title="See More" />
    <item android:id="@+id/menu_hide"        android:title="Hide" />
</menu>

這裡只是呼叫 Toast.makeText().show();//

接下來看 onShowPopupWindow()

就是呼叫PopupWindow() 來產生一個 PopupWindow 的物件

然後呼叫getLayoutInflater().inflate() 來指定 popup_window 的layout

呼叫setContentView()... 把剛剛的layoyt 設進去

 setHeight()  設定Height

 setWidth()   設定Width

 setOutsideTouchable   設定在其他side是否可以touch

最後呼叫showAsDropDown ...

public void onShowPopupWindow(View v) {
    PopupWindow popup = new PopupWindow(MainActivity.this);
    View layout = getLayoutInflater().inflate(R.layout.popup_window, null);
    popup.setContentView(layout);
    // Set content width and height    popup.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    popup.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
    // Closes the popup window when touch outside of it - when looses focus    popup.setOutsideTouchable(true);
    popup.setFocusable(true);
    // Show anchored to button    popup.setBackgroundDrawable(new BitmapDrawable());
    popup.showAsDropDown(v);
}

最後來看

public void onShowAlertDialog(View v) {
    FragmentManager fm = getSupportFragmentManager();
    CustomAlertDialogFragment alertDialog = CustomAlertDialogFragment.newInstance("Some title");
    alertDialog.show(fm, "fragment_alert");
}

CustomAlertDialogFragment 物件的實做如下:

public class CustomAlertDialogFragment extends DialogFragment {


}

android 的研究筆記

2016年9月11日星期日

android-menus-popups-dialogs-demo CODEPATH

Menus + Popups + Dialogs Demo

沒有留言:

張貼留言

2016年9月11日 星期日

android-menus-popups-dialogs-demo CODEPATH

Menus + Popups + Dialogs Demo

沒有留言:

張貼留言

2016年9月11日星期日