2. 程式人生 > >Android 使用自定義Dialog打造ActionSheet選單

Android 使用自定義Dialog打造ActionSheet選單

阿新 • • 發佈：2019-01-25

前言

這幾天用到了github上的一個仿IOS的ActionSheet(ActionSheetForAndroid)控制元件,它是使用Fragment實現的，由於我的主介面也是由幾個Fragment來做，所以這樣會造成FragmentManager出現一些問題。所以就把它的實現方式改為由自定義Dialog來實現，保留它的主題屬性方便修改樣式，同時去除Fragmrnt部分，增加可用性。

實現

package com.roc.actionsheet;

import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.StateListDrawable;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

/**
 * ActionSheet
 * 
 * @author Mr.Zheng
 * @date 2014年9月7日 下午11:15:54
 */
public class ActionSheet extends Dialog implements OnClickListener
{
	/* 控制元件的id */
	private static final int CANCEL_BUTTON_ID = 100;
	private static final int BG_VIEW_ID = 10;
	private static final int TRANSLATE_DURATION = 300;
	private static final int ALPHA_DURATION = 300;

	private Context mContext;
	private Attributes mAttrs;
	private MenuItemClickListener mListener;
	private View mView;
	private LinearLayout mPanel;
	private View mBg;
	private List<String> items;
	private String cancelTitle = "";
	private boolean mCancelableOnTouchOutside;
	private boolean mDismissed = true;
	private boolean isCancel = true;

	public ActionSheet(Context context)
	{
		super(context, android.R.style.Theme_Light_NoTitleBar);// 全屏
		this.mContext = context;
		initViews();
		getWindow().setGravity(Gravity.BOTTOM);
		Drawable drawable = new ColorDrawable();
		drawable.setAlpha(0);// 設定透明背景
		getWindow().setBackgroundDrawable(drawable);
	}

	public void initViews()
	{
		/* 隱藏軟鍵盤 */
		InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
		if (imm.isActive())
		{
			View focusView = ((Activity) mContext).getCurrentFocus();
			if (focusView != null)
				imm.hideSoftInputFromWindow(focusView.getWindowToken(), 0);
		}
		mAttrs = readAttribute();// 獲取主題屬性
		mView = createView();
		mBg.startAnimation(createAlphaInAnimation());
		mPanel.startAnimation(createTranslationInAnimation());
	}

	private Animation createTranslationInAnimation()
	{
		int type = TranslateAnimation.RELATIVE_TO_SELF;
		TranslateAnimation an = new TranslateAnimation(type, 0, type, 0, type, 1, type, 0);
		an.setDuration(TRANSLATE_DURATION);
		return an;
	}

	private Animation createAlphaInAnimation()
	{
		AlphaAnimation an = new AlphaAnimation(0, 1);
		an.setDuration(ALPHA_DURATION);
		return an;
	}

	private Animation createTranslationOutAnimation()
	{
		int type = TranslateAnimation.RELATIVE_TO_SELF;
		TranslateAnimation an = new TranslateAnimation(type, 0, type, 0, type, 0, type, 1);
		an.setDuration(TRANSLATE_DURATION);
		an.setFillAfter(true);
		return an;
	}

	private Animation createAlphaOutAnimation()
	{
		AlphaAnimation an = new AlphaAnimation(1, 0);
		an.setDuration(ALPHA_DURATION);
		an.setFillAfter(true);
		return an;
	}

	/**
	 * 建立基本的背景檢視
	 */
	private View createView()
	{
		FrameLayout parent = new FrameLayout(mContext);
		FrameLayout.LayoutParams parentParams = new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT);
		parentParams.gravity = Gravity.BOTTOM;
		parent.setLayoutParams(parentParams);
		mBg = new View(mContext);
		mBg.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
		mBg.setBackgroundColor(Color.argb(136, 0, 0, 0));
		mBg.setId(BG_VIEW_ID);
		mBg.setOnClickListener(this);

		mPanel = new LinearLayout(mContext);
		FrameLayout.LayoutParams mPanelParams = new FrameLayout.LayoutParams(
				FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);
		mPanelParams.gravity = Gravity.BOTTOM;
		mPanel.setLayoutParams(mPanelParams);
		mPanel.setOrientation(LinearLayout.VERTICAL);
		parent.addView(mBg);
		parent.addView(mPanel);
		return parent;
	}

	/**
	 * 建立MenuItem
	 */
	private void createItems()
	{
		if (items != null && items.size() > 0)
			for (int i = 0; i < items.size(); i++)
			{
				Button bt = new Button(mContext);
				bt.setId(CANCEL_BUTTON_ID + i + 1);
				bt.setOnClickListener(this);
				bt.setBackgroundDrawable(getOtherButtonBg(items.toArray(new String[items.size()]), i));
				bt.setText(items.get(i));
				bt.setTextColor(mAttrs.otherButtonTextColor);
				bt.setTextSize(TypedValue.COMPLEX_UNIT_PX, mAttrs.actionSheetTextSize);
				if (i > 0)
				{
					LinearLayout.LayoutParams params = createButtonLayoutParams();
					params.topMargin = mAttrs.otherButtonSpacing;
					mPanel.addView(bt, params);
				} else
					mPanel.addView(bt);
			}
		Button bt = new Button(mContext);
		bt.getPaint().setFakeBoldText(true);
		bt.setTextSize(TypedValue.COMPLEX_UNIT_PX, mAttrs.actionSheetTextSize);
		bt.setId(CANCEL_BUTTON_ID);
		bt.setBackgroundDrawable(mAttrs.cancelButtonBackground);
		bt.setText(cancelTitle);
		bt.setTextColor(mAttrs.cancelButtonTextColor);
		bt.setOnClickListener(this);
		LinearLayout.LayoutParams params = createButtonLayoutParams();
		params.topMargin = mAttrs.cancelButtonMarginTop;
		mPanel.addView(bt, params);

		mPanel.setBackgroundDrawable(mAttrs.background);
		mPanel.setPadding(mAttrs.padding, mAttrs.padding, mAttrs.padding, mAttrs.padding);
	}

	public LinearLayout.LayoutParams createButtonLayoutParams()
	{
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.WRAP_CONTENT);
		return params;
	}

	/**
	 * item按鈕的顏色
	 * 
	 * @param titles
	 * @param i
	 * @return
	 */
	private Drawable getOtherButtonBg(String[] titles, int i)
	{
		if (titles.length == 1)
			return mAttrs.otherButtonSingleBackground;
		else if (titles.length == 2)
			switch (i)
			{
			case 0:
				return mAttrs.otherButtonTopBackground;
			case 1:
				return mAttrs.otherButtonBottomBackground;
			}
		else if (titles.length > 2)
		{
			if (i == 0)
				return mAttrs.otherButtonTopBackground;
			else if (i == (titles.length - 1))
				return mAttrs.otherButtonBottomBackground;
			return mAttrs.getOtherButtonMiddleBackground();
		}
		return null;
	}

	public void showMenu()
	{
		if (!mDismissed)
			return;
		show();
		getWindow().setContentView(mView);
		mDismissed = false;
	}

	/**
	 * dissmiss Menu選單
	 */
	public void dismissMenu()
	{
		if (mDismissed)
			return;
		dismiss();
		onDismiss();
		mDismissed = true;
	}

	/**
	 * dismiss時的處理
	 */
	private void onDismiss()
	{
		mPanel.startAnimation(createTranslationOutAnimation());
		mBg.startAnimation(createAlphaOutAnimation());
	}

	/**
	 * 取消按鈕的標題文字
	 * 
	 * @param title
	 * @return
	 */
	public ActionSheet setCancelButtonTitle(String title)
	{
		this.cancelTitle = title;
		return this;
	}

	/**
	 * 取消按鈕的標題文字
	 * 
	 * @param strId
	 * @return
	 */
	public ActionSheet setCancelButtonTitle(int strId)
	{
		return setCancelButtonTitle(mContext.getString(strId));
	}

	/**
	 * 點選外部邊緣是否可取消
	 * 
	 * @param cancelable
	 * @return
	 */
	public ActionSheet setCancelableOnTouchMenuOutside(boolean cancelable)
	{
		mCancelableOnTouchOutside = cancelable;
		return this;
	}

	public ActionSheet addItems(String... titles)
	{
		if (titles == null || titles.length == 0)
			return this;
		items = Arrays.asList(titles);
		createItems();
		return this;
	}

	public ActionSheet setItemClickListener(MenuItemClickListener listener)
	{
		this.mListener = listener;
		return this;
	}

	private Attributes readAttribute()
	{
		Attributes attrs = new Attributes(mContext);
		TypedArray a = mContext.getTheme().obtainStyledAttributes(null, R.styleable.ActionSheet,
				R.attr.actionSheetStyle, 0);
		Drawable background = a.getDrawable(R.styleable.ActionSheet_actionSheetBackground);
		if (background != null)
			attrs.background = background;
		Drawable cancelButtonBackground = a.getDrawable(R.styleable.ActionSheet_cancelButtonBackground);
		if (cancelButtonBackground != null)
			attrs.cancelButtonBackground = cancelButtonBackground;
		Drawable otherButtonTopBackground = a.getDrawable(R.styleable.ActionSheet_otherButtonTopBackground);
		if (otherButtonTopBackground != null)
			attrs.otherButtonTopBackground = otherButtonTopBackground;
		Drawable otherButtonMiddleBackground = a
				.getDrawable(R.styleable.ActionSheet_otherButtonMiddleBackground);
		if (otherButtonMiddleBackground != null)
			attrs.otherButtonMiddleBackground = otherButtonMiddleBackground;
		Drawable otherButtonBottomBackground = a
				.getDrawable(R.styleable.ActionSheet_otherButtonBottomBackground);
		if (otherButtonBottomBackground != null)
			attrs.otherButtonBottomBackground = otherButtonBottomBackground;
		Drawable otherButtonSingleBackground = a
				.getDrawable(R.styleable.ActionSheet_otherButtonSingleBackground);
		if (otherButtonSingleBackground != null)
			attrs.otherButtonSingleBackground = otherButtonSingleBackground;
		attrs.cancelButtonTextColor = a.getColor(R.styleable.ActionSheet_cancelButtonTextColor,
				attrs.cancelButtonTextColor);
		attrs.otherButtonTextColor = a.getColor(R.styleable.ActionSheet_otherButtonTextColor,
				attrs.otherButtonTextColor);
		attrs.padding = (int) a.getDimension(R.styleable.ActionSheet_actionSheetPadding, attrs.padding);
		attrs.otherButtonSpacing = (int) a.getDimension(R.styleable.ActionSheet_otherButtonSpacing,
				attrs.otherButtonSpacing);
		attrs.cancelButtonMarginTop = (int) a.getDimension(R.styleable.ActionSheet_cancelButtonMarginTop,
				attrs.cancelButtonMarginTop);
		attrs.actionSheetTextSize = a.getDimensionPixelSize(R.styleable.ActionSheet_actionSheetTextSize,
				(int) attrs.actionSheetTextSize);

		a.recycle();
		return attrs;
	}

	@Override
	public void onClick(View v)
	{
		if (v.getId() == BG_VIEW_ID && !mCancelableOnTouchOutside)
			return;
		dismissMenu();
		if (v.getId() != CANCEL_BUTTON_ID && v.getId() != BG_VIEW_ID)
		{
			if (mListener != null)
				mListener.onItemClick(v.getId() - CANCEL_BUTTON_ID - 1);
			isCancel = false;
		}
	}

	/**
	 * 自定義屬性的控制元件主題
	 * 
	 * @author Mr.Zheng
	 * @date 2014年9月7日 下午10:47:06
	 */
	private class Attributes
	{
		private Context mContext;

		private Drawable background;
		private Drawable cancelButtonBackground;
		private Drawable otherButtonTopBackground;
		private Drawable otherButtonMiddleBackground;
		private Drawable otherButtonBottomBackground;
		private Drawable otherButtonSingleBackground;
		private int cancelButtonTextColor;
		private int otherButtonTextColor;
		private int padding;
		private int otherButtonSpacing;
		private int cancelButtonMarginTop;
		private float actionSheetTextSize;

		public Attributes(Context context)
		{
			mContext = context;
			this.background = new ColorDrawable(Color.TRANSPARENT);
			this.cancelButtonBackground = new ColorDrawable(Color.BLACK);
			ColorDrawable gray = new ColorDrawable(Color.GRAY);
			this.otherButtonTopBackground = gray;
			this.otherButtonMiddleBackground = gray;
			this.otherButtonBottomBackground = gray;
			this.otherButtonSingleBackground = gray;
			this.cancelButtonTextColor = Color.WHITE;
			this.otherButtonTextColor = Color.BLACK;
			this.padding = dp2px(20);
			this.otherButtonSpacing = dp2px(2);
			this.cancelButtonMarginTop = dp2px(10);
			this.actionSheetTextSize = dp2px(16);
		}

		private int dp2px(int dp)
		{
			return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, mContext.getResources()
					.getDisplayMetrics());
		}

		public Drawable getOtherButtonMiddleBackground()
		{
			if (otherButtonMiddleBackground instanceof StateListDrawable)
			{
				TypedArray a = mContext.getTheme().obtainStyledAttributes(null, R.styleable.ActionSheet,
						R.attr.actionSheetStyle, 0);
				otherButtonMiddleBackground = a
						.getDrawable(R.styleable.ActionSheet_otherButtonMiddleBackground);
				a.recycle();
			}
			return otherButtonMiddleBackground;
		}

	}

	public static interface MenuItemClickListener
	{
		void onItemClick(int itemPosition);
	}

}

程式碼中要注意的地方就是dialog的自定義view要在底部出現，背景要透明，dialog要全屏，這些主要在ActionSheet構造方法裡設定，即55到61行，然後動態新增控制元件時注意一下Params就好。其它地方也沒什麼改動了。

使用

主題我也是直接使用它的，資源配置檔案就不貼上來了，其中的屬性代表的對應控制元件去參看ActionSheetForAndroid吧，最後貼上原始碼地址，改大小、顏色、背景什麼的到主題裡設定一下換下圖片就行了。

我們可以在style直接設定ActionSheet的主題:

<resources>

    <style name="AppBaseTheme" parent="android:Theme.Light.NoTitleBar"></style>

    <style name="AppTheme" parent="AppBaseTheme">

        <!-- ActionSheet -->
        <item name="actionSheetBackground">@android:color/transparent</item>
        <item name="cancelButtonBackground">@drawable/actionsheet_slt_as_ios7_cancel_bt</item>
        <item name="otherButtonTopBackground">@drawable/actionsheet_slt_as_ios7_other_bt_top</item>
        <item name="otherButtonMiddleBackground">@drawable/actionsheet_slt_as_ios7_other_bt_middle</item>
        <item name="otherButtonBottomBackground">@drawable/actionsheet_slt_as_ios7_other_bt_bottom</item>
        <item name="otherButtonSingleBackground">@drawable/actionsheet_slt_as_ios7_other_bt_single</item>
        <item name="cancelButtonTextColor">#1E82FF</item>
        <item name="otherButtonTextColor">#1E82FF</item>
        <item name="actionSheetPadding">10dp</item>
        <item name="otherButtonSpacing">0dp</item>
        <item name="cancelButtonMarginTop">10dp</item>
        <item name="actionSheetTextSize">16sp</item>
    </style>

</resources>

也可以在程式碼裡才去設定主題： 
package com.roc.actionsheet;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.Toast;

import com.roc.actionsheet.ActionSheet.MenuItemClickListener;

/**
 * @author Mr.Zheng
 * @date 2014年9月8日  上午12:08:55
 */
public class MainActivity extends FragmentActivity implements MenuItemClickListener
{

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

	public void onClick(View v)
	{
		switch (v.getId())
		{
		case R.id.ios6:
			setTheme(R.style.ActionSheetStyleIOS6);
			break;
		case R.id.ios7:
			setTheme(R.style.ActionSheetStyleIOS7);
			break;
		}
		showActionSheet();
	}

	public void showActionSheet()
	{
		ActionSheet menuView = new ActionSheet(this);
		menuView.setCancelButtonTitle("cancel");// before add items
		menuView.addItems("Item1", "Item2", "Item3", "Item4");
		menuView.setItemClickListener(this);
		menuView.setCancelableOnTouchMenuOutside(true);
		menuView.showMenu();
	}

	@Override
	public void onItemClick(int itemPosition)
	{
		Toast.makeText(this, (itemPosition + 1) + " click", 0).show();
	}

}

是不是挺簡單的。下面來看下效果


效果是和用Fragment實現一樣的。

相關推薦

Android 使用自定義Dialog打造ActionSheet選單

前言 這幾天用到了github上的一個仿IOS的ActionSheet(ActionSheetForAndroid)控制元件,它是使用Fragment實現的，由於我的主介面也是由幾個Fragment來做，所以這樣會造成FragmentManager出現一些問題。所以就

android 自定義dialog的實現方法

listener params .get animator miss nim style wrap 參數 最近一直在做 java 相關的東西， 雖然一直在看 Android 但感覺有點留於理論，總這樣畢竟不行，寫的多不一定懂得多，但要想懂得多就一定要寫的多，於是今天動手寫了

Android自定義Dialog多選對話框（Dialog+Listview+CheckBox)

dia bundle adapter get etl wrap 點擊 所有 技術 先放效果截圖 項目中需要有個Dialog全選對話框，點擊全選全部選中，取消全選全部取消。下午查了些資料，重寫了一下Dialog對話框。把代碼放出來。 public class MainAct

Android 自定義Dialog小結

關於自定義佈局的Dialog，總是會遇到各種各樣的問題，作為一個菜鳥，想想還是打算專門開一篇總結自己遇到的各種問題。歡迎大佬們指點 自定義佈局寬度和位置問題 自定義佈局，就是自己自由地設定Dialog的樣式，所以肯定會自己寫一個Layout佈局，並把它加載出來，這才是我們想要的，但是經常會出

【舉例】Android自定義Dialog——做出“確定/取消”的選擇

1、自定義Dialog的介面 <--!dialog_yesorno_for_permission.xml--> <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="

【舉例】Android自定義Dialog——選擇一個RadioButton

1. 自定義Dialog的介面 <--!dialog_selectserver.xml--> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sch

Android--自定義Dialog,仿IOS對話方塊樣式

效果： 實現： 1.dialog_layout.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/ap

Android 自定義dialog步驟

1.建類繼承dialog 2.寫構造方法 3.宣告各類控制元件 4.寫oncreate() setContentView引入佈局 初始化宣告的控制元件 5.可以自定義style 6.可以申明內部介面並建立內部例項用於點選事件中,然後讓外部引用者實現介面方法 7.可以重

Android 自定義 ViewPager 打造千變萬化的圖片切換效果

                記得第一次見到ViewPager這個控制元件，瞬間愛不釋手，做東西的主介面通通ViewPager，以及圖片切換也拋棄了ImageSwitch之類的，開始讓ViewPager來做。時間長了，ViewPager的切換效果覺得枯燥，形成了審美疲勞~~我們需要改變，今天教大家如何改變V

Android 自定義Dialog小結

關於自定義佈局的Dialog，總是會遇到各種各樣的問題，作為一個菜鳥，想想還是打算專門開一篇總結自己遇到的各種問題。歡迎大佬們指點 自定義佈局寬度和位置問題 自定義佈局，就是自己自由地設定Dialog的樣式，所以肯定會自己寫一個Layout佈局，並把它加載出來，這才是我們

Android自定義ViewGroup打造各種風格的SlidingMenu

看鴻洋大大的QQ5.0側滑選單的視訊課程，對於側滑的時的動畫效果的實現有了新的認識，似乎打通了任督二脈，目前可以實現任意效果的側滑選單了，感謝鴻洋大大！！ 鴻洋大大用的是HorizontalScrollView來實現的側滑選單功能，HorizontalScro

Android 自定義Dialog 裡面有EditText控制元件點選關閉輸入法失效的問題

在做一個專案的時候，自定義額了一個Dialog 裡面有取消，儲存按鈕，以及EditText，在輸入法彈出的時候，點選取消按鈕，自定義dialog對話方塊關閉了，但是輸入法始終關閉不了，在網上找了很多方法，都不能很好的解決，輸入法不能關閉的問題。    最好找到的解決辦法是

Android 自定義 HorizontalScrollView 打造再多圖片（控制元件）也不怕 OOM 的橫向滑動效果

自從Gallery被谷歌廢棄以後，Google推薦使用ViewPager和HorizontalScrollView來實現Gallery的效果。的確HorizontalScrollView可以實現Gallery的效果，但是HorizontalScrollView存在一個很大的問

android 自定義dialog的實現（自定義大小、去除黑色邊框等）

搜尋相關關鍵字網上一大堆實現，但是看完總覺得缺胳膊少腿，繞了不少彎路，終於弄好了自定義dialog。把自己整合的完整程式碼發上來。 要點： 1、設定自定義dialog的佈局檔案my_dialog.xml 2、設定一份自定義的樣式檔案styles_wx.xml，該檔案用於覆

android 自定義Dialog背景透明及顯示位置設定(轉載)

<?xml version="1.0" encoding="utf-8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  a

Android 自定義Dialog---顯示在中間(網易雲音樂選擇排序方式)

效果如上圖具體實現的程式碼如下：佈局檔案：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

Android自定義Dialog對話方塊的幾種方法（精簡版）

自定義對話方塊是經常使用的功能，我們常用的彈窗操作，除了使用popwindow就是使用dialog來實現，這兩種元件都支援之定義佈局和功能來滿足我們個性化的需求，也可以不採用自定義而直接使用系統封裝好的api來實現功能。今天簡單總結下在使用dialog做彈窗功能

android 自定義dialog彈出和消失動畫

自定義dialog視窗，根據座標可隨意設定dialog顯示位置，實現了視窗彈出動畫 Java程式碼： package com.sunxu.org.IndividualityDialog; import android.app.Activity; import and

Android自定義view-打造酷炫的字型滑動高亮控制元件

前言: 相信很多時候開發會遇到類似於音樂歌詞同步，播放到哪句歌詞的哪個詞時會逐漸高亮，這樣的描述還是不夠準確，iPhone的滑動解鎖的那種效果，相信很多人都會熟悉吧。今天，我們的首要任務就是開發一個類似於這種效果的安卓控制元件，以便在以後的專案中直接使用，看起來高大上有木有

android 自定義dialog並實現失去焦點（背景透明）的功能

前言：由於在專案中需要用到更新顯示動畫的需求，所以想到了dialog，自定義dialog不難，網上教程很多，但是在實現dialog背景透明的需求時，遇到了一點問題，網上的一些方法在我的機器上並沒有實現，只能曲折中找到了另一個方法實現。雖然有點麻煩，但畢竟效果不錯。 此方法寫