shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsでソフトキーボードが表示されたときに他の表示要素が隠れてしまうのをなんとかしたい

参考

https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms

ソフトキーボード表示時のデフォルトの動作

Entryにフォーカスが移動すると,ソフトウェアキーボードが表示されます.

f:id:shuhelohelo:20200430014430p:plain

このとき,選択されたEntryが隠れないようにソフトウェアキーボードが表示されます.

これがデフォルトです.

解決したいこと

しかし,考慮されているのは「入力対象のEntryが隠れないこと」であって,その他の表示要素はソフトキーボードに隠れたり,または,スクロールによって画面外に出てしまったりします.

例えば,以下のように画面の先頭と一番下にEntryを配置して,真ん中にはListViewを配置します.

f:id:shuhelohelo:20200430014707p:plain

先頭のEntryを選択したときは,ソフトキーボードがListViewや下のEntryの上にかぶさるように表示されます.

f:id:shuhelohelo:20200430014430p:plain

次に一番下のEntryを選択した場合は,下からスライドアップしてくるソフトキーボードに合わせてView全体が上へスライドします.

f:id:shuhelohelo:20200430015343p:plain

先頭のEntryはまだしも,ListViewの一部も画面外に出てしまうため,入力中はListViewの画面外の情報を見ることはできず不便です.

解決

これを解決するためには各プラットフォームのプロジェクトに少しばかりの変更をくわえる必要があります.

その方法が冒頭のリンク先で紹介されています.

AndroidiOSではやり方が大きく異ります.

Android

Androidだけであれば非常に簡単です.

App.xamlを開き,Application要素に以下の2つを追加します.

    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:Application.WindowSoftInputModeAdjust="Resize"

追加後はこうなります.

<?xml version="1.0" encoding="utf-8" ?>
<Application
    x:Class="XFAdjustElemWhenKeyboardShows.App"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:Application.WindowSoftInputModeAdjust="Resize"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Application.Resources>

    </Application.Resources>
</Application>

これだけで以下のように表示要素がソフトキーボードによって隠れたり画面外に出ることがなくなります.

f:id:shuhelohelo:20200430021111p:plain

この例では真ん中に位置するListViewの領域が短く調整され,その縮まった領域の中でスクロールします.

このため,入力中であってもListViewのすべてのアイテムを見ることができます.

iOS

自分は iOSを持っていないので確認できないのですが,カスタムレンダラーで対応します.

参照したブログ記事のとおりにすればできると思います.自分でも確認したいですが.

今回のソースコード

github.com