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

效果图(从底部弹出页面)

这里写图片描述

代码

从效果图上我们可以看到,当点击按钮时,启动了一个从底部出现的页面,直至占满整个屏幕,这种效果是怎么实现的,接下来就带大家来实现一下。
先看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) {

    }
}
  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值