Android UI之底部彈框的學習與總結
阿新 • • 發佈:2018-12-15
1、簡介
本文將介紹的是從底部彈出窗體以供使用者進行互動的例子,本文將介紹使用Dialog,View和DialogFragment的方式分別來進行實現。也是仿製了58同城的彈出喜好的UI顯示和互動。彈出框真的是很常見的,在安卓中有廣泛的用途,故而有必要對其進行好好的梳理,後面使用起來也能夠得心應手。
2、和前面一樣也是先看效果吧
2.1 Dialog形式
註釋寫的還是很清晰的,如下。
private void showPurchaseView() { // 以特定的風格建立一個dialog Dialog dialog = new Dialog(this,R.style.MyDialog); // 載入dialog佈局view View purchase = LayoutInflater.from(this).inflate(R.layout.dialog_purchase, null); // 設定外部點選 取消dialog dialog.setCancelable(true); // 獲得窗體物件 Window window = dialog.getWindow(); // 設定窗體的對齊方式 window.setGravity(Gravity.BOTTOM); // 設定窗體動畫 window.setWindowAnimations(R.style.AnimBottom); // 設定窗體的padding window.getDecorView().setPadding(0, 0, 0, 0); WindowManager.LayoutParams lp = window.getAttributes(); lp.width = WindowManager.LayoutParams.MATCH_PARENT; lp.height = WindowManager.LayoutParams.WRAP_CONTENT; window.setAttributes(lp); dialog.setContentView(purchase); dialog.show(); }
下面給出style的設定。
<!-- 設定 彈出彈入的動畫 由下往上 然後再返回去--> <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> <!--底部彈框 樣式--> <style name="MyDialog" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowIsFloating">true</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowNoTitle">true</item> <item name="android:background">@android:color/transparent</item> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:backgroundDimEnabled">true</item> <item name="android:backgroundDimAmount">0.6</item> </style>
R.layout.dialog_purchase.xml
其實這裡還是挺重要的:
1. 得為佈局設定白色背景 否則為dialog背景色
2. 這種錯落的效果 是使用的 clipChildren = "false" 屬性,需要去了解
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:orientation="vertical" android:clipChildren="false" android:layout_height="wrap_content"> <!-- 該佈局承載著 超出父佈局的控制元件的部分的顯示--> <View android:layout_width="match_parent" android:layout_height="40dp"/> <LinearLayout android:background="#fff" android:id="@+id/rl_1" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="128dp"> <android.support.v7.widget.CardView android:id="@+id/cd" android:layout_gravity="bottom" android:layout_marginLeft="10dp" android:foreground="?android:attr/selectableItemBackground" android:layout_width="120dp" android:layout_height="150dp" card_view:cardBackgroundColor="#FFFFFF" card_view:cardCornerRadius="4dp" card_view:cardElevation="2dp" card_view:cardUseCompatPadding="true"> <ImageView android:src="@drawable/shop" android:scaleType="fitXY" android:layout_width="120dp" android:layout_height="match_parent"/> </android.support.v7.widget.CardView> <LinearLayout android:layout_marginTop="30dp" android:layout_marginLeft="5dp" android:orientation="vertical" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"> <TextView android:text="¥109" android:textColor="#f00" android:textSize="22sp" android:id="@+id/tv_pay_deserve" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <LinearLayout android:layout_marginTop="10dp" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/tv_des" android:textColor="#C000" android:textSize="14sp" android:text="對商品的簡要的描述:這件商品好好啊,歡迎來購買" android:lines="2" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/iv_back" android:padding="10dp" android:layout_alignParentRight="true" android:src="@mipmap/buy_delete" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <View android:background="#fff" android:layout_width="match_parent" android:layout_height="100dp"/> <LinearLayout android:background="#fff" android:layout_width="match_parent" android:layout_height="45dp"> <Button android:id="@+id/add_cart_btn" android:layout_weight="1.0" android:layout_width="0dip" android:layout_height="match_parent" android:text="加入購物車" android:textColor="#fff" android:background="@drawable/button_yellow_selector" android:layout_alignParentLeft="true" /> <Button android:id="@+id/buy_btn" android:layout_weight="1.0" android:layout_width="0dip" android:layout_height="match_parent" android:text="立即購買" android:textColor="#fff" android:background="@drawable/button_selector" android:layout_alignParentRight="true" /> </LinearLayout> </LinearLayout>
2.2 DialogFragment形式
主要是建立一個Java類,然後繼承自DialogFragment方法即可,下面給出部分程式碼
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// 使用不帶Theme的構造器, 獲得的dialog邊框距離螢幕仍有幾毫米的縫隙。
Dialog dialog = new Dialog(getActivity(), R.style.MyDialog);
mContext = getActivity();
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 設定Content前設定
dialog.setContentView(R.layout.fragment_dialog_show_enjoy);
dialog.setCanceledOnTouchOutside(true); // 外部點選取消
// 設定寬度為屏寬, 靠近螢幕底部。
final Window window = dialog.getWindow();
window.setWindowAnimations(R.style.AnimBottom);
final WindowManager.LayoutParams lp = window.getAttributes();
lp.gravity = Gravity.BOTTOM; // 緊貼底部
lp.width = WindowManager.LayoutParams.MATCH_PARENT; // 寬度持平
lp.height = getActivity().getWindowManager().getDefaultDisplay().getHeight() * 2/ 3;
window.setAttributes(lp);
getDataFromBefore();
initView(dialog);
// 視窗初始化後 請求網路資料
return dialog;
}
如何從一個活動跳轉向DialogFragment且傳值呢
ShowEnjoyDialogFragment showEnjoyDialogFragment = new ShowEnjoyDialogFragment();
Bundle bundle = new Bundle();
// bundle.putStringArrayList(AppConst.HOBBY_KEY_ENJOY, mHobbyStrList);
showEnjoyDialogFragment.setArguments(bundle);
showEnjoyDialogFragment.show(getFragmentManager(), "showEnjoyDialogFragment");
2.3普通的View形式
這裡的思想主要是通過佈局的顯示與隱藏加上動畫來實現特定的效果
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.windowshowdemo.MainActivity">
<!-- 內容佈局 -->
<LinearLayout
android:fitsSystemWindows="true"
android:background="@color/colorPrimary"
android:id="@+id/llContent"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="@layout/toolbar"/>
<LinearLayout
android:background="#fff"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Dialog形式"
android:id="@+id/btnDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="DialogFragment形式"
android:id="@+id/btnDgFm"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="普通佈局形式"
android:id="@+id/normalShow"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tvAddress"
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
android:text="區域"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="喜好"
android:id="@+id/tvHobby"
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="選擇"
android:id="@+id/tvChoose"
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<!-- 彈出框佈局 上部分為灰色-->
<RelativeLayout
android:id="@+id/rlMenu"
android:background="#32000000"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ScrollView
android:id="@+id/svMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_alignParentBottom="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tvSaveToPhone"
android:textSize="16sp"
android:gravity="center_vertical"
android:text="儲存到手機"
android:textColor="#7e7e7e"
android:layout_marginLeft="20dp"
android:layout_width="match_parent"
android:layout_height="51dp" />
<TextView
android:id="@+id/openQrcode"
android:textSize="16sp"
android:gravity="center_vertical"
android:text="開啟二維碼"
android:textColor="#7e7e7e"
android:layout_marginLeft="20dp"
android:layout_width="match_parent"
android:layout_height="51dp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
private void hideBottomMenu(){
TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
0, Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF,
0, Animation.RELATIVE_TO_SELF, 1);
ta.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
mRlMenu.setVisibility(View.GONE);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
ta.setDuration(200);
mSvMenu.startAnimation(ta);
}
總結:
好了,以上主要是起一個筆記的作用,希望對讀者有一定的幫助,寫的不對的地方請多多指教,謝謝