Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
59
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

画像を重ねて表示する

画像を重ねて表示したいときってありますよね?

たとえば,アイコンの上にNewマーク付けたり,リボンを重ねたりなにかと画像に画像を重ねたいという欲求.

e.g.
twitter_org.png
twitter.png と
new.png
new.png(50x50にリサイズ) を合わせて
twitter_merge.png
とする場合.

icons via
http://designdeck.co.uk/a/1212/Shiny-Twitter-Icon-with-PSD
http://findicons.com/icon/177290/label_new_red?id=177560

XMLで定義したLayerDrawableを用いる

リソース画像の場合は,XMLでLayerDrawableを定義します.

twitter_merge.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item android:id="@+id/new_icon">
        <bitmap android:src="@drawable/new_icon" />
    </item>
</layer-list>

しかしこのままだと

twitter_fail.png

と表示されてうまくいきません.
中のBitmapにGravityを設定してあげる必要があります.

twitter_merge.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item android:id="@+id/new_icon">
        <bitmap
            android:gravity="top|left"
            android:src="@drawable/new_icon" >
        </bitmap>
    </item>

</layer-list>

これでとりあえず

twitter_merge1.png

と表示されるようになります.
また,item要素のleft, top, right, bottom各要素にマージンを設定することもできます.

twitter_merge.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item
        android:id="@+id/new_icon"
        android:left="50dp">
        <bitmap
            android:gravity="top|left"
            android:src="@drawable/new_icon" >
        </bitmap>
    </item>

</layer-list>

twitter_merge2.png

newアイコンが左から50dpの位置に表示されています.

コードで設定する

javaコードで設定する場合はこんな感じ

Context appContext = getApplicationContext();
ImageView image = new ImageView(appContext);
BitmapDrawable newIcon = (BitmapDrawable) getResources().getDrawable(R.drawable.new_icon);
newIcon.setGravity(Gravity.LEFT | Gravity.TOP);
Drawable[] drawables = {
        getResources().getDrawable(R.drawable.twitter),
        newIcon
};
LayerDrawable ld = new LayerDrawable(drawables);
image.setImageDrawable(ld);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC);
lp.addRule(RelativeLayout.ALIGN_TOP | RelativeLayout.ALIGN_LEFT);
mRootLayout.addView(image, lp);

ただし,XMLのように特定のアイテムにマージンを設定する方法が今のところわかっていません….

ForegroundImageViewを用いる

ForegroundImageViewというJake神が公開しているクラスがあるようです.
こちらがその紹介記事です.
http://qiita.com/yyaammaa/items/30fa39f39a461d59418e

でもほとんどの場合LayerDrawableで事足りるような?
ForegroundImageViewを作成した経緯が知りたい…

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
59
Help us understand the problem. What are the problem?