2. 程式人生 > >利用PopupWindow做出仿IOS樣式的選擇器

利用PopupWindow做出仿IOS樣式的選擇器

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

專案中總會遇到這樣蛋疼的事情，android和ios同樣的功能，都用的同樣自帶的控制元件，做出來的效果就是：android的醜的不行，ios的挺好看。於是，老大一拍屁股，android的改成和ios樣式的一樣就好了。然後，android開發就苦比了，憑空多出若干工作量。好了，話不多說，直接上程式碼吧。下面是我專案遇到的一個仿ios選擇器的一個task，我邊貼程式碼邊說吧。

首先，看下這個選擇器的佈局檔案。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/pop_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/cancle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"
                android:text="@string/cancel"
                android:textColor="#999999" />

            <Button
                android:id="@+id/ok"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:background="@null"
                android:text="@string/ok"
                android:textColor="@color/TextLightGreen" />
        </RelativeLayout>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#999999" />

        <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="120dp" >

            <RadioGroup
                android:id="@+id/until"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
            </RadioGroup>
        </ScrollView>
    </LinearLayout>

</RelativeLayout>

可以看出，這要就是由兩個按鈕還有一個RadioGroup組成，這個RadioGRoup上面套了一層ScrollView，這個ScrollView是固定高度的，不難看出，選擇器的選擇項就會由RadioGroup中的RadioButton去實現，RadioButton會在程式碼中動態的去載入。

下面看我我們自定義的PopupWindow的程式碼

public class UnitPopupWindow extends PopupWindow {

	private Button btn_cancle, btn_ok;
	private RadioGroup unit;
	private View mMenuView;
	private Context context;
	private RadioButton button;
	private ColorStateList csl;

	private boolean statusFlag = true;

	@SuppressLint("ResourceAsColor")
	public UnitPopupWindow(Activity context, OnClickListener itemsOnClick,
			OnCheckedChangeListener checkedChangeListener,
			ArrayList<String> dataList) {
		super(context);
		this.context = context;
		LayoutInflater inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		mMenuView = inflater.inflate(R.layout.alert_dialogs, null);
		btn_cancle = (Button) mMenuView.findViewById(R.id.cancle);
		btn_ok = (Button) mMenuView.findViewById(R.id.ok);
		unit = (RadioGroup) mMenuView.findViewById(R.id.until);
		for (int i = 0; i < dataList.size(); i++) {
			button = new RadioButton(context);
			button.setButtonDrawable(null);
			button.setText(dataList.get(i));
			button.setId(i);
			button.setTextSize(25);
			button.setGravity(Gravity.CENTER);
			button.setHeight(90);

			button.setButtonDrawable(android.R.color.transparent);
			button.setPadding(0, 0, 0, 0);
			csl = context.getResources()
					.getColorStateList(R.drawable.utilcolor);
			button.setTextColor(csl);
			WindowManager wm1 = context.getWindowManager();
			button.setWidth(wm1.getDefaultDisplay().getWidth());
			button.setFocusable(true);

			unit.addView(button);
		}

		// 取消按鈕
		btn_cancle.setOnClickListener(itemsOnClick);
		// 設定按鈕監聽
		unit.setOnCheckedChangeListener(checkedChangeListener);

		btn_ok.setOnClickListener(itemsOnClick);
		// 設定SelectPicPopupWindow的View
		this.setContentView(mMenuView);
		// 設定SelectPicPopupWindow彈出窗體的寬
		this.setWidth(LayoutParams.MATCH_PARENT);
		// 設定SelectPicPopupWindow彈出窗體的高
		this.setHeight(LayoutParams.MATCH_PARENT);
		// 設定SelectPicPopupWindow彈出窗體可點選
		this.setFocusable(true);
		// 設定SelectPicPopupWindow彈出窗體動畫效果
		this.setAnimationStyle(R.style.AnimBottom);
		ColorDrawable dw = new ColorDrawable(0x00000000);
		// 設定SelectPicPopupWindow彈出窗體的背景
		this.setBackgroundDrawable(dw);
		// mMenuView新增OnTouchListener監聽判斷獲取觸屏位置如果在選擇框外面則銷燬彈出框
		mMenuView.setOnTouchListener(new OnTouchListener() {
			public boolean onTouch(View v, MotionEvent event) {
				int height = mMenuView.findViewById(R.id.pop_layout).getTop();
				int y = (int) event.getY();
				if (event.getAction() == MotionEvent.ACTION_UP) {
					if (y < height) {
						backgroundAlpha(1f);
						dismiss();
					}
				}
				return true;
			}
		});

	}


	public RadioGroup getUnit() {
		return unit;
	}

	public void setStatus(boolean status) {
		statusFlag = status;
		unit.postInvalidate();
	}

	private void backgroundAlpha(float bgAlpha) {
		WindowManager.LayoutParams lp = ((Activity) context).getWindow()
				.getAttributes();
		lp.alpha = bgAlpha; // 0.0-1.0
		((Activity) context).getWindow().setAttributes(lp);
	}

}

注意下里面的兩個監聽事件

OnClickListener：這是監聽確認和取消兩個button的監聽事件
OnCheckedChangeListener：這是監聽RadioButton選中狀態的監聽事件

順便貼下這個選擇器彈出時的動畫效果程式碼，上面程式碼中有設定過這樣的屬性，自己查詢。

 <style name="AnimBottom" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/push_bottom_in</item>
        <item name="android:windowExitAnimation">@anim/push_bottom_out</item>
  </style>


 
<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑入式 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="200"
        android:fromYDelta="100%p"
        android:toYDelta="0" />

    <alpha
        android:duration="100"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>
<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑入式 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="50%p" />

    <alpha
        android:duration="100"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

最後就到我們的呼叫了。假設使用者在點選了一個button後會彈出一個單位切換的選擇器，可以在這個button的OnClick事件中做這樣的處理，直接上程式碼 
          <pre name="code" class="java">           ArrayList mDataList = new ArrayList<String>();
                        //增加選擇內容的item
                        mDataList.add("km");
			mDataList.add("mile");
			menuWindow = new UnitPopupWindow(this, itemsOnClick,checkedChangeListener,mDataList); 
			menuWindow.setOnDismissListener(new OnDismissListener() {
				
				@Override
				public void onDismiss() {
					backgroundAlpha(1f);
				}
			});
            menuWindow.showAtLocation(this.findViewById(R.id.main), Gravity.RIGHT|Gravity.BOTTOM, 0, 0);
            backgroundAlpha(0.5f);

 
private OnClickListener  itemsOnClick = new OnClickListener(){  
        public void onClick(View v) {  
            menuWindow.dismiss();
            switch (v.getId()) {  
            case R.id.ok:  
                //點選確認的需要做的操作
                break; 
            default:  
                break;  
            }  
        }  
          
    };  

 private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {
        
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {    
            switch (checkedId) {
            case 0:
                mUtil = getString(R.string.km_txt);
                mUtilString = "KM";
                break;
            case 1:
                mUtil = getString(R.string.mile);
                mUtilString = "Mile";
                break;
            default:
                break;
            }
        }
    };
   以上就是仿ios選擇器的全部內容了，關於PopupWindow的一些基本api使用我這裡就不多說了，不是很難懂。

相關推薦

利用PopupWindow做出仿IOS樣式的選擇器

專案中總會遇到這樣蛋疼的事情，android和ios同樣的功能，都用的同樣自帶的控制元件，做出來的效果就是：android的醜的不行，ios的挺好看。於是，老大一拍屁股，android的改成和ios樣式的一樣就好了。然後，android開發就苦比了，憑空多出若干工作量。好了

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

樣式選擇器

群組 優先級 class 器） style css樣式 簽名 選擇 多個 1.標簽名選擇器 div { color：Red;} /即頁面中的各個標簽名的css樣式2.類選擇器 .divClass {color:Red;}

關於樣式選擇器:hover出現忽閃現象

relative 樣式 document ner height ati .... this 經歷 有時候在做項目的時候會想給一個元素添加一個遮罩效果，然後鼠標劃過去的時候，遮罩消失，一般最簡單的方法就是使用樣式選擇器:hover，但是經歷過才知道惡心，有種燈泡快要壞的感覺，

CSS樣式選擇器（1）

class 是按照 同類型 來歸類HTML的各種元素的，要把某些元素歸為一類，一般會考慮到下面這些因素： 它們具有同樣的樣式，比如不管他們的標籤是什麼，h1 或者是 div，但是字型大小都是 16px； 它們是一種具有同樣意義的東西，比如我們做網站，一般首頁的 LOGO

CSS基礎-CSS樣式選擇器

CSS概述 Cascading Style Sheets  疊層樣式表 隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。 CSS不僅可以靜態地修

前端html--css樣式選擇器

CSS 1. CSS 介紹 CSS : Cascading Style Sheet 層疊樣式表 作用 : 調整頁面元素的顯示外觀,實現網頁佈局2. CSS使用 在HTML文件中使用CSS樣式表,有三種方式 1. 內聯樣式/行內樣式 特點 : 在標籤中通過style屬性,為元素設定樣式 語法 : <標籤名

CSS樣式+選擇器+字型樣式

行內樣式： 直接將style屬性寫在標籤裡面，不建議使用 <p style="display:inline-block;width:200px"></p> 內部樣式： 將style標籤寫在head標籤裡面 <style>

CSS樣式選擇器

樣式的分類 1.行內樣式：直接在標籤裡新增樣式 例：建立一個div，直接在標籤裡寫它的樣式 <div style="width: 200px;height: 200px;background-color: red"></div> 結果如下 2

iOS分段選擇器、旅行App、標度尺、對對碰小遊戲、自定義相簿等原始碼

iOS精選原始碼 企業級開源專案，模仿藝龍旅行App 標籤選擇器--LeeTagView CSSegmentedControl常用的分段選擇器，簡單易用！ 仿微信左滑刪除 IOS左滑返回 輸入框 iOS 基於PhotoKit框架的自定義相簿 JHDraw - 畫線，

高仿QQ時間選擇器

###在軟體開發中我們會需要各種選擇選擇器，比如設定個人年齡時需要使用時間選擇器。設定地址需要用到地址選擇，還有身高等等。 ####下面介紹一下使用方法： 時間選擇器的使用： //這裡設定的是選擇之後可以回顯資料，所以先建立一個SP設定基本數值 Stri

CSS樣式選擇器的優先順序順序

樣式（css）是一種按照優先順序來進行載入的語言。 css各種選擇器的優先順序順序：（由上到下，優先順序順序依次降低） 不同級別： 1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義

小程式 WXSS樣式 選擇器與優先順序

WXSS（weixin stylesheet)是一套樣式語言，用於描述WXML的元件樣式。 就像CSS一樣，必須通過選擇器選擇WXMl的元件，然後進行美化。 一：WXSS選擇器 由於小程式底層採用呼叫原聲元件來構建介面，WXSS不能通過原聲元件來控制組件內部的樣式和位置

css樣式選擇器的種類及區別

每一條css樣式宣告（定義）由兩部分組成，形式如下： 選擇器{     樣式;} 在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作 用於網頁中的哪些元素。下面就來介紹各種選擇器：1.標籤選擇器 標籤選擇器其實就是html程式碼中的

HTML 中CSS三種常見的樣式選擇器

1：標籤選擇器 標籤選擇器，是所有帶有某種標籤的都生效。這裡以p為例，也就是所有的帶有p標記的都會這樣的樣式 <html><head><styletype="text

CSS樣式選擇器與常用的複合屬性的設定

這一陣子事情太多，本來在android裡面玩個好好的，開發專案時，涉及到網路，需要做伺服器，本來就是自己寫的小專案練練手，突然手足無措，不知道該怎麼做，就去網上學了servlet，之後有接觸到了jsp，對於前端網頁不怎麼熟悉的我，也不得不轉到前端學習點知識，恐怕

css樣式選擇器的型別---lesson2

css樣式選擇器有4類： 1、類選擇器，可以作用任何html元素 2、id選擇器，僅用於一個html元素 3、標籤選擇器，用於相同的html標籤元素 4、複合內容選擇器，基於選擇的內容 基本使用範例：

jquery選擇器擴充套件之樣式選擇器

jquery中提供了豐富多樣的選擇器，利用這些選擇器我們可以完成大多數任務，但是喜歡思考的我們總得找點事，提問時間： 1.如何選擇所有字型顏色為紅色的元素 2.如何選擇出背景顏色為為白色的元素 3.如何選擇出字型大於等於16px的元素 4.如何選擇出背景元素為白色並且文字顏

Python爬蟲資料提取方式——cssselector樣式選擇器

cssselector：和xpath是使用比較多的兩種資料提取方式。cssselector是css樣式選擇器實現的！scrapy爬蟲框架：支援xpath/csspyspider爬蟲框架：支援PyQuer

高階css樣式選擇器

一.基本選擇器 通用元素選擇器，匹配任何元素，在頁面上的每一個元素上起作用 h4 標籤選擇器，匹配所有使用h4標籤的元素，其優先順序僅僅只比 * 高 .test (class)類選擇器，匹配所有class屬性中包含textbox的元素，class選擇器與