Android 입문 튜 토리 얼 생 성 스타일 과 테마

머리말
안 드 로 이 드 개발 자로 서 우 리 는 일반적으로 app 의 기능 에 초점 을 맞춘다.그러나 기능 만 으로 는 부족 하고 인터페이스 도 기능 만큼 중요 하 다.app 의 외관 을 바 꿀 수 있 는 두 가지 방법 이 있 습 니 다.첫 번 째 는 xml 에서 직접View의 속성 을 수정 하 는 것 이다.이 방법 은 몇 개View와Activity만 있 는 간단 한 app 에 만 적합 하 다.두 번 째 방법 은 사용자 정의 스타일 과 테 마 를 만 드 는 것 입 니 다.웹 개발 에 익숙 하 다 면 첫 번 째 방법 은 내 연 된 CSS 스타일 을 사용 하 는 것 과 비슷 하고 두 번 째 방법 은 style sheets 를 사용 하 는 것 과 유사 합 니 다.
이 글 은 사용자 정의 스타일 과 테 마 를 만 드 는 방법 을 소개 합 니 다.
2.스타일 만 들 기
스타일 은 UI 컨트롤 에 적 용 된 것 이 분명 합 니 다.따라서 레이아웃 파일 에 새 빈 activity 를 만 들 고 두 개의 View 를 추가 합 니 다.

<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_margin="5dp"
 android:background="#009688"
 android:id="@+id/box1" />
 
<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="#00BCD4"
 android:layout_margin="5dp"
 android:id="@+id/box2" />

보시 다시 피 속성layout_width 과layout_margin은 각각View에 명시 적 으로 정의 되 어 있 습 니 다.
이View에 새로운 스타일 을 만 들 려 면 오른쪽 단 추 를 누 르 고 선택 하 십시오Refactor > Extract > Style.
현재 대화 상 자 를 볼 수 있 습 니 다.스타일 에 이름 을 설정 할 수도 있 고 포함 할 속성 을 선택 할 수도 있 습 니 다.우 리 는 마 이 박스 라 고 명명 하고background을 제외 한 모든 속성 을 선택 합 니 다.

ok 을 클릭 하면 첫 번 째View코드 가 바 뀌 었 음 을 볼 수 있 습 니 다.

<View android:background="#009688"
 android:id="@+id/box1"
 style="@style/MyBox" />

이것View은 현재 MyBox 스타일 을 가리 키 는 style 속성 이 있 습 니 다.이 스타일 의 정 의 를 보기 위해 서res/values/styles.xml를 열 수 있 습 니 다.

<style name="MyBox">
 <item name="android:layout_width">100dp</item>
 <item name="android:layout_height">100dp</item>
 <item name="android:layout_margin">5dp</item>
</style>

한 스타일 이 정의 되면 모든View에 적용 할 수 있 습 니 다.예 를 들 어 마 이 박스 를 두 번 째View에 적용 한다.

<View android:background="#00BCD4"
 android:id="@+id/box2"
 style="@style/MyBox" />

스타일 을 적용 한 후activity중 두 개View가 이 모양 입 니 다.

3.계승 스타일
Android 는 다른 스타일 을 기반 으로 새 스타일 을 만 들 수 있 습 니 다.다시 말 하면 스타일 계승 을 허락 한 다 는 거 야.
하나의 style 을 계승 하 는 데 는 두 가지 다른 문법 이 있다.첫 번 째 문법 은 암시 적 문법 이 라 고 불 리 며 번 호 를 표기 로 한다.예 를 들 어 두 개의parent마 이 박스 를 만 들 려 면 TEAL 과 CYAN 이라는 하위 스타일 을 만 듭 니 다.

<style name="MyBox.TEAL">
 <item name="android:background">#009688</item>
</style>
 
<style name="MyBox.CYAN">
 <item name="android:background">#00BCD4</item>
</style>

MyBox.TEAL 과 MyBox.CYAN 은 모두 MyBox 의 모든 속성 을 가지 고 있 음 을 짐작 할 수 있 습 니 다.그 밖 에android:background속성 도 있 습 니 다.
두 번 째 문법 은 통상 적 으로 현식 문법 이 라 고 부른다.그것 은 하나의parent속성 을 사용 하 는데 그 값 은parent style의 이름 입 니 다.여 기 는 TealBox 라 는 스타일 을 정의 하 는 코드 세 션 입 니 다.

<style name="TealBox" parent="MyBox">
 <item name="android:background">#009688</item>
</style>

하나의 파생style을 응용 하 는 것 은 일반적인 것 을 응용 하 는 것 과 다 르 지 않다.

<View android:id="@+id/box1"
 style="@style/TealBox" />
 
<View android:id="@+id/box2"
 style="@style/MyBox.CYAN" />

대부분의 개발 자 들 은 자신의 style 을 계승 할 때 암시 적 문법 을 사용 하고 계승 시스템style에 서 는 명시 적 문법 을 사용한다.
4.테마 만 들 기
지금까지 우 리 는 단지style을 activity 안의View에 응용 했다.Android 는 전체style와 응용 프로그램 에activity을 적용 할 수 있 습 니 다.하나의 스타일 이activity또는application에 적용 되면 하나의 theme(테마)가 됩 니 다.
기본적으로 최신 버 전의 Android Studio 를 사용 하여 만 든 모든 app 은 AppTheme 이라는 테 마 를 사용 합 니 다.AppTheme는AppCompat의 하위 클래스 로 매우 크 고 광범 위 한 주제 로 거의 모든 상용 보기 의 외관 에 영향 을 미친다.
styles.xml 에서AppTheme의 정 의 를 찾 을 수 있 습 니 다.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

AppThemeMaterial Design 을 따 르 기 때문에 Material Design spec 에 맞 는 테 마 를 만 들 기 위해AppTheme를parent로 사용 하 는 것 이 좋 은 주제 입 니 다.그렇지 않 으 면,너 도 직접Theme.AppCompat을parent로 사용 할 수 있다.
XML 코드 를 써 서 테 마 를 만 들 수 있 습 니 다.기억 하 세 요.스타일 일 뿐 입 니 다.하지만 이 튜 토리 얼 에 서 는 Android Studio 의 테마 편집 기 를 사용 하여 복잡 한 작업 을 하 는 방법 을 보 여 드 리 겠 습 니 다.
테마 편집 기 를 열 려 면Tools메뉴 선택Android > Theme Editor을 엽 니 다.
테마 편집기 창 오른쪽 에 테 마 를 수정 하 는 컨트롤 뿐만 아니 라 새로운 테 마 를 만 드 는 컨트롤 도 있 습 니 다.테마 수정 후 미리 보기 결 과 를 왼쪽 에 보 여 줍 니 다.

새 테 마 를 만 들 려 면 Theme 드 롭 다운 메뉴 를 클릭 하고 Create New Theme 옵션 을 선택 하 십시오.
팝 업 대화 상자 에서 새 테마 이름 을 MyTheme 로 설정 하고 ok 을 누 르 십시오.

이때 까지 styles.xml 에 새 코드 가 있 습 니 다.

<style name="MyTheme" parent="AppTheme" />

테마 편집기 로 MyTheme 을 수정 합 니 다.일 을 간단하게 하기 위해 본 튜 토리 얼 은colorPrimary,colorPrimaryDark,그리고colorAccent속성의 값 만 수정 합 니 다.colorPrimary값 을 수정 하려 면colorPrimary단 추 를 누 르 십시오.테마 편집기 에서 색상 대화 상 자 를 표시 합 니 다.원 하 는 색 을 선택 하 십시오.하지만 새 이름 을 주 는 것 을 기억 하 십시오.잊 어 버 리 면 테마 편집기 가 AppTheme 의 이 색 을 덮어 씁 니 다.

수정colorPrimaryDark과colorAccent의 값 은 같은 절차 이다.테마 편집 기 는 자동 으로 선택 한colorPrimary에 따라 적당 한bothcolorPrimaryDark과colorAccent을 추천 합 니 다.
지금 My Theme 의 정 의 는 이렇게 보 입 니 다.

<style name="MyTheme" parent="AppTheme" >
 <item name="colorPrimary">@color/colorPrimaryMyTheme</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
 <item name="colorAccent">@color/colorAccentMyTheme</item>
</style>

다섯, 응용 테마
우리 가 만 든 테 마 를 응용 하기 전에 자주 사용 하 는 컨트롤 몇 개 를activity에 추가 합 니 다.이렇게 하면 주제 의 효 과 를 더욱 쉽게 볼 수 있다.
다음 코드 는 일반 Button,테두리 없 는 Button,컬러 Button,Checkbox,Radio Button,Switch,Seekbar,TextView,EditText 를 만 들 었 습 니 다.

<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="normal"
 android:id="@+id/normal_button" />
 
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="borderless"
 android:id="@+id/borderless_button"
 style="@style/Widget.AppCompat.Button.Borderless" />
 
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="colored"
 android:id="@+id/colored_button"
 style="@style/Widget.AppCompat.Button.Colored" />
 
<CheckBox android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New CheckBox"
 android:id="@+id/checkBox" />
 
<RadioButton android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New RadioButton"
 android:id="@+id/radioButton" />
 
<Switch android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Switch"
 android:id="@+id/switchButton" />
 
<SeekBar android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/seekBar" />
 
<TextView android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Text"
 android:id="@+id/textView" />
 
<EditText android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/editText"
 android:hint="Input" />

이View를 추가 하면 레이아웃 이 이렇게 보 입 니 다.

Material Design spec 를 읽 어 봤 다 면나 는 네가 이때 의activity이colorPrimary 와colorPrimaryDark인디고 를 사용 한 것 을 알 수 있 을 것 이 라 고 확신한다.colorAccent는 핑크 를 사용 했다.이것들 은 모두 Android Studio 의 기본 색상 입 니 다.프로젝트res/values/colors.xml에서 그들의hex값 을 찾 을 수 있 습 니 다.activity에서 이 테 마 를 사용 하려 면 항목 의 manifest 파일 을 열 고 정의activity에 속성 을 추가 하고 값 을android:theme로 설정 합 니 다.

<activity android:name=".MainActivity"
 android:theme="@style/MyTheme">
 <intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
</activity>

마찬가지 로 설정@style/MyTheme의application속성 을 통 해 이 테 마 를 전체 app 에 적용 할 수 있 습 니 다.
지금 당신 의android:theme을 본다 면 그것 은 크게 다 를 것 입 니 다.

총화
이 튜 토리 얼 에서 사용자 정의 스타일 과 테 마 를 만 들 고 응용 하 는 법 을 배 웠 습 니 다.너 는 이 지식 들 을 너의 앱 을 더욱 예 쁘 게 만 드 는 데 쓸 수 있다.현재 대부분의 사용자 들 은 Material Design 에 익숙 해 져 있 으 며,규칙 에서 너무 멀 어 지면 그들 을 방해 할 수 있다.이상 이 이 글 의 전체 내용 입 니 다.여러분 의 학습 과 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.