hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框:
我们可以来看下这个弹框有哪些显示:
所以我们先考虑这个弹框的布局就需要:
因为中间的菜单是一个列表,所以根据这个图我们可以想到我们所要写的弹框的布局大致为:
<LinearLayout>
<LinearLayout>
<TextView/> <!--标题-->
<RecyclerView/> <!--菜单列表(或者ListView)-->
</LinearLayout>
<Button/> <!--取消按钮-->
</LinearLayout>复制代码
我们已经规划好了弹框的布局,现在我们要开始实现弹框了。
因为后来谷歌推荐使用的是DialogFragment,所以我们此处弹框也是使用DialogFragment。
我们一步步来看如何使用DialogFragment来实现我们想要的弹框:
我们按照上面的布局写了具体的弹框布局代码 fragment_ios_dialog.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tool="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@android:color/transparent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/circle_bg"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="标题内容" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#bbbbbb" />
<ListView
android:id="@+id/lv_menu"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="200dp" />
</LinearLayout>
<Button
android:id="@+id/btn_cancle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@drawable/circle_bg"
android:text="取消"
/>
</LinearLayout>复制代码
再继承DialogFragment来实现我们的IOSDialogFragment: IOSDialogFragment.java:
public class IOSDialogFragment extends DialogFragment {
private View rootView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
rootView = inflater.inflate(R.layout.fragment_ios_dialog, container, false);
return rootView;
}
}复制代码
我们就是单纯的引入我们写的布局,不做其他处理,我们运行后发现界面效果如下图所示:
我们针对这二个先做处理:
我们可以看到标题头了。所以我们要去掉上面一块区域,只需要把弹框默认的标题头给去掉即可,只需要添加:getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);复制代码
经过上面二步的修改,我们可以看到了效果变成了这样:
那接下去如何让弹框变成在底部呢?????? 我们知道最后我们的View是在window下面的,我们只需要让window的Grivaty属性是Bottom,这样,里面的元素都是居于底部即可。
Window window = getDialog().getWindow();
WindowManager.LayoutParams layoutParams = window.getAttributes();
layoutParams.gravity = Gravity.BOTTOM;
window.setAttributes(layoutParams);复制代码
我们再看下效果:
的确是在底部了,但是这时候可能有人会有疑问,我们这个自定义View的布局fragment_ios_dialog.xml里面,明明layout_width
是match_parent
,可是左右二边是间隙的,
这时候比如我想要按照自己的项目要求调整二边的间隙岂不是单纯的在自己的fragment_ios_dialog.xml
就无法实现了。
我们就来看看到底是为什么二边有间隙,然后再来看如何自己处理:
我们知道我们的View都是被包含在window
里面,虽然我们的自己的View的宽度已经设置成了match_parent
,但是我们并没有对window
设置宽度为最大。所以我们先来改变window
的宽度。
改变window的宽度:
Window window = getDialog().getWindow();
WindowManager.LayoutParams layoutParams = window.getAttributes();
layoutParams.gravity = Gravity.BOTTOM;
layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
window.setAttributes(layoutParams);复制代码
我们在前面修改弹框位置的代码处,多添加一句:
layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;复制代码
我们发现,果然二边的间隙变小了很多。但是还是有间隙,既然我们都已经把window
的宽度变为match_parent
,还是没填充,说明应该是有padding
值。那我们马上就想到了,难道是DecorView
里面有padding
值。毕竟我们的View也是被包含在DecorView
里面。废话不多说,我们马上实验:
decorView.setPadding(0,0,0,0);复制代码
然后我们再看效果,果不其然:
PS:这里还有另外一种方法,不写这句decorView.setPadding(0,0,0,0);而是直接设置window的背景颜色,window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));源码中其实也给DecorView设置了padding值。所以效果相同。
我们看过ios的弹框效果,是从底部从下而上升起,然后消失的时候也是从上而下消失。所以消失的时候我们不能单纯的让DialogFragment
执行dismiss()
,而是先让弹框执行下移的动画效果,然后再dismiss()
。
既然谈到了上下的移动,大家肯定马上想到了用TranslateAnimation
动画来做,我们就一步步来看如何用这个来实现:
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
也就是从坐标(fromXDelta,fromYDelta)
到(toXDelta,toYDelta)
。
我们可以点进去这个构造函数查看:
public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) { mFromXValue = fromXDelta; mToXValue = toXDelta; mFromYValue = fromYDelta; mToYValue = toYDelta; mFromXType = ABSOLUTE; mToXType = ABSOLUTE; mFromYType = ABSOLUTE; mToYType = ABSOLUTE; }复制代码
之所以我们以前用的只传了四个参数,是因为他给我们把另外四个参数以及赋了默认值,也就是ABSOLUTE
。我们继续看有哪几种可以选择:
/** * The specified dimension is an absolute number of pixels. */ public static final int ABSOLUTE = 0; /** * The specified dimension holds a float and should be multiplied by the * height or width of the object being animated. */ public static final int RELATIVE_TO_SELF = 1; /** * The specified dimension holds a float and should be multiplied by the * height or width of the parent of the object being animated. */ public static final int RELATIVE_TO_PARENT = 2;复制代码
通过字面意思我们也能理解:
ABSOLUTE
是绝对坐标,RELATIVE_TO_SELF
是相对于自身,RELATIVE_TO_PARENT
是相对于父View。
而我们只需要我们的弹框显示的位置,让的起始位置如下图所示:
刚开始超过屏幕,并且高度为弹框自身的高度,然后再回到原始位置,所以我们就用: Animation slide = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f );复制代码 从原来的位置,增加了自身高度的距离为起始点,开始移动,然后再回到原来的位置。
所以我们的动画的代码总结下就是:
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
rootView = inflater.inflate(R.layout.fragment_ios_dialog, container, false);
slideToUp(rootView);
return rootView;
}
public void slideToUp(View view){
Animation slide = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF,1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
slide.setDuration(400);
slide.setFillEnabled(true);
slide.setFillAfter(true);
view.startAnimation(slide);
}
public void slideToDown(View view){
Animation slide = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
slide.setDuration(400);
slide.setFillEnabled(true);
slide.setFillAfter(true);
view.startAnimation(slide);
slide.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
IOSDialogFragment.this.dismiss();//弹框消失
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}复制代码
相关的点击事件就很简单了。只需要在onViewCreated中,通过findViewByid获取View实例,然后设置点击事件即可。
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
TextView titleView = (TextView) view.findViewById(R.id.tv_title);
titleView.setText("标题内容");
ListView listView = (ListView) view.findViewById(R.id.lv_menu);
listView.setAdapter(new ArrayAdapter(getActivity(),R.layout.menu_item,R.id.item_text,items));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//点击执行相关的事件
......
......
}
});
Button cancel = (Button) view.findViewById(R.id.cancel);
cancel.setText(mCancel);
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//执行相关事件
........
}
});
}复制代码
比如上面的cancel点击事件执行的肯定是弹框向下移动的动画。所以我们可以自己写个方法:
private boolean isAnimation = false;//用来判断是否多次点击。防止多次执行
private void dialogfinish(){
if (isAnimation) {
return;
}
isAnimation = true;
slideToDown(rootView);
}
public void slideToDown(View view){
.....
.....
slide.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {}
@Override
public void onAnimationEnd(Animation animation) {
isAnimation = false;//用来判断是否多次点击。防止多次执行
IOSDialogFragment.this.dismiss();//弹框消失
}
@Override
public void onAnimationRepeat(Animation animation) {}
});
}
}复制代码
又或者不想再加新的方法,也可以直接复写dismiss
方法:
private boolean isAnimation = false;//用来判断是否多次点击。防止多次执行
@Override
public void dismiss() {
if (isAnimation) {
return;
}
isAnimation = true;
slideToDown(rootView)
}
//然后再更换IOSDialogFragment.this.dismiss() -> IOSDialogFragment.super.dismiss()
public void slideToDown(View view){
.....
.....
slide.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {}
@Override
public void onAnimationEnd(Animation animation) {
isAnimation = false;//用来判断是否多次点击。防止多次执行
IOSDialogFragment.super.dismiss();//弹框消失
}
@Override
public void onAnimationRepeat(Animation animation) {}
});
}
}复制代码
当点击上方一些空白处,我们会发现我们的弹框会直接消失,而不会像我们上面点击<取消>按钮点击事件那样,弹框先往下移动再消失,因为DialogFragment默认点击弹框外的时候,会直接dismiss,而不走我们的方法:
我们可以这么解决,直接对DecorView设置onTouchListener:
window.getDecorView().setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
//弹框消失的动画执行相关代码
....
....
}
return true;
}
});复制代码
这样就会执行我们自己写的弹框消失的相关事件的了。
希望大家不要喷我,哈哈。如果哪里写错了。可以下面评论回复,谢谢大家了。O(∩_∩)O~
最后附上Demo