Android实现从底部弹出页面以及显示与隐藏显示部分View

来源：互联网发布：知金网络教育编辑：程序博客网时间：2024/06/06 04:01

效果图（从底部弹出页面）

这里写图片描述

代码

从效果图上我们可以看到，当点击按钮时，启动了一个从底部出现的页面，直至占满整个屏幕，这种效果是怎么实现的，接下来就带大家来实现一下。
先看Java代码

public class HomeActivity extends AppCompatActivity {    private Dialog dialog;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_home);        Button btn = (Button) findViewById(R.id.btn);        btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                showPage();            }        });    }    public void showPage() {        dialog = new Dialog(this, R.style.ActionSheetDialogStyle);        //填充对话框的布局        View inflate = LayoutInflater.from(this).inflate(R.layout.dialog_layout, null);        Button btn = (Button) inflate.findViewById(R.id.btn);        btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //从dialog启动另外一个页面                startActivity(new Intent(getBaseContext(),ThirdActivity.class));                dialog.dismiss();            }        });        //将布局设置给Dialog        dialog.setContentView(inflate);        //获取当前Activity所在的窗体        Window dialogWindow = dialog.getWindow();        dialogWindow.setLayout(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);        dialog.show();//显示对话框    }}

这个页面我们用dialog实现，然后我们给它指定样式即可

//R.style.ActionSheetDialogStyle文件<style name="ActionSheetDialogStyle" parent="@android:style/Theme.Dialog">        <!-- 背景透明 -->        <item name="android:windowBackground">@android:color/transparent</item>        <item name="android:windowContentOverlay">@null</item>        <!-- 浮于Activity之上 -->        <item name="android:windowIsFloating">true</item>        <!-- 边框 -->        <item name="android:windowFrame">@null</item>        <!-- Dialog以外的区域模糊效果，这里我们设为false,是为了防止dialog出现导致页面变暗 -->        <item name="android:backgroundDimEnabled">false</item>        <!-- 无标题 -->        <item name="android:windowNoTitle">true</item>        <!-- 半透明 -->        <item name="android:windowIsTranslucent">true</item>        <!-- Dialog进入及退出动画 -->        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>    </style>    <!-- ActionSheet进出动画 -->    <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">        <item name="android:windowEnterAnimation">@anim/activity_open</item>        <item name="android:windowExitAnimation">@anim/activity_close</item>    </style>

接下来我们看看动画文件

//进入动画<translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="600"    android:fromYDelta="100%"    android:toYDelta="0" />

//退出动画<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="600"    android:fromYDelta="0"    android:toYDelta="100%" />

效果图(隐藏显示部分View)

这里写图片描述

代码

<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"    tools:context="com.example.test.HomeActivity">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        >    <Button        android:id="@+id/btn_show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="显示"        />        <Button            android:id="@+id/btn_hide"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="隐藏"            />    </LinearLayout>    <com.example.test.CustomView        android:id="@+id/customView"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:background="@drawable/distance_bg"        android:layout_margin="10dp"        >    </com.example.test.CustomView></RelativeLayout>

CustomView是自定义的一个View,这里写的比较简单

public class CustomView extends LinearLayout {    public CustomView(Context context) {        this(context,null);    }    public CustomView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        initView();    }    public void initView() {        View view = View.inflate(getContext(), R.layout.distance_view, null);        addView(view);    }}

CustonView布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <TextView        android:id="@+id/driver_count"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="司机数量"        android:gravity="center"        android:padding="15dp"        />    <View        android:id="@+id/topline"        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="@android:color/black"        />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="出发地"        android:layout_margin="15dp"        android:gravity="center"        />    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="@android:color/black"        />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="目的地"        android:gravity="center"        android:layout_margin="15dp"        /></LinearLayout>

主要代码

public class HomeActivity extends AppCompatActivity implements View.OnClickListener,Animator.AnimatorListener{    private TextView driverCount;    private boolean isShow = true;    private int measuredHeight;    private ValueAnimator mShowAction;    private ValueAnimator mHideAction;    private View topLine;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_home);        CustomView customView = (CustomView) findViewById(R.id.customView);        Button btnShow = (Button) findViewById(R.id.btn_show);        Button btnHide = (Button) findViewById(R.id.btn_hide);        btnShow.setOnClickListener(this);        btnHide.setOnClickListener(this);        driverCount = (TextView) customView.findViewById(R.id.driver_count);        topLine = customView.findViewById(R.id.topline);        driverCount.post(new Runnable() {            @Override            public void run() {                //这些代码都要放在post方法里面，因为要获取到控件高度                measuredHeight = driverCount.getMeasuredHeight();                mShowAction = ValueAnimator.ofInt(0, measuredHeight);                mHideAction = ValueAnimator.ofInt(measuredHeight,0);                mShowAction.addListener(HomeActivity.this);                mHideAction.addListener(HomeActivity.this);            }        });    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.btn_show:                if (!isShow) {                    mShowAction.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                        @Override                        public void onAnimationUpdate(ValueAnimator animation) {                            driverCount.getLayoutParams().height = (int) animation.getAnimatedValue();                            driverCount.requestLayout();                        }                    });                    isShow = true;                    mShowAction.setDuration(500);                    mShowAction.start();                }                break;            case R.id.btn_hide:                if (isShow) {                    mHideAction.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                        @Override                        public void onAnimationUpdate(ValueAnimator animation) {                            driverCount.getLayoutParams().height = (int) animation.getAnimatedValue();                            driverCount.requestLayout();                        }                    });                    isShow = false;                    mHideAction.setDuration(500);                    mHideAction.start();                }                break;        }    }    @Override    public void onAnimationStart(Animator animation) {        if (isShow) {            topLine.setVisibility(View.VISIBLE);        }    }    @Override    public void onAnimationEnd(Animator animation) {        topLine.setVisibility(isShow?View.VISIBLE:View.GONE);    }    @Override    public void onAnimationCancel(Animator animation) {    }    @Override    public void onAnimationRepeat(Animator animation) {    }}

阅读全文

1 0