Android – 下部ナビゲーションの違和感２！？

前回、画面上の文字列が中央に配置されていないことを修正しました！

https://zesys.net/pc/android/bottom-navigation-discomfort

ふと、下部ナビゲーションのテンプレートを見直していたら、なんとなく、違和感を感じたｗ■違和感です！・fragment_home.xml画面の真ん中辺りに、TextViewがいますよね？レイアウト・実行してみる実行すると、なんとなく、画面中央よりも下に「This is home Fragment」がいますよね？？？実行結果■試してみる・TextViewを変更してみるTextViewに以下の変更を加えてみたlayout_heightを0dplayout_marginTopを0dpbackgroundに色を塗るTextViewを変更・再実行「fragment_home.xml」は全面色が塗られているのに、実行したら上の方に隙間が...

で、安心していたのですが・・ｗ

■違和感です！

・activity_main.xml

今回も違和感は、レイアウトの「activity_main.xml」ですｗ

上図の赤く囲った部分を見てもらうとわかるのですが、今回も「nav_host_fragment」のレイアウトで、おかしな箇所があります！

「nav_host_fragment」のBottomが「nav_view」のTopと制約で接続されています

でも、画面左側のレイアウトでは、「nav_host_fragment」が画面の下まで伸びています！？

これが違和感です！

・実行してみる

実行してみても、前回の修正が入っているので、見た目は特に違和感がないです

そう！今回は、普通では気づきにくいのですー！

■原因

今回は、原因がはっきりしているので、先にお伝えしておきます

・match_parent

原因は先に述べた通り、「nav_host_fragment」が画面の下まで伸びていることが問題です

つまり、「layout_height」が「match_parent」になっているからです！ｗ

・修正方法

「nav_host_fragment」の「layout_height」を「0dp(match constraint)」に変えるだけです

・確認方法

修正は単純なのですが、これで何がどう変わったのか、実行しても全くわかりませんｗ

というわけで、「layout_height」の違いで何が起きているのか、見ていきます！

■fragment_home.xmlを変更する

・LinearLayoutにButtonを並べる

画面一杯を使い切るために、LinearLayoutを使って、Buttonを５つ並べます

※TextViewを削除したので、ソースからも削除しておきます

■「layout_height」の差を確認

これで画面一杯のButtonが表示されるはず！？

・「match_parent」の場合

５つ目のボタンが下部ナビゲーションに隠れてしまっているのがわかる

どんなにスクロールを頑張っても５つ目のボタンの全てを見ることはできなかったのである・・

・「0dp(match constraint)」の場合

はぃ！そーいうわけで、言わずとも予測できるでしょうけど・・

「0dp(match constraint)」にすることで、５つ目のボタンがちゃんと全部表示できるわけです！

■最後に

余談ですが、もし、前回の修正も今回の修正も行わずに、Buttonを並べると

こんなに残念な感じになりますｗ

先にも紹介しましたが、前回の修正も併せて、確認してください！

Studio ZeSys

Android - 下部ナビゲーションの違和感！？