Android 3부의 13개 드로어블 요약
이 섹션 소개:
이 섹션에서는 나머지 4개의 Drawable인 LayerDrawable, TransitionDrawable, LevelListDrawable 및 StateListDrawable에 대해 알아봅니다. 여전히 13가지 유형의 Drawable 지도가 게시되어 있습니다.
1.LayerDrawable
레이어 그래픽 개체(Drawable 배열 포함)를 사용한 다음 배열, 인덱스에 해당하는 순서로 그립니다. 가장 큰 값을 갖는 Drawable이 최상위 레이어에 그려집니다! 이러한 Drawable에는 교차하거나 겹치는 영역이 있지만 서로 다른 레이어에 위치하므로 <layer-list>를 루트 노드로 하여 서로 영향을 주지 않습니다!
관련 속성은 다음과 같습니다:
- drawable: 참조된 비트맵 리소스, 비어 있는 경우 Xu Yan은 Drawable 유형의 하위 노드를 갖습니다.
- left: 왼쪽 여백 레이어를 기준으로 한 컨테이너
- right: 컨테이너를 기준으로 한 레이어의 오른쪽 여백
- top: 컨테이너를 기준으로 한 레이어의 위쪽 여백
- bottom: 컨테이너를 기준으로 한 레이어의 아래쪽 여백 컨테이너
- id: 레이어의 ID
사용 예:
렌더링 실행:
코드 구현:
매우 간단합니다. 와 결합 이전에 배운 ShapeDrawable 및 ClipDrawable:
layerList_one.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape android:shape="rectangle"> <solid android:color="#C2C2C1" /> <corners android:radius="50dp" /> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape android:shape="rectangle"> <solid android:color="#BCDA73" /> <corners android:radius="50dp" /> </shape> </clip> </item> </layer-list>
그런 다음 레이아웃 파일에 다음 콘텐츠가 포함된 Seekbar를 추가합니다.
<SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal" android:indeterminateOnly="false" android:maxHeight="10dp" android:minHeight="5dp" android:progressDrawable="@drawable/layerlist_one" android:thumb="@drawable/shape_slider" />
맙소사, 사라졌나요? 네, 바로 그거예요~ 레이어 그래픽 개체에 대해 말하자면, 계단식 그림 효과도 얻을 수 있습니다. :
렌더링 실행 :
구현 코드 :
계단식 그림 layerlist_two.xml :
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_bg_ciwei" /> </item> <item android:left="25dp" android:top="25dp"> <bitmap android:gravity="center" android:src="@mipmap/ic_bg_ciwei" /> </item> <item android:left="50dp" android:top="50dp"> <bitmap android:gravity="center" android:src="@mipmap/ic_bg_ciwei" /> </item> </layer-list>
그런 다음 Activity_main.xml에 ImageView를 추가하면 내용은 다음과 같습니다.
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/layerlist_two"/>
간단하고 사용하기 쉽습니다. 무엇을 기다리고 계시나요? 프로젝트에 빠르게 적용하세요~
2.TransitionDrawable
LayerDrawable의 하위 클래스인 TransitionDrawable은 Drawable의 두 레이어만 관리합니다! 2층! 2층! 또한 Drawable의 한 레이어가 다른 Drawable 레이어로 전환되는 애니메이션 효과를 제어할 수 있는 투명도 변경 애니메이션도 제공합니다. 루트 노드는 <transition>입니다. 항목이 두 개뿐이라는 점을 기억하세요. 속성은 LayerDrawable과 유사합니다. 두 레이어 간의 전환 애니메이션을 시작하려면 startTransition 메서드를 호출해야 합니다. reverseTransition() 메서드를 호출하여 역방향으로 재생할 수도 있습니다.
사용 예:
렌더링 실행:
구현 코드:
res/drawable에 TransitionDrawable xml 파일을 생성합니다.
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@mipmap/ic_bg_meizi1"/> <item android:drawable="@mipmap/ic_bg_meizi2"/> </transition>
그런 다음 레이아웃 파일에 ImageView를 추가합니다. 그럼 add src 위의 드로어블에 설정합니다. 그러면 MainActivity.java의 내용은 다음과 같습니다:
public class MainActivity extends AppCompatActivity {
private ImageView img_show;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_show = (ImageView) findViewById(R.id.img_show);
TransitionDrawable td = (TransitionDrawable) img_show.getDrawable();
td.startTransition(3000);
//你可以可以反过来播放，使用reverseTransition即可~
//td.reverseTransition(3000);
}
}또한 원하는 경우: 여러 그림 주기의 페이드인 및 페이드아웃 효과 다음을 참조할 수 있습니다: Android Drawable 리소스 학습(7), TransitionDrawable의 예 매우 간단합니다. 핵심 원칙은 핸들러가 전환의 두 그림을 정기적으로 수정한다는 것입니다.
3.LevelListDrawable
은 Drawable 그룹을 관리하는 데 사용되며 내부 Drawable에 대해 다양한 레벨을 설정할 수 있습니다. 그릴 때 레벨 속성 값을 기반으로 해당 드로어블을 가져와서 루트 노드에 그립니다. 대상: <level-list> 설정할 수 있는 속성이 없습니다. 우리가 할 수 있는 일은 각 <item> 속성!
항목으로 설정할 수 있는 속성은 다음과 같습니다:
- drawable: 참조된 비트맵 리소스가 비어 있는 경우 Xu Yan은 Drawable 유형
- minlevel의 하위 노드를 갖습니다. level의 해당 최소값
- maxlevel: level해당 최대값
사용 예:
렌더링 실행:
코드 구현:
ShapeDrawable을 통해 원 그리기 , 하나의 공식 5개 부분 변경 너비와 높이를 낮추세요:
shape_cir1.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#2C96ED"/> <size android:height="20dp" android:width="20dp"/> </shape>
그런 다음 LevelListDrawable로 이동하여 여기에 5개의 레이어를 설정합니다:
level_cir.xml:
<?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/shape_cir1" android:maxLevel="2000"/> <item android:drawable="@drawable/shape_cir2" android:maxLevel="4000"/> <item android:drawable="@drawable/shape_cir3" android:maxLevel="6000"/> <item android:drawable="@drawable/shape_cir4" android:maxLevel="8000"/> <item android:drawable="@drawable/shape_cir5" android:maxLevel="10000"/> </level-list>
마지막으로 다음과 같이 작성합니다. MainActivity에 대한 다음 코드:
public class MainActivity extends AppCompatActivity {
private ImageView img_show;
private LevelListDrawable ld;
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 0x123) {
if (ld.getLevel() > 10000) ld.setLevel(0);
img_show.setImageLevel(ld.getLevel() + 2000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_show = (ImageView) findViewById(R.id.img_show);
ld = (LevelListDrawable) img_show.getDrawable();
img_show.setImageLevel(0);
new Timer().schedule(new TimerTask() {
@Override
public void run() {
handler.sendEmptyMessage(0x123);
}
}, 0, 100);
}
}역시 매우 간단합니다. 타이머 타이머이며 핸들러가 레벨 값을 수정합니다~
4.StateListDrawable
자, 드디어 마지막 드로어블이 생겼습니다: StateListDrawable. 패턴이지만 사실 우리는 이전에 사용한 적이 있습니다. 버튼<selector>에 대해 다양한 상태의 드로어블을 설정하는 것을 기억하시나요? 그렇구나, 중고야 이것이 StateListDrawable입니다!
설정할 수 있는 속성은 다음과 같습니다:
- drawable: 참조된 Drawable 비트맵을 앞에 배치하여 구성 요소의 정상 상태를 나타낼 수 있습니다~
- state_focused: 포커스를 받을지 여부
- state_window_focused: 창 포커스를 받을지 여부
- state_enabled: 컨트롤을 사용할 수 있는지 여부
- state_checkable: 컨트롤을 선택할 수 있는지 여부, 예: 체크박스
- state_checked: 컨트롤이 선택되었는지 여부
- state_selected: 컨트롤이 선택되었는지 여부 스크롤 휠이 있는 경우
- state_pressed: 컨트롤이 눌렸는지 여부
- state_active: 컨트롤이 활성화되어 있는지 여부, 예: SlidingTab
- state_single: 컨트롤에 여러 하위 컨트롤이 포함되어 있는 경우 하나의 하위 컨트롤만 표시
- state_first: 컨트롤에 여러 하위 컨트롤이 포함된 경우 첫 번째 하위 컨트롤이 표시된 상태인지 확인
- state_middle: 컨트롤에 여러 하위 컨트롤이 포함된 경우 가운데 자식 컨트롤이 있는지 확인 컨트롤이 표시된 상태입니다
- state_last: 컨트롤에 여러 하위 컨트롤 컨트롤이 포함되어 있습니다. 마지막 하위 컨트롤이 표시된 상태인지 확인하세요
사용 예:
그런 다음 간단한 둥근 버튼을 작성해 보겠습니다!
렌더링 실행:
코드 구현:
그런 다음 먼저 ShapeDrawable을 사용하여 서로 다른 색상으로 두 개의 둥근 직사각형을 그립니다.
shape_btn_normal.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#DD788A"/> <corners android:radius="5dp"/> <padding android:top="2dp" android:bottom="2dp"/> </shape>
다음을 작성해 보겠습니다. 선택자 : selctor_btn.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/shape_btn_pressed"/> <item android:drawable="@drawable/shape_btn_normal"/> </selector>
그런 다음 android:Background="../style/images/selctor_btn" 버튼을 설정하면 끝입니다~ 필요에 따라 직사각형, 타원, 원형 등으로 변경할 수 있습니다!
이 섹션 요약:
자, Android의 13가지 다양한 Drawable 유형에 대한 설명을 마쳤습니다. 물론 이것은 단지 기본에 불과합니다. 개발 중에는 다양한 고급 용도가 있어야 하며 이를 확장하는 것은 모두의 몫입니다. 다음은 모두를 위한 가이드입니다.
글쎄요, 시간관계상 위 예시들을 하나씩 시도하다보니 최종 데모가 엉망이 되었네요. 자료가 필요하신 분들은 올려주시고 필요하시면 직접 다운로드해주세요: DrawableDemo.zip 그럼 감사합니다~ 행복한 주말 보내세요
