2013-05-07 4 views
106

Я хотел бы, чтобы отрегулировать/повторно размера макета при активации софт-клавиатуры, как показано ниже:Как настроить макет, когда экранная клавиатура появляется

До и после:

enter image description hereenter image description here


Найдено пара ресурсов в SO:

  1. How to keep all fields and texts visible while the soft keyboard is shown
  2. android soft keyboard spoils layout when appears
  3. Adjust layout when soft keyboard is on

Но вопросы & ответов довольно неоднозначные, вот вопрос с более ясной картиной того, что я хочу.

Требования:

  • Он должен работать на телефоне с любым размером экрана.
  • Заметил, что поле «пробел»/«заполнение» на «FACEBOOK» и «Зарегистрироваться для Facebook» изменилось до и после.
  • Не имеет просмотра прокрутки.

ответ

135

Просто добавьте

android:windowSoftInputMode="adjustResize" 

в вашем AndroidManifest.xml где вы объявляете эту конкретную деятельность, и это будет регулировать расположение размер опции.

enter image description here

некоторый исходный код ниже для дизайна макета

<?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:orientation="vertical" > 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="20dp" 
     android:text="FaceBook" 
     android:textAppearance="?android:attr/textAppearanceLarge" /> 

    <EditText 
     android:id="@+id/editText1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/textView1" 
     android:layout_marginTop="30dp" 
     android:ems="10" 
     android:hint="username" > 

     <requestFocus /> 
    </EditText> 

    <EditText 
     android:id="@+id/editText2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/editText1" 
     android:layout_marginTop="20dp" 
     android:ems="10" 
     android:hint="password" /> 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/editText2" 
     android:layout_centerHorizontal="true" 
     android:layout_marginLeft="18dp" 
     android:layout_marginTop="20dp" 
     android:text="Log In" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_marginTop="17dp" 
     android:gravity="center" 
     android:text="Sign up for facebook" 
     android:textAppearance="?android:attr/textAppearanceLarge" /> 

</RelativeLayout> 
+2

+1 Это просто? Какие-либо дополнительные условия? Каким было изображение, о котором вы писали? – Roylee

+2

друзья, чтобы показать alignparentbottom = "true", если экран не настроен правильно ..hence я разместил это изображение друга –

+0

Очень хороший ответ действительно. Спасибо за помощь, приятель. Рад, что ты пришел. – Roylee

9

Android Developer имеет правильный ответ, но при условии, исходный код является довольно громоздким, а на самом деле не реализовать шаблон, описанный в диаграмме ,

Вот лучший шаблон:

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fillViewport="true"> 

    <RelativeLayout android:layout_width="match_parent" 
        android:layout_height="match_parent"> 

     <LinearLayout android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:orientation="vertical"> 

       <!-- stuff to scroll --> 

     </LinearLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true"> 

      <!-- footer --> 

     </FrameLayout> 

    </RelativeLayout> 

</ScrollView> 

его до вас, чтобы решить, что видит использовать для «прокрутки» и «нижнего колонтитула» частей. Также знайте, что вам, вероятно, нужно установить ScrollView s fillViewPort.

+0

Пробовал следовать вашему решению, но вместо этого использовал два 'LinearLayout' Рамки и Относительные, но все виды все еще находятся на вершине eachother. –

14

Добавить эту строку в манифесте, где ваша активность называется

android:windowSoftInputMode="adjustPan|adjustResize" 

или

вы можете добавить эту строку в onCreate

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); 
20

Этот вопрос уже beeen спросил несколько лет назад и «Secret Andro Geni» имеет хорошее базовое объяснение, а «tir38» также сделал хорошую попытку полного решения, но, увы, здесь нет полного решения. Я потратить пару часов выяснить вещи, и вот мое полное решение с подробным объяснением на дне:

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="10dp"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/mainLayout" 
      android:layout_alignParentTop="true" 
      android:id="@+id/headerLayout"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_centerVertical="true" 
       android:gravity="center_horizontal"> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/textView1" 
        android:text="facebook" 
        android:textStyle="bold" 
        android:ellipsize="marquee" 
        android:singleLine="true" 
        android:textAppearance="?android:attr/textAppearanceLarge" /> 

      </LinearLayout> 

     </RelativeLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:id="@+id/mainLayout" 
      android:orientation="vertical"> 

      <EditText 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:id="@+id/editText1" 
       android:ems="10" 
       android:hint="Email or Phone" 
       android:inputType="textVisiblePassword"> 

       <requestFocus /> 
      </EditText> 

      <EditText 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="10dp" 
       android:id="@+id/editText2" 
       android:ems="10" 
       android:hint="Password" 
       android:inputType="textPassword" /> 

      <Button 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="10dp" 
       android:id="@+id/button1" 
       android:text="Log In" 
       android:onClick="login" /> 

     </LinearLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_below="@+id/mainLayout" 
      android:id="@+id/footerLayout"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentBottom="true"> 

       <RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:id="@+id/textView2" 
         android:text="Sign Up for Facebook" 
         android:layout_centerHorizontal="true" 
         android:layout_alignBottom="@+id/helpButton" 
         android:ellipsize="marquee" 
         android:singleLine="true" 
         android:textAppearance="?android:attr/textAppearanceSmall" /> 

        <Button 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentRight="true" 
         android:id="@+id/helpButton" 
         android:text="\?" 
         android:onClick="help" /> 

       </RelativeLayout> 

      </LinearLayout> 

     </RelativeLayout> 

    </RelativeLayout> 

</ScrollView> 

И в AndroidManifest.xml, не забудьте установить:

android:windowSoftInputMode="adjustResize" 

на ярлыке <activity>, который вы хотите, такой макет.

Мысль:

Я понял, что RelativeLayout являются макетами, которые охватывают через все доступное пространство, а затем изменение размеров, когда клавиатура всплывает.

И LinearLayout - это макеты, которые не изменяются в процессе изменения размера.

Именно поэтому вам необходимо иметь 1 RelativeLayout сразу после ScrollView, чтобы охватить все доступное пространство экрана. И вам нужно иметь LinearLayout внутри RelativeLayout, иначе ваши внутренности будут раздавлены, когда произойдет изменение размера. Хорошим примером является «headerLayout». Если бы не было LinearLayout внутри, то RelativeLayout текст «facebook» будет раздавлен и не будет отображаться.

В «facebook» для входа изображений, размещенных в этом вопросе я также заметил, что вся Войти часть (mainLayout) центрируется по вертикали по отношению ко всему экрану, следовательно атрибут:

android:layout_centerVertical="true" 

на LinearLayout макет. И поскольку mainLayout находится внутри LinearLayout, это означает, что эта часть не будет изменена (снова посмотрите на картинку).

+1

Работает как шарм !! но нижний колонтитул придерживается нижней части макета, которая не выглядит красивой. как я могу избежать нижнего колонтитула! вместо этого, если я хочу дать некоторый запас нижнему колонтитулу, чтобы макет выглядел хорошо. Я внес некоторые изменения, предоставив атрибуту layout_margin относительную компоновку нижнего колонтитула, но с этим он покрывает последнюю половину Редактирования текста. Plz помогите мне. – Tara

+0

В _RelativeLayout_ с _ @ + id/footerLayout_ у вас есть _LinearLayout_, у которого есть этот атрибут: 'android: layout_alignParentBottom =" true "'. Это заставляет его придерживаться дна. – Yani2000

+0

ya, имея в виду, что я спросил вас, как делать компоновки компонентов нижнего колонтитула, которые должны иметь нижний край не менее 10dp или 15dp – Tara

1

В моем случае это помогло.

main_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_main2" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:orientation="vertical" 
    tools:context="com.livewallpaper.profileview.loginact.Main2Activity"> 

<TextView 
    android:layout_weight="1" 
    android:layout_width="match_parent" 
    android:text="Title" 
    android:gravity="center" 
    android:layout_height="0dp" /> 
<LinearLayout 
    android:layout_weight="1" 
    android:layout_width="match_parent" 
    android:layout_height="0dp"> 
    <EditText 
     android:hint="enter here" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
</LinearLayout> 
<TextView 
    android:layout_weight="1" 
    android:text="signup for App" 
    android:gravity="bottom|center_horizontal" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" /> 
</LinearLayout> 

Используйте это в manifest файл

<activity android:name=".MainActivity" 
     android:screenOrientation="portrait" 
     android:windowSoftInputMode="adjustResize"/> 

Теперь самая важная часть! Используйте тему, как это, в Activity или Application тег.

android:theme="@style/AppTheme" 

И тема эта как Наталья принимает

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <!-- Customize your theme here. --> 
    <item name="colorPrimary">@color/colorPrimary</item> 
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
    <item name="colorAccent">@color/colorAccent</item> 
    <item name="windowActionBar">false</item> 
    <item name="windowNoTitle">true</item> 
    <item name="windowActionModeOverlay">true</item> 
</style> 

Так что я пропускал тему. Это делало меня расстроенным весь день.

2

Эти параметры можно просто установить в файле AndroidManifest.xml.

<activity 
    android:name=".YourACtivityName" 
    android:windowSoftInputMode="stateVisible|adjustResize"> 

Использование adjustPan является Google не рекомендуется, так как пользователь может понадобиться, чтобы закрыть клавиатуру, чтобы увидеть все поля ввода.

Подробнее: Android App Manifest

1

Он может работать для всех видов разметки.

  1. добавить к вашей деятельности в теге AndroidManyfest.xml андроида: windowSoftInputMode = "adjustResize" , например:

  2. добавить это на макет тега activitypage.xml, что изменит свое положение. андроид: fitsSystemWindows = "истинный" и андроид: layout_alignParentBottom = "истинный" , например:

Смежные вопросы