[android] 안드로이드 버튼(5) 버튼 생성 모음 및 이미지 버튼

앞에서 설명한 버튼 사용법 4가지를 하나의 프로젝트에 포함시켜 보았습니다.

그리고 이미지를 이용한 버튼 생성도 추가를 했습니다.

 

사용된 layout 구성은 ConstraintLayout 을 이용 하였고 버튼 위치는 editor가 아닌 수작업으로 위치를 표시 하였습니다.

 

1. 버튼 위치 잡기

1.1 text button

app:layout_constraintTop_toTopOf="parent" – 이걸로 위쪽 기준을 잡아줍니다.

android:layout_marginTop="76dp" – 위에서 잡은 기준으로 부터 76dp 떨어진 위치에서 시작합니다.

그럼 좌측도 동일하게…

app:layout_constraintLeft_toLeftOf="parent" – 이걸로 좌측 기준을 정해야 합니다.

android:layout_marginLeft="50dp"  - 정해진 좌측 기준으로 부터 50dp 만큼 떨어진 위치에서 시작..

 

 

1.2 Image button

app:layout_constraintLeft_toLeftOf="parent"  - image도 동일하게 기준을 잡아 줍니다.

android:layout_marginTop="450dp" – 잡아준 기준으로 부터의 거리에 image를 위치 합니다.

android:src="@drawable/battery_charging_18dp" – 이건 이미지 위치

android:padding="0dp" – 이미지 여백. 0이면 여백이 없어 이미지 자체가 여백이 있어야 한다.

 

 

2. 이미지 버튼

 

2.1 이미지 + 텍스트

 

android:drawableXXX를 이용하여 구현해 보았습니다.

drawableLeft, drawableRight, drawableTop... 등등이 있으니 필요한 기능을 사용해 봅시다.

 

2.2 이미지 버튼

 

<ImageButton /> 태그를 이용하여 이미지 위치(android:src="@drawable/battery_charging_btn")를 정해 줍니다.

 

 

3. 기존 구현 버튼 모음

 

[android] 안드로이드 버튼(1) onClick() 함수 사용 방법

[android] 안드로이드 버튼(2) 생성시 OnClickListener 구현 방법

[android] 안드로이드 버튼(3) OnClickListener 인터페이스 구현 방법

[android] 안드로이드 버튼(4) OnClickListener를 객체로 선언하여 구현하는 방법

4. Source Code

 

4.1 결과 화면

4.2 activity_main.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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_onclick1"
        android:text="@string/btn_click1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="btnClick"/>
    <Button
        android:id="@+id/btn_onclick2"
        android:text="@string/btn_click2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="btnClick"/>
    <Button
        android:id="@+id/btn_onclick3"
        android:text="@string/btn_click3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="200dp"
        android:layout_marginTop="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="btnClick"/>

    <Button
        android:id="@+id/btn_listener1"
        android:text="@string/btn_listen1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_listener2"
        android:text="@string/btn_listen2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="130dp"
        android:layout_marginTop="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_listener3"
        android:text="@string/btn_listen3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="250dp"
        android:layout_marginTop="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_implements1"
        android:text="@string/btn_implement1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_implements2"
        android:text="@string/btn_implement2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="125dp"
        android:layout_marginTop="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_implements3"
        android:text="@string/btn_implement3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="245dp"
        android:layout_marginTop="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_object1"
        android:text="@string/btn_object1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_object2"
        android:text="@string/btn_object2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="140dp"
        android:layout_marginTop="200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_object3"
        android:text="@string/btn_object3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="260dp"
        android:layout_marginTop="200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_imgtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="88dp"
        android:layout_marginTop="250dp"
        android:paddingRight="40dp"
        android:drawableLeft="@drawable/battery_charging"
        android:drawableRight="@drawable/battery_charging"
        android:drawableTop="@drawable/battery_charging"
        android:drawableBottom="@drawable/battery_charging"
        android:text="@string/btn_img_text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/btn_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="160dp"
        android:layout_marginTop="330dp"
        android:padding="0dp"
        android:src="@drawable/battery_charging_btn"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

4.3 strings.xml

<resources>
    <string name="app_name">ButtonTest</string>
    <string name="btn_click1">onClick1</string>
    <string name="btn_click2">onClick2</string>
    <string name="btn_click3">onClick3</string>
    <string name="btn_listen1">Listener1</string>
    <string name="btn_listen2">Listener2</string>
    <string name="btn_listen3">Listener3</string>
    <string name="btn_implement1">Implement1</string>
    <string name="btn_implement2">Implement2</string>
    <string name="btn_implement3">Implement3</string>
    <string name="btn_object1">Object1</string>
    <string name="btn_object2">Object2</string>
    <string name="btn_object3">Object3</string>
    <string name="btn_img_text">Image Text Button</string>
</resources>

4.4 drawable image

버튼에 사용한 이미지

4.5 MainActivity.java

package com.example.desk.buttontest;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
        implements Button.OnClickListener // 3. implements 구현 방법
{
    // 4. OnClickListener를 객체로 만드는 방법
    Button.OnClickListener btnObject = new View.OnClickListener() {
        public void onClick(View v) {
            if(v.getId() == R.id.btn_object1) {
                Toast.makeText(MainActivity.this, "Object Button1", Toast.LENGTH_SHORT).show();
            } else if(v.getId() == R.id.btn_object2) {
                Toast.makeText(MainActivity.this, "Object Button2", Toast.LENGTH_SHORT).show();
            } else if(v.getId() == R.id.btn_object3) {
                Toast.makeText(MainActivity.this, "Object Button3", Toast.LENGTH_SHORT).show();
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 2. Button 생성시 OnClickListner 구현 하는 방법
        Button btnListener1 = (Button)findViewById(R.id.btn_listener1);
        Button btnListener2 = (Button)findViewById(R.id.btn_listener2);
        Button btnListener3 = (Button)findViewById(R.id.btn_listener3);
        btnListener1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Listener Button1", Toast.LENGTH_SHORT).show();
            }
        });
        btnListener2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Listener Button2", Toast.LENGTH_SHORT).show();
            }
        });
        btnListener3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Listener Button3", Toast.LENGTH_SHORT).show();
            }
        });

        // 3. MainActivity에 implements View.OnClickListener를 이용한 경우
        Button btnImplement1 = (Button)findViewById(R.id.btn_implements1);
        Button btnImplement2 = (Button)findViewById(R.id.btn_implements2);
        Button btnImplement3 = (Button)findViewById(R.id.btn_implements3);
        btnImplement1.setOnClickListener(this);
        btnImplement2.setOnClickListener(this);
        btnImplement3.setOnClickListener(this);
        //image button
        Button btnImgtext = (Button)findViewById(R.id.btn_imgtext);
        ImageButton btnImg = (ImageButton) findViewById(R.id.btn_img);
        btnImgtext.setOnClickListener(this);
        btnImg.setOnClickListener(this);

        // 4. OnClickListener를 객체로 만드는 방법
        findViewById(R.id.btn_object1).setOnClickListener(btnObject);
        findViewById(R.id.btn_object2).setOnClickListener(btnObject);
        findViewById(R.id.btn_object3).setOnClickListener(btnObject);
    }

    // 1. onClick 함수를 호출 하는 방법 (activity_main.xml)
    public void btnClick(View view) {
        if(view.getId() == R.id.btn_onclick1) {  // Buttoon의 ID를 찾아서 실행이 된다.
            Toast.makeText(this, "onClick Button1", Toast.LENGTH_SHORT).show();
        } else if(view.getId() == R.id.btn_onclick2) {
            Toast.makeText(this, "onClick Button2", Toast.LENGTH_SHORT).show();
        } else if(view.getId() == R.id.btn_onclick3) {
            Toast.makeText(this, "onClick Button3", Toast.LENGTH_SHORT).show();
        }
    }

    // 3. MainActivity에 implements View.OnClickListener를 이용한 경우
    @Override
    public void onClick(View v) {
        if(v.getId() == R.id.btn_implements1) {
            Toast.makeText(MainActivity.this, "implements Button1", Toast.LENGTH_SHORT).show();
        } else if(v.getId() == R.id.btn_implements2) {
            Toast.makeText(MainActivity.this, "implements Button2", Toast.LENGTH_SHORT).show();
        } else if(v.getId() == R.id.btn_implements3) {
            Toast.makeText(MainActivity.this, "implements Button3", Toast.LENGTH_SHORT).show();
        } else if(v.getId() == R.id.btn_imgtext) {
            Toast.makeText(MainActivity.this, "Image Text Button", Toast.LENGTH_SHORT).show();
        } else if(v.getId() == R.id.btn_img) {
            Toast.makeText(MainActivity.this, "Image Button", Toast.LENGTH_SHORT).show();
        }
    }
}

- copy coding -