안드로이드 버튼 생성 방법 중 layoutButton을 정의 하고 Acitvity 생성 단계인 onCreate() 함수에서 버튼의 생성과 동시에 OnClickListener를 구현 하는 방법 입니다.

public void setOnClickListener (View.OnClickListener l)를 이용하여 등록 합니다.

 

1. Layout에 이벤트 추가


activity_main.xmlButtonLayout을 구성 합니다.


<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" />

ID를 달리 해서 3개의 버튼을 추가 했습니다.

 

2. Activity에 기능 구현

 

onCreate()에서 다음과 같은 형태고 버튼 3개를 정의 합니다.


Button btnListener1 = (Button)findViewById(R.id.btn_listener1);

동시에 setOnClickListener를 이용하여 onClick() 이번트를 부여합니다.

버튼 클릭시 Toast를 이용하여 간단한 메시지를 보여 줍니다.


btnListener1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Listener Button1", Toast.LENGTH_SHORT).show();
}
});

버튼에 setOnclickListener를 설정할 때 자세히 보면

new View.OnClickListener() 이렇게 되어 있습니다.

new를 사용해서 각 버튼 별로 새로운 객체가 생성되어 작동을 합니다.

다른 버튼들이 getId()를 이용하여 버튼을 구분 하지만 이 버튼은 각자 별도의 객체로 작동이 됩니다.

 

3. 결과


3개의 버튼이 구현되었고 버튼 클릭시 메시지가 나타납니다.


android button



4. Source Code

 

4.1 activity_main.xml


layout에 버튼 3개를 정의 합니다.


<?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_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" />

</android.support.constraint.ConstraintLayout>

4.2 strings.xml


button에 사용되는 text를 정의 합니다.


<resources>
    <string name="app_name">ButtonClickListener</string>
    <string name="btn_listen1">Listener1</string>
    <string name="btn_listen2">Listener2</string>
    <string name="btn_listen3">Listener3</string>
</resources>

4.3 MainActivity.java


버튼 생성과 동시에 이벤트를 등록하는 코드와 기능 구현이 포함 됩니다.


package copycoding.android.buttonclicklistener;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @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();
            }
        });
    }
}


다른 버튼 사용 관련 참조


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

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

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

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


- copy coding -


 

여기에서 사용하는 onClick()public static final int onClick() 으로 R.asst에 속한 method 입니다.

다른 버튼에서 사용하는 onClick()public abstract void onClick (View v)으로 public static interface View.OnClickListener에 속해 있습니다.

android:onClick=”btnClick”의 형태로 layout 설정 xml에 추가 되어 View에서 클릭 되었을 때 정의된 이름의 함수를 호출하여 작동 합니다.

Activitypublic void btnClick(View v)으로 method를 선언 하지 않으면 오류가 발생 합니다.

Activitybutton을 생성하지 않고도 함수만 생성하여 호출 할 수 있습니다.

 

1. Layout에 이벤트 추가


activity_main.xmlLayout을 구성 하면서 Button에 이벤트를 등록 합니다.

android:onClick="btnClick” 이런 형태로 btnClick이건 java에서 사용할 함수 명으로 하시면 됩니다.

버튼을 클릭 하면 해당하는 btnClick() 함수를 찾아 실행을 하게 됩니다.


<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"/>


테스트를 위해 3개의 버튼을 만들고 3개 모두 동일한 android:onClick="btnClick” 이번트가 발생하도록 했습니다.

 

 

2. Activity에 기능 구현

 

버튼 클릭에 대한 함수를 구현 합니다.

public void btnClick(View view) { }

버튼 3개가 모두 동일한 btnClick() 함수를 호출 하도록 되어 있어 실제 어떤 버튼이 선택 되었는지는

getId()를 이용하여 ID를 확인 하고 그에 따라 작업을 분기 시킵니다.

if(view.getId() == R.id.btn_onclick1) { }

여기서는 Toast로 간단한 메시지를 보여 줍니다.

 


3. 결과


화면 버튼 구성이 좀 엉성하지만 3개의 버튼을 클릭하면 결과는 확인 가능 합니다.


angular icon onclick



4. Source Code

 

4.1 activity_main.xml


화면 구성 layout에 버튼 3개를 추가 합니다.


<?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"/>

</android.support.constraint.ConstraintLayout>


4.2 strings.xml


layout button에 사용되는 text를 정의 합니다.


<resources>
    <string name="app_name">ButtonOnClick</string>
    <string name="btn_click1">onClick1</string>
    <string name="btn_click2">onClick2</string>
    <string name="btn_click3">onClick3</string>
</resources>

4.3 MainActivity.java


Button Click시 호출 되는 함수를 기술 합니다.


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    // Layout 작성시 button 속성에 onClick 이벤트를 준 경우
    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();
        }
    }
}

다른 버튼 사용 관련 참조


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

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

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

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


- copy coding -


Angular material에서 제공하는 버튼은 바로 기본적으로 제공하고 있는 기능 만으로도 충분히 사용 가능 합니다.

다양한 형태 및 기본으로 제공되는 아이콘만으로도 혼자서 사이트를 꾸미는 것도 가능하리라 생각 됩니다.


버튼의 종류에 대한 간단한 설명을 한다면


속성

 설명

 mat-button

 사각형 텍스트 버튼으로 채우기, 테두리, 높이가 없다

 mat-stroked-button

 사각형 텍스트 버튼으로 테두리가 있고 채우기, 높이가 없다

 mat-flat-button

 사각형 텍스트 버튼으로 채우기가 있고 높이가 없다

 mat-raised-button

 사각형 텍스트 버튼으로 채우기, 테두리, 높이가 있다

 mat-fab

 원형 버튼으로 텍스트, 아이콘을 추가할 수 있다

 mat-mini-fab

 작은 원형 버튼으로 텍스트, 아이콘을 추가할 수 있다

 mat-icon-button

 투명한 버튼으로 아이콘을 추가 할 수 있다


이렇게 설명을 할 수가 있겠고요.


버튼의 모양은


angular button tag


각 속성별로 이렇게 생겼습니다.

 

그럼 구현을 해보도록 하겠습니다.

 

 

1. Component 추가

 

제일 먼저 component 추가를 해보겠습니다.

component가 화면 하나를 만드는 것으로 생각 하면 됩니다.


프로젝트에 마우스를 놓고 우측 버튼을 클릭 합니다.

 

New > Component

 

를 선택 하면 컴포넌트 생성 팝업 창이 나타납니다.



저는 새로 생성하는 component 명칭을

material-test

로 하였습니다.



[Finish] 버튼을 클릭하고 잠시 기다립니다.


시간이 지나면 프로젝트에 material-test 폴더가 생기고 파일들도 만들어 집니다.




2. 화면 추가

 

material-test로 화면을 만들었으니 웹 브라우저에서 볼 수 있도록 추가를 해줘야 합니다.

 

material-test.component.ts

파일에 명시된

app-material-testindex.htm에 추가하는 작업입니다.


2.1 module에 추가

 

/myNgProject/src/app/app.module.ts

파일을 열어보니 생성하면서 자동으로 material-test component import 되어 있습니다.


import { MaterialTestComponent } from './material-test/material-test.component';


자동으로 import 되었다고 화면도 자동으로 연결 되는게 아닙니다.

이걸 사용하려면 bootstrap에 추가를 해주어야 합니다.


bootstrap: [AppComponent, MaterialTestComponent]



2.2 html에 추가


module에 추가해서 사용 할 수 있도록 했으니 이제 화면에 추가를 합니다.


/myNgProject/src/index.html

파일을 열고 추가를 합니다.


<app-material-test></app-material-test>


이제 새로 생성한 material-test.component.html HTML 작업을 하면 index.html에 나타나게 됩니다.

 


2.3 버튼 html 작업


새로 추가한 material-test.component.html에 버튼 관련 html tag 작업을 진행 합니다.


html 일부분을 가져와 보았습니다.


<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

이런식으로 작업을 하면 되겠죠.

 

이렇게 하면 화면 작업은 끝입니다.

이제 설정을 해야 합니다.

 


3. 버튼 환경 설정

 

html에 버튼 태그 작업을 하면 바로 적용 되는게 아니라 angular에서 제공하는 module, css등을 추가해야 합니다.

 

3.1 Module 추가


/myNgProject/src/app/app.module.ts

파일을 열고 버튼과 버튼에 추가하는 아이콘 관련 모듈을 추가해 줍니다.


import { MatButtonModule } from '@angular/material/button';

import { MatIconModule } from '@angular/material/icon';


그리고 imports에 모듈명을 추가해 줍니다.

 

이건 일부분만 가져오기 그래서 전체적인 파일 모습은

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }


이렇습니다.



3.2 css 추가


CSS를 추가하는 방법은 2가지가 있습니다.

 

index.html 파일에 링크형식으로 불러서

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

이렇게 추가 하거나


/src/styles.css 파일에


@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

요렇게 추가하면 됩니다.


저는 개인적으로 두번째를 선호합니다.

 


4. 테스트


모든 작업이 완료 되었습니다.

테스트를 진행 하면 됩니다.

 

프로젝트에 마우스를 대고 우측 버튼 > Run As > Angular Web Application을 선택하면

결과를 보실 수 있습니다.




5. Source Code


Button을 테스트 하기 위해 작업한 파일들이 어떤건지 한번 볼까요?

 



html mode 을 제외하고는 환경설정 관련 입니다.


/src/app/material-test/material-test.component.css

.button-row button,
.button-row a {
  margin-right: 8px;
}


/src/app/material-test/material-test.component.html

<p>
  material button test!
</p>
<h3>mat-button</h3>
<div class="button-row">
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button routerLink=".">Link</a>
</div>

<h3>mat-stroked-button</h3>
<div class="button-row">
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-stroked-button color="warn">Warn</button>
  <button mat-stroked-button disabled>Disabled</button>
  <a mat-stroked-button routerLink=".">Link</a>
</div>

<h3>mat-flat-button</h3>
<div class="button-row">
  <button mat-flat-button>Basic</button>
  <button mat-flat-button color="primary">Primary</button>
  <button mat-flat-button color="accent">Accent</button>
  <button mat-flat-button color="warn">Warn</button>
  <button mat-flat-button disabled>Disabled</button>
  <button mat-flat-button color="warn">favorite</button>
  <a mat-flat-button routerLink=".">Link</a>
</div>

<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

<h3>mat-fab</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h3>mat-mini-fab</h3>
<div class="button-row">
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

<h3>mat-icon-button</h3>
<div class="button-row">
  <button mat-icon-button>
    <mat-icon aria-label="test">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="primary">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="accent">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="warn">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button disabled>
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
</div>


/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }


/src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyNgProject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <app-material-test></app-material-test>
</body>
</html>


/src/styles.css


/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

- copy coding -


12

+ Recent posts