BottomSheet 与 EditText
BottomSheet with EditText
我有自定义 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 共 activity:
<?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>
像这样在父布局中使用底部 sheet 行为和查看高度属性
<LinearLayout
android:id="@+id/bottom_sheet"
android:minHeight="120dp"
app:behavior_peekHeight="220dp"
...
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
...
</LinearLayout>
如果没有解决问题,则在键盘时通过代码设置窥视高度 open/close。
我重写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;
}
现在好了
我有自定义 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 共 activity:
<?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>
像这样在父布局中使用底部 sheet 行为和查看高度属性
<LinearLayout
android:id="@+id/bottom_sheet"
android:minHeight="120dp"
app:behavior_peekHeight="220dp"
...
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
...
</LinearLayout>
如果没有解决问题,则在键盘时通过代码设置窥视高度 open/close。
我重写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;
}
现在好了