Android 툴바 튜토리얼 - XML 레이아웃 및 Kotlin
Android 도구 모음 위젯은 앱에서 메뉴를 만드는 데 사용됩니다. XML 레이아웃과 Kotlin 코드를 사용하여 툴바를 만드는 방법을 배웁니다. 예제 Android 앱에서 다양한 도구 모음 속성을 구현합니다.
Android 툴바란 무엇입니까?
Android 툴바 위젯은 일반적으로 화면 상단에 있습니다. 애플리케이션 제목, 로고, 탐색 아이콘 및 메뉴 표시줄이 도구 모음 안에 표시됩니다. 도구 모음은 이전 및 현재 사용되지 않는 ActionBar를 대체하는 머티리얼 디자인입니다.
도구 모음 Gradle 종속성
도구 모음은 다음 종속성과 함께 사용할 수 있습니다.
implementation 'com.android.support:appcompat-v7:27.1.0'
Android 도구 모음은 테마 또는 레이아웃에서 제공될 수 있습니다.
Android 앱 기본 도구 모음
테마의 도구 모음
DarkActionBar 테마는 기본적으로 앱 상단에 툴바를 추가합니다. 위 이미지에서 상위 테마를 Theme.AppCompat.Light.DarkActionBar에서 Theme.AppCompat.Light.NoActionBar로 변경하여 일부로 표시되는 도구 모음을 제거할 수 있습니다. 활동 주제의. 테마를 변경하고 activity_main.xml 파일에 Toolbar를 추가해 보겠습니다.
툴바 XML 레이아웃
다음 코드를 사용하여 activity_main.xml 레이아웃 파일에 툴바를 추가했습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
그러면 텍스트나 다른 항목이 없는 투명 도구 모음이 표시됩니다. 툴바를 효과적으로 활용하기 위해서는 더 많은 속성을 추가해야 합니다.
1. 툴바 배경색 설정
배경색을 위해 Toolbar 태그에 다음 XML 속성을 추가해야 합니다.
android:background="@color/colorPrimary"
2. 테마 설정
다음 코드를 사용하여 도구 모음 테마를 설정할 수 있습니다.
android:theme="@style/ThemeOverlay.AppCompat.Dark"
레이아웃에 기본 테마를 사용하고 있습니다. Dark는 텍스트 색상이 밝음을 나타냅니다(일반적으로 흰색). styles.xml 파일에서 자체 사용자 지정 테마를 만들 수도 있습니다.
3. 제목, 부제, 아이콘 설정
- 제목:
app:title=Androidly Toolbar - 자막:
app:subtitle=Sub - 로고:
app:logo=@android:drawable/ic_menu_call - 탐색 아이콘:
app:navigationIcon=@drawable/ic_menu_black_24dp
4. 툴바 미리보기
도구 모음 속성을 사용자 지정하기 위한 많은 XML 특성이 있습니다. 예: titleTextColor, subtitleTextColor, subtitleTextAppearance, titleTextAppearance 등
Android 툴바 테마
고유한 사용자 정의 스타일을 만들고 툴바에서 테마로 지정할 수 있습니다. 이러한 모든 XML 속성을 추가하는 것보다 훨씬 쉬울 것입니다.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="toolbarStyle">@style/ToolBarStyle</item>
</style>
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#EA8D8D</item>
<item name="titleTextAppearance">@style/TitleTextAppearance</item>
<item name="subtitleTextAppearance">@style/SubTitleTextAppearance</item>
</style>
<style name="TitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#38ADAE</item>
</style>
<style name="SubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#00B7FF</item>
</style>
</resources>
activity_main.xml 파일에서 사용자 지정 테마를 사용해 보겠습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:subtitle="Sub"
app:title="AndroidlyToolbar" />
</LinearLayout>
Android 맞춤 도구 모음
툴바 내에서 자체 사용자 지정 보기를 정의할 수 있습니다. 다음 레이아웃은 도구 모음 내에서 사용자 지정 보기를 정의합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:subtitle="Sub"
app:title="AndroidlyToolbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/ic_menu_black_24dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:text="BUTTON" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
Kotlin 코드를 사용하여 툴바 만들기
Kotlin 코드를 사용하여 프로그래밍 방식으로 도구 모음을 만들 수 있습니다. 각 툴바 XML 속성에는 상응하는 Kotlin 메서드가 있습니다. 다음 MainActivity.kt 클래스는 아래와 같이 정의됩니다.
package net.androidly.androidlytoolbar
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.support.v7.widget.Toolbar
import android.widget.Toast
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val toolbar = findViewById(R.id.toolbar) as Toolbar?
setSupportActionBar(toolbar)
toolbar?.title = "Androidly"
toolbar?.subtitle = "Sub"
toolbar?.navigationIcon = ContextCompat.getDrawable(this,R.drawable.ic_menu_black_24dp)
toolbar?.setNavigationOnClickListener { Toast.makeText(applicationContext,"Navigation icon was clicked",Toast.LENGTH_SHORT).show() }
}
}
as 연산자를 사용하여 XML 뷰를 툴바 인스턴스로 안전하게 타입캐스트합니다. setNavigationOnClickListener는 메뉴에서 탐색 아이콘을 클릭할 때 토스트 메시지를 트리거합니다.
다음 링크에서 툴바 프로젝트를 다운로드할 수 있습니다. AndroidlyToolbar