Floating Action Button 은 화면에 떠있는 버튼으로 머터리얼 디자인에서 자주 사용하는 기본 위젯이다.
https://www.youtube.com/watch?v=cASXtRa6yDc 동영상을 보면 이해될 것이다.
앱 build.gradle 추가사항
dependencies {
implementation 'com.google.android.material:material:1.1.0'
}
ConstraintLayout 의 모든 보기에는 가로 및 세로 제약조건을 각각 하나 이상 추가해야 한다.
아래 그림에서 ConstraintLayout 에서 버튼의 위치를 결정하는 것은 1번과 2번이다.
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
5번을 누르면 floating 버튼의 색상을 쉽게 변경할 수 있다.
6번은 floating 버튼 안의 이미지를 작성하는 것이다.
Vector Drawable을 사용하고 롤리팝 미만의 기기를 지원해야 할 때는 src 대신에 srcCompat 속성을 사용해야 한다.
검색으로 원하는 이미지를 찾아도 된다.
이름이 자동으로 추가된 것을 확인할 수 있다.
| <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fabMain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:backgroundTint="#00BCD4" android:tooltipText="메시지 전송" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/ic_baseline_menu_24" tools:ignore="MissingConstraints" /> </androidx.constraintlayout.widget.ConstraintLayout> |
| public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FloatingActionButton fab = findViewById(R.id.fabMain); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"실제 클릭 이벤트를 대신 보여준다.",Snackbar.LENGTH_LONG) .setAction("Action",null) .show(); } }); } } |
테스트 파일 첨부 (Java 기반 코드인데 코틀린으로 변환 목적으로 앱 build.gradle이 코틀린 관련 추가되어 있음)
코틀린으로 코드를 변환해보자.
자동변환 전후 Java코드와 kotlin 코드를 보자.
| FloatingActionButton fab = findViewById(R.id.fabMain); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"실제 클릭 이벤트를 대신 보여준다.",Snackbar.LENGTH_LONG) .setAction("Action",null) .show(); } }); |
| val fab = findViewById<FloatingActionButton>(R.id.fabMain) fab.setOnClickListener { view -> Snackbar.make(view, "실제 클릭 이벤트를 대신 보여준다.", Snackbar.LENGTH_LONG) .setAction("Action", null) .show() } |
코틀린 코드를 좀 더 정리하면....
| fabMain.setOnClickListener { view -> Snackbar.make(view, "실제 클릭 이벤트를 대신 보여준다.", Snackbar.LENGTH_LONG) .setAction("Action", null) .show() } |
'안드로이드 > Layout' 카테고리의 다른 글
| SMS authentication with OTP Layout Example (0) | 2020.09.14 |
|---|---|
| EditText DatePicker (0) | 2020.08.18 |
| CardView Layout 예제 (0) | 2020.04.12 |
| Meterial Design 로그인 Layout 예제 (0) | 2020.03.21 |
| ScrollView (0) | 2019.12.20 |
Link2Me