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

产品经理用的是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的公共方法就行.

效果图如下:

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

/**
 *
 * @author ansen
 * @create time 2015-10-20
 */
public class ViewTestActivity extends Activity implements OnGlobalLayoutListener{
	private TipTextView tvTips;//提示
	private TextView tvTitle;//标题

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_test);

		tvTips=(TipTextView) findViewById(R.id.tv_tips);
		tvTitle=(TextView) findViewById(R.id.tv_title);

		//tvTitle在一个视图树中的焦点状态发生改变时，注册回调接口来获取标题栏的高度
		ViewTreeObserver vto = tvTitle.getViewTreeObserver();
		vto.addOnGlobalLayoutListener(this);

		findViewById(R.id.btn_show_tip).setOnClickListener(clickListener);
	}

	private OnClickListener clickListener=new OnClickListener() {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.btn_show_tip://显示提示
				tvTips.showTips();
				break;
			}
		}
	};

	@SuppressLint("NewApi")
	@Override
	public void onGlobalLayout() {
		tvTitle.getViewTreeObserver().removeOnGlobalLayoutListener(this);//删除监听
		tvTips.setTitleHeight(tvTitle.getHeight());//把标题栏的高度赋值给自定义的TextView
	}
}

activity_test.xml  显示的布局文件

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

    <View
        android:layout_above="@+id/btn_show_tip"
        android:layout_below="@+id/tv_title"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="#00FFFF"/>

    <com.example.tips.view.TipTextView
        android:id="@+id/tv_tips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#faf3a1"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:textColor="#ff4e00"
        android:text="用动画实现提示"
        android:visibility="gone"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="这是一个标题栏"
        android:background="#FF00FF"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/btn_show_tip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="弹窗提示!!!"/>

</RelativeLayout>

TipTextView.java  自定义View,继承TextView

/**
 * 自定义TextView  显示提示信息,显示时有动画效果(从上面弹出,然后改变透明度慢慢隐藏)
 * @author ansen
 * @create time 2015-10-20
 */
public class TipTextView extends TextView{
	private static final int START_TIME=400;//动画显示时间
	private static final int END_TIME=400;//动画移出时间
	private static final int SHOW_TIME=1000;//动画显示时间

	private int titleHeight=100;//标题栏默认的高度设置成100

	public TipTextView(Context context) {
		super(context);
	}

	public TipTextView(Context context, AttributeSet paramAttributeSet) {
		super(context, paramAttributeSet);
	}

	public TipTextView(Context context, AttributeSet paramAttributeSet,int paramInt) {
		super(context, paramAttributeSet, paramInt);
	}

	public void showTips(){
		setVisibility(View.VISIBLE);

		//向下移动动画
		TranslateAnimation downTranslateAnimation=new TranslateAnimation(0,0,0,titleHeight);
		downTranslateAnimation.setDuration(START_TIME);
		downTranslateAnimation.setFillAfter(true);

		startAnimation(downTranslateAnimation);

		//动画监听
		downTranslateAnimation.setAnimationListener(new AnimationListener() {
			@Override
			public void onAnimationStart(Animation animation) {}
			@Override
			public void onAnimationEnd(Animation animation){//向下移动动画结束
				topTranslateAnimation();
			}
			@Override
			public void onAnimationRepeat(Animation animation) {}
		});
	}

	private void topTranslateAnimation(){
		new Handler().postDelayed(new Runnable() {//延时1秒之后再向上移动
			@Override
			public void run(){

				//向上移动动画
				TranslateAnimation topTranslateAnimation=new TranslateAnimation(0,0,titleHeight,0);
				topTranslateAnimation.setDuration(END_TIME);
				topTranslateAnimation.setFillAfter(true);

				//改变透明度
				AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);
				alphaAnimation.setDuration(END_TIME);

				//两个动画添加到动画集合中
				AnimationSet animationSet=new AnimationSet(true);
				animationSet.addAnimation(topTranslateAnimation);
				animationSet.addAnimation(alphaAnimation);

				startAnimation(animationSet);//开启动画

				animationSet.setAnimationListener(new AnimationListener() {
					@Override
					public void onAnimationStart(Animation animation) {}
					@Override
					public void onAnimationRepeat(Animation animation) {}
					@Override
					public void onAnimationEnd(Animation animation){//动画结束隐藏提示的TextView
						setVisibility(View.GONE);
					}
				});
			}
		},SHOW_TIME);
	}

	/**
	 * 设置标题栏高度
	 * @param titleHeight
	 */
	public void setTitleHeight(int titleHeight) {
		this.titleHeight = titleHeight;
	}
}

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

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

点击下载源码