程序员人生 网站导航

Android:继承ScrollView实现自定义向上滚动弹出框(背景半透明)

栏目:综合技术时间:2015-01-28 08:42:47

现在常见的效果:点击按钮向上弹出框展现信息,弹出后背景变成半透明,并且支持手势滑动关闭弹出框。

效果图以下:






下面上代码:


1、核心类:自定义向上弹出框 VerticalScrollView.java

package app.popupbox.view; import android.app.Activity; import android.content.Context; import android.graphics.Color; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.TranslateAnimation; import android.widget.ScrollView; /** * @author */ public class VerticalScrollView extends ScrollView { /** 屏幕高度 */ private int mScreenHeight; private boolean isOpen = false; private boolean isFirst = true; private View mVwBackground; private ViewGroup mViewGroup; private ViewGroup mVwContent; public VerticalScrollView(Context context) { super(context); } public VerticalScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public VerticalScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } /* * (non-Javadoc) * @see android.widget.ScrollView#onMeasure(int, int) */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (isFirst) { mViewGroup = (ViewGroup) getChildAt(0); mVwBackground = mViewGroup.getChildAt(0); mVwContent = (ViewGroup) mViewGroup.getChildAt(1); mScreenHeight = getScreemH(); mVwBackground.getLayoutParams().height = mScreenHeight; mVwContent.getLayoutParams().height = mScreenHeight * 3 / 5; setVisible(false); isFirst = false; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /* * (non-Javadoc) * @see android.widget.ScrollView#onLayout(boolean, int, int, int, int) */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub super.onLayout(changed, l, t, r, b); if (changed) { this.smoothScrollTo(0, mScreenHeight); } } @Override public boolean onTouchEvent(MotionEvent ev) { int action = ev.getAction(); switch (action) { case MotionEvent.ACTION_UP: int i = getScrollY(); // 如果滑动距离大于屏幕的2/3,则弹出,这里可自定义 if (i > mScreenHeight * 2 / 3) { smoothScrollTo(0, mScreenHeight); isOpen = true; } else { traslateY(0, mScreenHeight); mViewGroup.setBackgroundColor(Color.TRANSPARENT); isOpen = false; } return true; } return super.onTouchEvent(ev); } /** * 关闭 * * @description * @date 2014⑴2⑸ */ public void closeContent() { if (isOpen) { traslateY(0, mScreenHeight); mViewGroup.setBackgroundColor(Color.TRANSPARENT); isOpen = false; } } /** * 打开 * * @description * @date 2014⑴2⑸ */ public void openContent() { if (!isOpen) { setVisible(true); mViewGroup.setBackgroundColor(Color.argb(66, 0, 0, 0)); traslateY(mScreenHeight, 0); isOpen = true; } } /** * 实现滑动动画 * * @description * @date 2014⑴2⑸ * @param oldt * @param t */ public void traslateY(int oldt, int t) { TranslateAnimation animation = new TranslateAnimation(0, 0, oldt, t); animation.setDuration(600); animation.setFillAfter(true); mVwContent.startAnimation(animation); animation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation animation) { // 滑动结束如果满足关闭条件 if (!isOpen) { setVisible(false); scrollTo(0, mScreenHeight); } } }); } /** * 调用该方法操作该弹出框 * * @description * @date 2014⑴2⑸ */ public void toggle() { if (isOpen) { closeContent(); } else { openContent(); } } /** 弹出框是不是弹出 */ public boolean isOpen() { return isOpen; } /** * * @description * @date 2014⑴2⑸ * @param visible */ public void setVisible(boolean visible) { if (visible) { mViewGroup.setVisibility(VISIBLE); this.setVisibility(VISIBLE); } else { mViewGroup.setVisibility(GONE); this.setVisibility(GONE); } } /** * 取得屏幕高度 * * @return int */ @SuppressWarnings("deprecation") private int getScreemH() { WindowManager wm = ((Activity) getContext()).getWindowManager(); return wm.getDefaultDisplay().getHeight(); } }

2、主布局:layout_pop_up_box_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/btn" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:text="点击弹出" /> <app.popupbox.view.VerticalScrollView android:id="@+id/verticalScrollView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@id/btn" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:scrollbars="none" > <LinearLayout android:id="@+id/dialog_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#66000000" android:orientation="vertical" > <View android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00000000" /> <include layout="@layout/dialog_view" /> </LinearLayout> </app.popupbox.view.VerticalScrollView> </RelativeLayout>

3、弹出框中布局:dialog_view.xml

<?xml version="1.0" encoding="utf⑻"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="300dp" android:background="@android:color/holo_blue_dark" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="弹出框" /> </RelativeLayout>


4、PopUpBoxMainActivity.java

package app.popupbox; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.Button; import app.popupbox.view.VerticalScrollView; public class PopUpBoxMainActivity extends Activity { private VerticalScrollView mVerticalScrollView; private Button mButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.layout_pop_up_box_main); initView(); } /** * 初始化控件 */ private void initView() { mVerticalScrollView = (VerticalScrollView) findViewById(R.id.verticalScrollView); mButton = (Button) findViewById(R.id.btn); mButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mVerticalScrollView.toggle(); updateView(); } }); } /** * 更新界面 */ private void updateView() { if (mVerticalScrollView.isOpen()) { mButton.setText("点击关闭"); } else { mButton.setText("点击弹出"); } } }


5、工程结构



------分隔线----------------------------
------分隔线----------------------------

最新技术推荐