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

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

效果图如下:

下面上代码:

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-12-5
     */
    public void closeContent() {
        if (isOpen) {
            traslateY(0, mScreenHeight);
            mViewGroup.setBackgroundColor(Color.TRANSPARENT);
            isOpen = false;
        }
    }

    /**
     * 打开
     *
     * @description
     * @date 2014-12-5
     */
    public void openContent() {
        if (!isOpen) {
            setVisible(true);
            mViewGroup.setBackgroundColor(Color.argb(66, 0, 0, 0));
            traslateY(mScreenHeight, 0);
            isOpen = true;
        }
    }

    /**
     * 实现滑动动画
     *
     * @description
     * @date 2014-12-5
     * @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-12-5
     */
    public void toggle() {
        if (isOpen) {
            closeContent();
        }
        else {
            openContent();
        }
    }

    /** 弹出框是否弹出 */
    public boolean isOpen() {
        return isOpen;
    }

    /**
     *
     * @description
     * @date 2014-12-5
     * @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-8"?>
<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、工程结构

时间: 2024-10-31 01:30:12

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

自定义jQuery浮动弹出框插件

自定义浮动弹出框使用说明 1. jquery.alert.js源代码如下: (function($){ var defaults = { width : 350, //浮动弹出框宽度 height : 200, //浮动弹出框高度 minWidth : 350, //浮动弹出框最小宽度 minHeight : 200, //浮动弹出框最小高度 fontFamily : "微软雅黑",//浮动弹出框内文字字体 fontSize : "12px",//浮动弹出框内文字大

拖动弹出框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖动弹出框</title> <style> .top_box{ font-weight:bold;">#6796cc; height:30px; line-height: 30px; color: #fff; padding-left

Android自定义控件:可复用的Dialog弹出框

最近帮工作室改一个项目,需求是制作许多单选.多选的Dialog弹出框,我感觉有许多代码都是可重用的,就写了个可重用的Dialog类,废话不多说,先看图: 由于一些和谐的原因,实际效果肯定是比这个好看的,这里基本上都是原生属性修改--简单讲一下设计思路吧: 为什么选择自定义DIalog子类而不是AlertDialog子类(或者其他)? Dialog子类是诸如AlertDialog子类等的父类,其可自定义范围更广(因为被设计的子类属性.方法等更少,同时又具备必要的属性和方法),其次就是,有些子类的设

android继承Dialog实现自定义对话框

有时需要自定义对话框,可以使用AlterDialog.Bulider,比如下面的代码片段 1 new AlertDialog.Builder(self) 2 3 .setTitle("标题") 4 5 .setMessage("简单消息框") 6 7 .setPositiveButton("确定", null) 8 9 .show(); 上面的代码片段来自:http://blog.csdn.net/chenlei1889/article/deta

Android 让EditText失去焦点避免自动弹出输入法

如果一进去activity,EditText就获取焦点,弹出输入法界面,无疑是很影响美观的.关于让EditText失去焦点,网上比较多的做法是添加一个visibility=gone的Textview.然后让这个textView获取焦点.不知道是我人品不好还是怎么的.我这样做不行,后来采用另外一种做法,就是在其父组件(布局)上添加以下两句代码: android:focusable="true" android:focusableInTouchMode="true" 比

android 启动程序软键盘不自动弹出

解决方法 一:在frament 的onceate方法里面这么写 getActivity().getWindow().setSoftInputMode( WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 二:在Activity   的onceate方法里面这么写 getWindow().setSoftInputMode( WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 自己总结 希望能

模拟按下鼠标拖动弹出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

禁止进入activity自动弹出键盘

禁止进入activity自动弹出键盘 在Manifest.xml中设定activity的属性 android:windowSoftInputMode="stateHidden|stateUnchanged" 附相关属性: "stateUnspecified" 软键盘的状态(是否它是隐藏或可见)没有被指定.系统将选择一个合适的状态或依赖于主题的设置.这个是为了软件盘行为默认的设置. "stateUnchanged" 软键盘被保持无论它上次是什么状态

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了. 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教. var PopDialogDefaultConfig = { hasCover: true, //是否带遮罩层 colorOfCover: "#000", //遮罩层颜色 transparencyOfCover: 80, //遮罩层透明度(alpha值,opacity值通过换算得到) bo