android标题栏下面弹出提示框(一) TextView实现,带动画效果

2022-01-29 00:14:03

产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习。

弯路:

1.刚开始本来用PopupWindow去实现,做着之后发现如果用popupwindow实现的话,从标题栏下面弹出就比较麻烦.

2.最外层的布局本来是用LinearLayout去实现的,然后标题栏跟弹出的那个TextView外边包裹一层RelativeLayout,这样就会有一个问题,父布局RelativeLayout高度就是标题栏高度,提示框的高度最多也是标题栏高度,就算往下移动我们也看不到.

3.最外层布局改成RelativeLayout之后显示循序也是有秩序的,第一个是内容View,第二个是提示的View,第三个是标题栏的View.   android绘制View的原理就是最新画上去的一定在最上面,我们要保证标题栏始终显示,提示框可以遮住内容,内容是最后面的,所以需要第一个绘制。

实现步骤:

1.把显示提示View封装成自定义控件,继承自TextView.提供两个公共方法供外部调用.封装View的目的是代码复用,如果在其他地方也需要这种显示效果,在布局文件中引用自定义

    View即可

   1).showTips  显示提示View,调用向下移动动画,移动完成后延时一秒,再向上移动,并且改变透明度,动画结束后隐藏View。

   2).setTitleHeight  看名字就知道设置标题栏的高度,因为我们这边是从标题栏下面弹出,所以我们得计算标题栏的高度是多少,才能知道往下面移动多少合适.移动上去同理.

2.Activity中显示自定义View.调用自定义View的公共方法.

   1).在activity中注册回调接口来获取标题栏的高度,然后赋值给自定义View,

   2).当我们需要提示的时候调用自定View的公共方法就行.

效果图如下:

android标题栏下面弹出提示框(一) TextView实现,带动画效果

ViewTestActivity.java     主Activity,程序的入口.

  1. /** 
  2.  *  
  3.  * @author ansen 
  4.  * @create time 2015-10-20 
  5.  */  
  6. public class ViewTestActivity extends Activity implements OnGlobalLayoutListener{  
  7.     private TipTextView tvTips;//提示  
  8.     private TextView tvTitle;//标题  
  9.       
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.activity_test);  
  14.           
  15.         tvTips=(TipTextView) findViewById(R.id.tv_tips);  
  16.         tvTitle=(TextView) findViewById(R.id.tv_title);  
  17.           
  18.         //tvTitle在一个视图树中的焦点状态发生改变时，注册回调接口来获取标题栏的高度  
  19.         ViewTreeObserver vto = tvTitle.getViewTreeObserver();     
  20.         vto.addOnGlobalLayoutListener(this);  
  21.           
  22.         findViewById(R.id.btn_show_tip).setOnClickListener(clickListener);  
  23.     }  
  24.       
  25.     private OnClickListener clickListener=new OnClickListener() {  
  26.         @Override  
  27.         public void onClick(View v) {  
  28.             switch (v.getId()) {  
  29.             case R.id.btn_show_tip://显示提示  
  30.                 tvTips.showTips();  
  31.                 break;  
  32.             }  
  33.         }  
  34.     };  
  35.       
  36.     @SuppressLint("NewApi")  
  37.     @Override  
  38.     public void onGlobalLayout() {  
  39.         tvTitle.getViewTreeObserver().removeOnGlobalLayoutListener(this);//删除监听  
  40.         tvTips.setTitleHeight(tvTitle.getHeight());//把标题栏的高度赋值给自定义的TextView  
  41.     }  
  42. }  

activity_test.xml  显示的布局文件

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.       
  7.     <View   
  8.         android:layout_above="@+id/btn_show_tip"  
  9.         android:layout_below="@+id/tv_title"  
  10.         android:layout_height="match_parent"  
  11.         android:layout_width="match_parent"  
  12.         android:background="#00FFFF"/>  
  13.   
  14.     <com.example.tips.view.TipTextView  
  15.         android:id="@+id/tv_tips"  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="wrap_content"  
  18.         android:background="#faf3a1"  
  19.         android:gravity="center"  
  20.         android:paddingBottom="5dp"  
  21.         android:paddingTop="5dp"  
  22.         android:textColor="#ff4e00"  
  23.         android:text="用动画实现提示"  
  24.         android:visibility="gone"/>  
  25.   
  26.     <TextView  
  27.         android:id="@+id/tv_title"  
  28.         android:layout_width="match_parent"  
  29.         android:layout_height="40dp"  
  30.         android:gravity="center"  
  31.         android:text="这是一个标题栏"  
  32.         android:background="#FF00FF"  
  33.         android:textSize="18sp"/>  
  34.       
  35.     <Button  
  36.         android:id="@+id/btn_show_tip"  
  37.         android:layout_width="match_parent"  
  38.         android:layout_height="wrap_content"  
  39.         android:layout_alignParentBottom="true"  
  40.         android:text="弹窗提示!!!"/>  
  41.   
  42. </RelativeLayout>  
TipTextView.java  自定义View,继承TextView

  1. /** 
  2.  * 自定义TextView  显示提示信息,显示时有动画效果(从上面弹出,然后改变透明度慢慢隐藏) 
  3.  * @author ansen 
  4.  * @create time 2015-10-20 
  5.  */  
  6. public class TipTextView extends TextView{  
  7.     private static final int START_TIME=400;//动画显示时间  
  8.     private static final int END_TIME=400;//动画移出时间  
  9.     private static final int SHOW_TIME=1000;//动画显示时间  
  10.       
  11.     private int titleHeight=100;//标题栏默认的高度设置成100  
  12.   
  13.     public TipTextView(Context context) {  
  14.         super(context);  
  15.     }  
  16.       
  17.     public TipTextView(Context context, AttributeSet paramAttributeSet) {  
  18.         super(context, paramAttributeSet);  
  19.     }  
  20.   
  21.     public TipTextView(Context context, AttributeSet paramAttributeSet,int paramInt) {  
  22.         super(context, paramAttributeSet, paramInt);  
  23.     }  
  24.       
  25.     public void showTips(){  
  26.         setVisibility(View.VISIBLE);  
  27.           
  28.         //向下移动动画  
  29.         TranslateAnimation downTranslateAnimation=new TranslateAnimation(0,0,0,titleHeight);  
  30.         downTranslateAnimation.setDuration(START_TIME);  
  31.         downTranslateAnimation.setFillAfter(true);  
  32.           
  33.         startAnimation(downTranslateAnimation);  
  34.           
  35.         //动画监听  
  36.         downTranslateAnimation.setAnimationListener(new AnimationListener() {  
  37.             @Override  
  38.             public void onAnimationStart(Animation animation) {}  
  39.             @Override  
  40.             public void onAnimationEnd(Animation animation){//向下移动动画结束  
  41.                 topTranslateAnimation();  
  42.             }  
  43.             @Override  
  44.             public void onAnimationRepeat(Animation animation) {}  
  45.         });  
  46.     }  
  47.       
  48.     private void topTranslateAnimation(){  
  49.         new Handler().postDelayed(new Runnable() {//延时1秒之后再向上移动  
  50.             @Override  
  51.             public void run(){  
  52.                   
  53.                 //向上移动动画  
  54.                 TranslateAnimation topTranslateAnimation=new TranslateAnimation(0,0,titleHeight,0);  
  55.                 topTranslateAnimation.setDuration(END_TIME);  
  56.                 topTranslateAnimation.setFillAfter(true);  
  57.                   
  58.                 //改变透明度  
  59.                 AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);  
  60.                 alphaAnimation.setDuration(END_TIME);  
  61.                   
  62.                 //两个动画添加到动画集合中  
  63.                 AnimationSet animationSet=new AnimationSet(true);  
  64.                 animationSet.addAnimation(topTranslateAnimation);  
  65.                 animationSet.addAnimation(alphaAnimation);  
  66.                   
  67.                 startAnimation(animationSet);//开启动画  
  68.                   
  69.                 animationSet.setAnimationListener(new AnimationListener() {  
  70.                     @Override  
  71.                     public void onAnimationStart(Animation animation) {}  
  72.                     @Override  
  73.                     public void onAnimationRepeat(Animation animation) {}  
  74.                     @Override  
  75.                     public void onAnimationEnd(Animation animation){//动画结束隐藏提示的TextView  
  76.                         setVisibility(View.GONE);  
  77.                     }  
  78.                 });  
  79.             }  
  80.         },SHOW_TIME);  
  81.     }  
  82.   
  83.     /** 
  84.      * 设置标题栏高度 
  85.      * @param titleHeight 
  86.      */  
  87.     public void setTitleHeight(int titleHeight) {  
  88.         this.titleHeight = titleHeight;  
  89.     }  
  90. }  

这篇就用TextView实现了,如果你所有的activity都需要加上这个提示,请阅读我的的下篇博客.android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

以上有步骤说明,效果图,源码,相信大家都能看懂....推荐下自己创建的android QQ群:202928390   欢迎大家的加入.

点击下载源码

上一篇：android app反编译


下一篇：带你实现开发者头条APP(四)---首页优化(加入design包)