带有EditText的BottomSheet

时间:2016-07-31 11:34:07

标签: android keyboard bottom-sheet

我有自定义BottomSheetDialogFragment。这个片段有EditText和Button。

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="24dp"
    android:paddingRight="24dp"
    android:paddingBottom="15dp"
    android:focusableInTouchMode="true">

    <ImageView
        android:layout_marginTop="10dp"
        android:id="@+id/letter"
        android:layout_height="50dp"
        android:src="@drawable/key"
        android:layout_width="60dp"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/twPassInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:paddingTop="10dp"
        android:gravity="center"
        android:text="We just need your registred Email or Phone number to send you password reset instructions"
        />

    <EditText
        android:id="@+id/etEmailPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border_btn"
        android:layout_marginTop="10dp"
        android:hint="Input your e-mail or phone number"
        android:inputType="text"
        android:maxLength="30"
        android:padding="10dp"
        android:textColor="#0c8383"
        android:textColorHint="#bbbbbb"
        android:textSize="17sp"/>

    <Button
        android:id="@+id/bnRestorePass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:background="@drawable/border_blue_btn"
        android:text="Restore password"
        android:textColor="@color/white"
        android:textAllCaps="false"
        android:textSize="17sp" />
</LinearLayout>

当我关闭键盘时,这个片段几乎隐藏起来(见截图)。 screen before opening keyboard screen after turning down keyboard

    public class PasswordRestoringDialogFragment extends BottomSheetDialogFragment {

    @BindView(R.id.twPassInfo)
    TextView passInfo;

    @BindView(R.id.bnRestorePass)
    Button restorePass;

    @BindView(R.id.etEmailPhone)
    EditText emailPhone;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.pass_restore_modal, container, false);
        ButterKnife.bind(this, view);

        Typeface typeface1 = Typeface.createFromAsset(SignInActivity.getInstance().getAssets(), "SourceSansPro-Regular.ttf");
        emailPhone.setTypeface(typeface1);
        passInfo.setTypeface(typeface1);


        Typeface typeface2 = Typeface.createFromAsset(SignInActivity.getInstance().getAssets(), "SourceSansPro-Bold.ttf");
        restorePass.setTypeface(typeface2);

        return view;
    }

    private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                dismiss();
            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        }
    };

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        dialog.setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface dialog) {
                BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;
                FrameLayout bottomSheet = (FrameLayout) ((BottomSheetDialog) dialog).findViewById(android.support.design.R.id.design_bottom_sheet);
                BottomSheetBehavior.from(bottomSheet).setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        return dialog;
    }

    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.pass_restore_modal, null);
        dialog.setContentView(contentView);
        CoordinatorLayout.LayoutParams layoutParams =
                (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
        CoordinatorLayout.Behavior behavior = layoutParams.getBehavior();
        if (behavior != null && behavior instanceof BottomSheetBehavior) {
            ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
        }

    }
}

调用片段:

forgotPass.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            BottomSheetDialogFragment passwordResetDialogFragmnet = new PasswordRestoringDialogFragment();
            passwordResetDialogFragmnet.show(getSupportFragmentManager(), passwordResetDialogFragmnet.getTag());
        }
    });

活动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="match_parent"
    android:background="@drawable/background_gradient"
    android:fitsSystemWindows="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusableInTouchMode="true"
        android:orientation="vertical"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:paddingTop="36dp"
        android:weightSum="1"
        android:id="@+id/linearLayout">

        <ImageView
            android:id="@+id/btnBack"
            android:layout_height="18dp"
            android:src="@drawable/back"
            android:layout_width="18dp" />

        <TextView
            android:id="@+id/joiny_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:focusableInTouchMode="true"
            android:paddingBottom="25dp"
            android:text="@string/joiny"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#ffffff"
            android:textSize="65sp"
            android:textStyle="bold|italic" />

        <EditText
            android:id="@+id/etPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="-2dp"
            android:background="@drawable/edittext_top_bg"
            android:hint="Telephone number"
            android:inputType="phone"
            android:maxLength="30"
            android:padding="10dp"
            android:textColor="#0c8383"
            android:textColorHint="#bbbbbb"
            android:textSize="17sp"/>

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="-2dp"
            android:background="@drawable/edittext_bottom_bg"
            android:hint="Password"
            android:inputType="textPassword"
            android:maxLength="30"
            android:padding="10dp"
            android:textColor="#0c8383"
            android:textColorHint="#bbbbbb"
            android:textSize="17sp"/>

        <Button
            android:id="@+id/bnSignIn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:background="@drawable/border_btn"
            android:text="Sign In"
            android:textAllCaps="false"
            android:textSize="17sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Forgot your password?"
            android:id="@+id/twForgotPass"
            android:layout_marginTop="10dp"
            android:textColor="@color/white"
            android:layout_gravity="center_horizontal"

            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/twWhyTelephone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="20dp"
            android:textColor="@color/white"
            android:text="Why we need your telephone number?"
            android:textAppearance="?android:attr/textAppearanceSmall"
            />
    </LinearLayout>
</RelativeLayout>

2 个答案:

答案 0 :(得分:2)

我重写onCreateDialog(Bundle savedInstanceState)方法:

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;
            final FrameLayout bottomSheet = (FrameLayout) ((BottomSheetDialog) dialog).findViewById(android.support.design.R.id.design_bottom_sheet);
            final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
            bottomSheetBehavior.setBottomSheetCallback(mBottomSheetBehaviorCallback);
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            bottomSheetBehavior.setPeekHeight(500);
            KeyboardVisibilityEvent.setEventListener(SignInActivity.getInstance(), new KeyboardVisibilityEventListener() {
                @Override
                public void onVisibilityChanged(boolean isOpen) {
                    if (!isOpen) {
                        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                    }
                }
            });
        }
    });


    return dialog;
}

现在是好的

答案 1 :(得分:1)

使用底部表格行为和窥视高度属性与父布局一样

<LinearLayout
    android:id="@+id/bottom_sheet"
    android:minHeight="120dp"
    app:behavior_peekHeight="220dp"
    ...
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
    ...
</LinearLayout>

如果没有修复问题,请在键盘打开/关闭时按代码设置窥视高度。