2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Androidのレイアウトの背景画像に、gravityを指定して見切れる形で表示させる方法

Last updated at Posted at 2018-08-30

AndroidのLayout(FrameLayoutやLinearLayout)で、backgroundに画像を指定するときのTipsです。

##概要
Androidのlayoutの背景に画面より大きい画像を利用した時に大きい部分を見切れるように表示させたい場合、背景にXMLのDrawableを利用することで解決できます。
汎用的に言えば、XMLにgravity等を指定することで、ここにある仕様に基づき背景画像をレイアウトできます。

画面サイズより大きい画像を指定すると、画像が画面に合わせて強制的に縮小してしまいます。scaleTypeも効かない為、画面比と画像がマッチしていないと、きれいに縮小されません。

こういう場合、ImageViewを配置して解決するのが一番最初に思いつく方法でそれでも解決できるかと思います。今まで自分もその方法で解決してきましたが、他にレイアウト要素がたくさんある場合、レイヤーを意識するのが面倒です。Layoutの背景で指定出来れば、その辺りを気にせず実装出来ます。

##手順

####1.drawableのxmlで用意する
例として、background.xmlというファイルを作ります。
素材として、bigger_than_display.pngという画面サイズより大きい素材があるとします。
drawableディレクトリ配下に下記XMLを保存します。

background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <bitmap
        android:gravity="top|left"
        android:src="@drawable/bigger_than_display" >
    </bitmap>
    </item>
</selector>

####2.作成したxmlをlayoutのbackgroundに指定する
drawableのxmlが出来たら、背景画像を指定するようにbackground属性に指定するだけです。

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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="@drawable/background"
    tools:context="resource.layout.test.MainActivity">

</android.support.constraint.ConstraintLayout>

##メリット

  • 知ってしまえば簡単に実装出来る
  • レイヤーを意識しなくて済むので、後から指定した場合も手間が少ない
  • imageviewを指定するよりも意味と実装が一致するので、コードが分かりやすくなる
  • 小さい画像でgravityを効かせたい時も使えます。

##ググった元ネタ
元ネタはこれ

##XMLによる記述は色々便利
画面上のパーツをカスタマイズする場合、XMLでdrawableを作ると結構色々なことが出来ます。ラジオボタンのカスタマイズ、ボタンの押込み指定等、画面上のパーツのカスタマイズに悩んだらdrawableとXML,Shapeをキーワードに調べてみると良いものが見つかるかもしれません。

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?