android 屏幕底部空白 android底部弹出菜单

转载

mob64ca13fa2f9e 2024-02-22 19:11:41

文章标签 android 屏幕底部空白自定义控件安卓开发底部菜单 android 文章分类 Android 移动开发

android 屏幕底部空白 android底部弹出菜单_安卓开发

如图是我想要实现的从屏幕底部弹出的菜单的效果。

下面开始进行代码的实现：主要是通过自定义AlertDialog实现：

一）菜单的布局xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical"
    android:gravity="center">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <Button
            android:id="@+id/btn1_bottom_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="120dp"
            android:paddingRight="120dp"
            android:text="Button1"
            android:textSize="18sp"
            android:background="@drawable/shape_bottom_menu_button1"/>

        <!--这是可爱的浅蓝色分割线-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#A6D3F0"/>
        <Button
            android:id="@+id/btn2_bottom_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="120dp"
            android:paddingRight="120dp"
            android:text="Button2"
            android:textSize="18sp"
            android:background="@drawable/shape_bottom_menu_button2"/>

        <!--这是可爱的分割线（第二个按钮 与第三个按钮之间的空隙）-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="@android:color/transparent"/>
        <Button
            android:id="@+id/btn_bottom_menu_cancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="120dp"
            android:paddingRight="120dp"
            android:textSize="18sp"
            android:text="取消"
            android:background="@drawable/shape_bottom_menu_button3"/>
        </LinearLayout>

</LinearLayout>

二）三个按钮的背景是带有圆角的矩形，这个圆角的背景通过shape实现

shape_bottom_menu_button1.xml

//上方两个圆角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topRightRadius="15dp"
        android:topLeftRadius="15dp" />
    <solid
        android:color="#FFFFFF"/>
</shape>

//底部两角 圆角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp" />
    <solid
        android:color="#FFFFFF"/>
 </shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp" />
    <solid
        android:color="#FFFFFF"/>
</shape>


//四个角都是圆角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="15dp" />
    <solid
        android:color="#FFFFFF"/>
</shape>

等会即将用到的动画效果：在res/anim目录下：

window_up_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="50%p"
    android:toYDelta="0%p"
    android:duration="300"
    />

window_down_off.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%p"
    android:toYDelta="50%p"
    android:duration="300"
    />

res/values目录下的style.xml

<span style="color:#000000;"><resources>


<!--屏幕下方弹出的菜单-->
<style name="animation_bottom_menu">
    <item name="android:windowEnterAnimation">@anim/window_up_in</item>
    <item name="android:windowExitAnimation">@anim/window_down_off</item>
</style>

</resources>
</span>

三）创建一个类BottomMenu，在这个类中封装了初始化以及显示自定义AlertDialog的方法

package com.xuhai.myapplication;

import android.app.AlertDialog;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;

/**
 * 自定义的 底部滑出菜单，共有三个按钮，除了取消按钮以外 可以自定义上面两个按钮的Text和OnClickListener
 ** Created by Administrator on 2015/9/15.
 */
public class BottomMenu {
    AlertDialog.Builder builder;
    View view;
    Button button1;
    Button button2;
    Button buttonCancel;
    Context context;

    /**
     * 初始化 菜单布局以及按钮
     * @param context
     */
    public BottomMenu(Context context) {
        this.context=context;
        builder=new AlertDialog.Builder(context);
        view= LayoutInflater.from(context).inflate(R.layout.layout_bottom_menu,null);
        button1=(Button)view.findViewById(R.id.btn1_bottom_menu);
        button2=(Button)view.findViewById(R.id.btn2_bottom_menu);
        buttonCancel=(Button)view.findViewById(R.id.btn_bottom_menu_cancel);

    }

    /**
     * 设置第一个按钮的 文字内容和监听器
     * @param title
     * @param listener
     */
    public void setButton1(String title,View.OnClickListener listener){
        button1.setText(title);
        button1.setOnClickListener(listener);
    }

    /**
     * 设置第二个按钮的 文字内容和监听器
     * @param title
     * @param listener
     */
    public void setButton2(String title,View.OnClickListener listener){
        button2.setText(title);
        button2.setOnClickListener(listener);
    }

    /**
     * 初始化完毕后，调用该方法 显示菜单
     */
    public void show(){
        final AlertDialog dialog=new AlertDialog.Builder(context).create();//生成一个AlertDialog对象
        dialog.show();//调用AlertDialog的show()方法显示

        buttonCancel.setOnClickListener(new View.OnClickListener() {//取消按钮点击后 回撤销dialog
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });

        Window window=dialog.getWindow();//获取当前的Window对象，然后下面进行窗口属性的设置
        window.setContentView(view);//加载布局，view是填充自定义菜单布局xml 得到的
        window.setBackgroundDrawableResource(android.R.color.transparent);//这个很重要，将背景设为透明
        // 这样子 第二和第三个按钮的空隙才会显示出来
        window.setGravity(Gravity.BOTTOM);//这个也很重要，将弹出菜单的位置设置为底部
        window.setWindowAnimations(R.style.animation_bottom_menu);//菜单进入和退出屏幕的动画，实现了上下滑动的动画效果
        window.setLayout(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);//设置菜单的尺寸

    }
}

四）在MainActivity中设置点击监听器，点击hello world的TextView控件时弹出菜单

package com.xuhai.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv=(TextView)findViewById(R.id.tv);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomMenu menu=new BottomMenu(MainActivity.this);
                menu.setButton1("照相",null);//这里根据自己需求可以设置 菜单上的按钮文字以及点击监听器
                menu.setButton2("相册",null);
                menu.show();
            }
        });
    }

}

五）最后运行程序，一个还勉强看得过去的底部弹出菜单诞生啦~

点击Hello World! 弹出菜单~

android 屏幕底部空白 android底部弹出菜单_android 屏幕底部空白_02

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。