Android控件PopupWindow模仿ios底部彈窗
前言
在H5火熱的時(shí)代,許多框架都出了底部彈窗的控件,在H5被稱為彈出菜單ActionSheet,今天我們也來模仿一個(gè)ios的底部彈窗,取材于蘋果QQ的選擇頭像功能。
正文
廢話不多說,先來個(gè)今天要實(shí)現(xiàn)的效果圖
整個(gè)PopupWindow的開啟代碼
private void openPopupWindow(View v) { //防止重復(fù)按按鈕 if (popupWindow != null && popupWindow.isShowing()) { return; } //設(shè)置PopupWindow的View View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null); popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT); //設(shè)置背景,這個(gè)沒什么效果,不添加會報(bào)錯(cuò) popupWindow.setBackgroundDrawable(new BitmapDrawable()); //設(shè)置點(diǎn)擊彈窗外隱藏自身 popupWindow.setFocusable(true); popupWindow.setOutsideTouchable(true); //設(shè)置動畫 popupWindow.setAnimationStyle(R.style.PopupWindow); //設(shè)置位置 popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight); //設(shè)置消失監(jiān)聽 popupWindow.setOnDismissListener(this); //設(shè)置PopupWindow的View點(diǎn)擊事件 setOnPopupViewClick(view); //設(shè)置背景色 setBackgroundAlpha(0.5f); }
步驟分析:
PopupWindow的布局
PopupWindow的創(chuàng)建
PopupWindow添加動畫效果
PopupWindow設(shè)置背景陰影
PopupWindow監(jiān)聽點(diǎn)擊事件
獲取NavigationBar的高度
PopupWindow的布局:在Layout中,設(shè)計(jì)我們需要的布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="你可以將照片上傳至照片墻" android:textColor="#666" android:textSize="14sp" /> <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" /> <TextView android:id="@+id/tv_pick_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="從手機(jī)相冊選擇" android:textColor="#118" android:textSize="18sp" /> <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" /> <TextView android:id="@+id/tv_pick_zone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="從空間相冊選擇" android:textColor="#118" android:textSize="18sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape"> <TextView android:id="@+id/tv_cancel" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="取消" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" /> </LinearLayout> </LinearLayout>
其效果是:
PopupWindow的創(chuàng)建:這個(gè)創(chuàng)建與我們普通的控件創(chuàng)建方法是一樣的
//設(shè)置PopupWindow的View View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null); popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
PopupWindow添加動畫效果:我們創(chuàng)建一個(gè)anim文件夾,創(chuàng)建我們的out和in動畫效果,然后在style添加我們的動畫
<?xml version="1.0" encoding="utf-8"?> <!--進(jìn)入動畫--> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="100%" android:toYDelta="0" android:duration="200"/> <?xml version="1.0" encoding="utf-8"?> <!--退出動畫--> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0" android:toYDelta="100%" android:duration="200"/> <!--彈窗動畫--> <style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>
//設(shè)置動畫
popupWindow.setAnimationStyle(R.style.PopupWindow);
PopupWindow設(shè)置背景陰影:彈窗打開時(shí)設(shè)置透明度為0.5,彈窗消失時(shí)設(shè)置透明度為1
//設(shè)置屏幕背景透明效果 public void setBackgroundAlpha(float alpha) { WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.alpha = alpha; getWindow().setAttributes(lp); }
PopupWindow監(jiān)聽點(diǎn)擊事件:監(jiān)聽我們PopupWindow里面控件的點(diǎn)擊事件
//設(shè)置PopupWindow的View點(diǎn)擊事件 setOnPopupViewClick(view); private void setOnPopupViewClick(View view) { TextView tv_pick_phone, tv_pick_zone, tv_cancel; tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone); tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone); tv_cancel = (TextView) view.findViewById(R.id.tv_cancel); tv_pick_phone.setOnClickListener(this); tv_pick_zone.setOnClickListener(this); tv_cancel.setOnClickListener(this); }
獲取NavigationBar的高度:這里需要適配有些手機(jī)沒有NavigationBar有些手機(jī)有,這里以存在NavigationBar來演示
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);
對存在NavigationBar的手機(jī)上,設(shè)置其PopupWindow的出現(xiàn)位置
//設(shè)置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
對沒有NavigationBar的手機(jī)上,設(shè)置其PopupWindow的出現(xiàn)位置
//設(shè)置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);
源碼
Github:https://github.com/AndroidHensen/IOSPopupWindow
public class MainActivity extends AppCompatActivity implements View.OnClickListener, PopupWindow.OnDismissListener { private Button bt_open; private PopupWindow popupWindow; private int navigationHeight; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); bt_open = (Button) findViewById(R.id.bt_open); bt_open.setOnClickListener(this); int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android"); navigationHeight = getResources().getDimensionPixelSize(resourceId); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.bt_open: openPopupWindow(v); break; case R.id.tv_pick_phone: Toast.makeText(this, "從手機(jī)相冊選擇", Toast.LENGTH_SHORT).show(); popupWindow.dismiss(); break; case R.id.tv_pick_zone: Toast.makeText(this, "從空間相冊選擇", Toast.LENGTH_SHORT).show(); popupWindow.dismiss(); break; case R.id.tv_cancel: popupWindow.dismiss(); break; } } private void openPopupWindow(View v) { //防止重復(fù)按按鈕 if (popupWindow != null && popupWindow.isShowing()) { return; } //設(shè)置PopupWindow的View View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null); popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT); //設(shè)置背景,這個(gè)沒什么效果,不添加會報(bào)錯(cuò) popupWindow.setBackgroundDrawable(new BitmapDrawable()); //設(shè)置點(diǎn)擊彈窗外隱藏自身 popupWindow.setFocusable(true); popupWindow.setOutsideTouchable(true); //設(shè)置動畫 popupWindow.setAnimationStyle(R.style.PopupWindow); //設(shè)置位置 popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight); //設(shè)置消失監(jiān)聽 popupWindow.setOnDismissListener(this); //設(shè)置PopupWindow的View點(diǎn)擊事件 setOnPopupViewClick(view); //設(shè)置背景色 setBackgroundAlpha(0.5f); } private void setOnPopupViewClick(View view) { TextView tv_pick_phone, tv_pick_zone, tv_cancel; tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone); tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone); tv_cancel = (TextView) view.findViewById(R.id.tv_cancel); tv_pick_phone.setOnClickListener(this); tv_pick_zone.setOnClickListener(this); tv_cancel.setOnClickListener(this); } //設(shè)置屏幕背景透明效果 public void setBackgroundAlpha(float alpha) { WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.alpha = alpha; getWindow().setAttributes(lp); } @Override public void onDismiss() { setBackgroundAlpha(1); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android開發(fā)之PopupWindow實(shí)現(xiàn)彈窗效果
- Android彈窗ListPopupWindow的簡單應(yīng)用詳解
- Android使用 PopupWindow 實(shí)現(xiàn)底部彈窗功能
- Android PopupWindow實(shí)現(xiàn)左側(cè)彈窗效果
- Android開發(fā)實(shí)現(xiàn)popupWindow彈出窗口自定義布局與位置控制方法
- Android Popupwindow彈出窗口的簡單使用方法
- Android編程實(shí)現(xiàn)的自定義彈窗(PopupWindow)功能示例
- Android自定義彈出窗口PopupWindow使用技巧
- android PopupWindow 和 Activity彈出窗口實(shí)現(xiàn)方式
- Android中PopupWindow彈出式窗口使用方法詳解
相關(guān)文章
Android 添加系統(tǒng)設(shè)置屬性的實(shí)現(xiàn)及步驟
這篇文章主要介紹了Android 添加系統(tǒng)設(shè)置屬性的實(shí)現(xiàn)及步驟的相關(guān)資料,需要的朋友可以參考下2017-07-07Android ViewPager中顯示圖片與播放視頻的填坑記錄
這篇文章主要給介紹了關(guān)于Android ViewPager中顯示圖片與播放視頻的一些填坑記錄,文中通過示例代碼介紹的非常詳細(xì),對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-05-05Android學(xué)習(xí)筆記——Menu介紹(二)
這次將繼續(xù)上一篇文章沒有講完的Menu的學(xué)習(xí),上下文菜單(Context menu)和彈出菜單(Popup menu)2014-10-10Android中Activity的四種啟動模式和onNewIntent()
android 中activity的啟動模式分為四種,(standard、singleTop、singTask、singleInstance),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08