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、工程结构

技术分享


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。