0

Есть login page. Как можно реализовать эффект смещения элементов, в именно два EditText и Button при нажатии на EditText, когда появляется клавиатура?

Верстка страницы:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical"
tools:context=".LoginActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/pic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My App"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="30dp"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/Login"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/rounded_edittext_login"
        android:hint="Логин"
        android:padding="10dp"
        android:textCursorDrawable="@null" />

    <EditText
        android:id="@+id/Password"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/rounded_edittext_password"
        android:hint="Пароль"
        android:inputType="textPassword"
        android:padding="10dp"
        android:textCursorDrawable="@null" />

    <Button
        android:id="@+id/enter"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/rounded_login_button"
        android:text="Войти"
        android:layout_marginBottom="140dp"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="15dp" />

</LinearLayout>

Желаемый эффект на примере FaceBook:

введите сюда описание изображения

2
  • Можно выставить в контейнере флаг animateLayoutChanges, и при появлении клавиатуры прятать вьюху с картинкой (либо заменять ее на более компактную картинку, как в примере) Commented 20 авг. 2018 в 13:52
  • Как конкретно это можно реализовать?
    – A.Hall
    Commented 20 авг. 2018 в 13:55

1 ответ 1

2

Подобное поведение можно реализовать с помощью флага animateLayoutChanges. Задаем этот флаг для корневого layout, для простоты возьмем linear layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical">

Далее, внутри этого контейнера определим три вьюхи, у верхней и нижней зададим weight=1, а вьюха посередине будет являться полем для ввода логина:

<TextView
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:text="Шапка" />

<EditText
    android:id="@+id/loginView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:hint="Логин/пароль"
    android:inputType="text" />

<View
    android:id="@+id/bottomView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

Осталось написать код в активити, в котором будем скрывать «шапку» в зависимости от того, находится ли поле «логин/пароль» в фокусе:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    loginView.setOnFocusChangeListener { _, hasFocus ->
        if (hasFocus) {
            topView.visibility = View.GONE
        } else {
            topView.visibility = View.VISIBLE
        }
    }
}

По кнопке back убираем фокус (назначаем фокус корневой вьюхе):

override fun onBackPressed() {
    rootView.requestFocus()
}

Обратите внимание, что у корневого лэйаута выставлен focusableInTouchMode для того, чтобы можно было убрать фокус с поля логина.

В зависимости от требований, данный пример можно усложнить, например, 1) выставить разные weight для позиционирования полей логина и пароля, 2) вместо скрытия вьюх можно динамически менять weight, или же 3) заменять одну шапку другой (занимающей меньше места на экране)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.