さて今回は以下の写真の様にiOSとAndroidでボタンに画像を設定する方法についてご紹介します。
I introduce how to set an image for Button on iOS and Android as like below picture this time.
写真はPocket Note(This pic is Pocket Note)
1. iOS
環境(Environment)：Xcode8, Swift3
まずXcodeのプロジェクトに画像ファイルを追加します。
At first, add an image file to Xcode's project.
その後、UIImageの引数に取り込んだファイルの名称を指定してUIImageを作成し、UIButtonのsetImageメソッドにそのUIImageを設定します。
And create UIImage from image's file name and set UIImage to UIButton's setImage method.
let buttonSample:UIButton = UIButton()
buttonSample.setImage(UIImage(named:"Edit.png"),for:.normal)
また、UIButtonのImageViewのcontentModeで画像の表示方式を指定することができます。
(この例ではアスペクト比を維持して表示する設定にしています)
And if you use contentMode of UIButton's ImageView, you can specify the mode of displaying image on UIButton.
buttonSample.imageView!.contentMode = UIViewContentMode.scaleAspectFit
2. Android
環境(Envrionment)：Android Studio 2.2.1, API 21
まずAndorid Studioに画像ファイルを追加します。
画像を選択してCTRL + Cを実行し、Android Stuidoの[res]-[drawable]の下でCTRL + Vを実行するといいでしょう。
この時、画像ファイルの名称を設定するダイアログが表示されます。Android Studioでは画像ファイルのファイル名には英小文字および数字しか使用できませんのでご注意ください。
At first,add an image file to Android Studio.
Select an image file and press CTRL + C.
Select [res]-[drawable] of Android Studio and press CTRL + V.
The dialog setting an image file's name is displayed at this point, and you must input an image file's name using only [a-z] and [0-9].
その後、ImageButtonを使用して画像を設定します。
XMLでも設定できますが、今回はコードで行います。
And set image to ImageButton.
I set image by code without XML this time.
取り込んだ画像ファイル名を指定して、画像のBitmapを作成します。
Specify an image file's name and create Bitmap.
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.edit);
作成したBitmapをImageButtonのsetImageBitmapで設定します。
Set Bitmap to ImageButton's setImageBitmap method.
ImageButton buttonSample = new ImageButton(this);
_buttonGroupAdd.setImageBitmap(bitmap);
setAdjustViewBoundsをtrueにすると、画像をImageButtonのサイズに合わせることができます。
If you set true to setAdjustViewBounds method, the size of image is adjusted to the size of ImageButton.
buttonSample.setAdjustViewBounds(true);
3.サンプルコード全文(Example Code)
3-1. iOS
import UIKit
class ViewController: UIViewController {
let buttonSample:UIButton = UIButton();
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
buttonSample.frame = CGRect(x: 50, y: 50, width: 50, height: 50)
buttonSample.setImage(UIImage(named:"Edit.png"),for:.normal)
buttonSample.imageView!.contentMode = UIViewContentMode.scaleAspectFit
buttonSample.backgroundColor = UIColor.blue
buttonSample.layer.cornerRadius = 5
self.view.addSubview(buttonSample)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
3-2 Android
package net.studioks.sample1;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
public class sample1 extends Activity {
private ImageButton buttonSample;
@Override public void onCreate(Bundle bundle){
super.onCreate(bundle);
RelativeLayout relativeLayout = new RelativeLayout(this);
setContentView(relativeLayout);
buttonSample = new ImageButton(this);
buttonSample.setPadding(0,0,0,0);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.edit);
buttonSample.setImageBitmap(bitmap);
buttonSample.setAdjustViewBounds(true);
GradientDrawable gradient = new GradientDrawable();
gradient.setCornerRadius(5);
gradient.setColor(Color.BLUE);
buttonSample.setBackground(gradient);
RelativeLayout.LayoutParams param =
new RelativeLayout.LayoutParams(50, 50);
param.leftMargin = 20;
param.topMargin = 10;
param.addRule(RelativeLayout.ALIGN_TOP);
relativeLayout.addView(buttonSample);
}
}
[関連記事(Articles)]
[iOS Android]Color gradation and rounding coners
にほんブログ村
クリエイティブライフ ブログランキングへ
