Android Material Design之BottomSh

作者: RaphetS | 来源:发表于2016-09-25 22:41 被阅读8282次

顾名思义,BottomSheetDialog指从底部弹出的对话框。跟PopupWindow的效果类似。

先看下效果图:

1.gif

可以看出效果,跟PopupWindow效果,差不多,但是PopupWindow要实现背景透明效果,必须使用代码进行设置,但是BottomSheetDialog不用,它的默认效果就是这样。

使用方法:

1、添加依赖:

compile 'com.android.support:design:24.1.1'

2、activity布局


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="org.raphets.demoui.BottomSheetActivity">
<Button
    android:textSize="20sp"
    android:onClick="showDialog"
    android:textAllCaps="false"
    android:text="BottemSheetDialog"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

3、dialog布局

<?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:id="@+id/lv"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_take_photo"
        android:gravity="center"
        android:padding="10dp"
        android:textSize="20sp"
        android:text="拍照"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <View
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"/>
    <TextView
        android:id="@+id/tv_photo_album"
        android:gravity="center"
        android:padding="10dp"
        android:textSize="20sp"
        android:text="相册"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <View
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"/>
    <TextView
        android:id="@+id/tv_cancel"
        android:gravity="center"
        android:padding="10dp"
        android:textSize="20sp"
        android:text="取消"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

4、Activity

import android.os.Bundle;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class BottomSheetActivity extends AppCompatActivity {

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

    }

    public void showDialog(View view){
        final BottomSheetDialog dialog=new BottomSheetDialog(BottomSheetActivity.this);
         View dialogView= LayoutInflater.from(BottomSheetActivity.this)
                .inflate(R.layout.layout_bottom,null);
        TextView tvTakePhoto= (TextView) dialogView.findViewById(R.id.tv_take_photo);
        TextView tvPhotoAlbum= (TextView) dialogView.findViewById(R.id.tv_photo_album);
        TextView tvCancel= (TextView) dialogView.findViewById(R.id.tv_cancel);

        tvTakePhoto.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(BottomSheetActivity.this,"拍照",Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        });
        tvPhotoAlbum.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(BottomSheetActivity.this,"拍照",Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        });

        tvCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

        dialog.setContentView(dialogView);
        dialog.show();
    }

}

使用起来非常简单,几行代码就ok

BottomSheetDialog dialog=new BottomSheetDialog(BottomSheetActivity.this);
View dialogView= LayoutInflater.from(BottomSheetActivity.this).inflate(R.layout.layout_bottom,null);
dialog.setContentView(dialogView);
dialog.show();
当弹出的layout是一个ListView的时候,当ListView的item比较多时,弹出对话框时只会显示几个item,向上拖动时,才会显示全部item
2.gif
layout布局文件
<?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">
<ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></ListView>
</LinearLayout>
Activity核心代码
 public void showDialog(View view){
        final BottomSheetDialog dialog=new BottomSheetDialog(BottomSheetActivity.this);
        View dialogView= LayoutInflater.from(BottomSheetActivity.this)
                .inflate(R.layout.list_bottom,null);
        ListView listView= (ListView) dialogView.findViewById(R.id.listview);
        String[] array=new String[]{"item-1","item-2","item-3","item-4","item-5","item-6","item-7","item-8","item-9"};
        ArrayAdapter adapter=new ArrayAdapter(BottomSheetActivity.this,android.R.layout.simple_list_item_1,array);
        listView.setAdapter(adapter);

        dialog.setContentView(dialogView);
        dialog.show();
    }

相关文章

网友评论

  • CodingShell:我以前做的时候是自己用windowsmanager+valueanimator做的,效果还可以~
  • b5ae41fa98c3:弹出没有全部显示,还要向上拉才可以显示,导致一出来是空一片
  • 33b882c6c780:🈶用😬
  • 98f21096254d:如果listView数目比较多的时候假如 >30 如何让划出的ListView 向下滑动呢
    洋葱cy:@强强丶 recyclerview

本文标题:Android Material Design之BottomSh

本文链接:https://www.haomeiwen.com/subject/qrgfyttx.html