Skip to content

Latest commit

 

History

History
156 lines (139 loc) · 5.93 KB

自定义系统组件样式.md

File metadata and controls

156 lines (139 loc) · 5.93 KB

自定义系统组件样式

系统所有组件的样式声明都在data-res-values-styles.xml中，如果我们想要修改某个系统组件的样式只需要拷贝它的样式到本地后修改一下就行了。

  • 自定义ProgressBar样式

    1. 去系统的styles.xml中搜寻ProgressBar的样式

      <style name="Widget.ProgressBar">
	<item name="android:indeterminateOnly">true</item>
	<item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>
	<item name="android:indeterminateBehavior">repeat</item>
	<item name="android:indeterminateDuration">3500</item>
	<item name="android:minWidth">48dip</item>
	<item name="android:maxWidth">48dip</item>
	<item name="android:minHeight">48dip</item>
	<item name="android:maxHeight">48dip</item>
</style>

    2. 看到有一个属性引用了@android:drawable/progress_medium_white，内容如下

      <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
	android:drawable="@drawable/spinner_white_48"
	android:pivotX="50%"
	android:pivotY="50%"
	android:framesCount="12"
	android:frameDuration="100" /> 
//这样报错了，是因为framesCount和framesDuration这两个属性在高版本才有，在2.2没有所以把这两个属性给去了就可以了
这个文件定义了一个旋转动画的背景，它里面引用了drawable中的spinner_white_48这个图片

    3. 自定义一个样式继承Widget.ProgeessBar，然后重写android:indeterminateDrawable让它使用我们自己的资源

      <style name="my_pb_style" parent="@android:style/Widget.ProgressBar">
	<item name="android:indeterminateDrawable">@drawable/progress_medium_white</item>
</style> 
//那么这个drawable下的progress_medium_white.xml就是将系统的拷贝到我们自己的程序中

    4. 拷贝Android中的progress_medium_white.xml到自己的系统中

    5. 将里面的 android:drawable="@drawable/spinner_white_48"给修改成自己的图片

    6. 在xml文件中使用我们自定义的ProgressBar

      <ProgressBar
	style="@style/my_pb_style"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />

  • 自定义进度条

    1. 系统所有的组件都在D:\android-sdk-windows\platforms\android-8\data\res\values\styles.xml 
      <style name="Widget.ProgressBar.Horizontal">
	<item name="android:indeterminateOnly">false</item>
	<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
	<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
	<item name="android:minHeight">20dip</item>
	<item name="android:maxHeight">20dip</item>
</style>
    2. 引用了一个drawable资源@android:drawable/progress_horizontal，打开后内容如下 
      Layer-list代表的是一个图层的列表
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
	<item android:id="@android:id/background"> //背景,这里它是通过图形资源shape的方式定义的背景
		<shape>
			<corners android:radius="5dip" />
			<gradient
					android:startColor="#ff9d9e9d"
					android:centerColor="#ff5a5d5a"
					android:centerY="0.75"
					android:endColor="#ff747674"
					android:angle="270"
			/>
		</shape>
	</item>
 
	<item android:id="@android:id/secondaryProgress">
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient
						android:startColor="#80ffd300"
						android:centerColor="#80ffb600"
						android:centerY="0.75"
						android:endColor="#a0ffcb00"
						android:angle="270"
				/>
			</shape>
		</clip>
	</item>
 
	<item android:id="@android:id/progress"> //进度
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient
						android:startColor="#ffffd300"
						android:centerColor="#ffffb600"
						android:centerY="0.75"
						android:endColor="#ffffcb00"
						android:angle="270"
				/>
			</shape>
		</clip>
	</item>
 
</layer-list>
      
 3. 自定义一个样式继承系统的Widget.ProgressBar.Horizontal，然后重写android:progressDrawable属性，让其指向我们的样式
 	```xml
 	<style name="MediaController_SeekBar" parent="android:Widget.SeekBar">
 		<item name="android:progressDrawable">@drawable/scrubber_progress_horizontal_holo_dark</item>
 		<item name="android:indeterminateDrawable">@drawable/scrubber_progress_horizontal_holo_dark</item>
 		<item name="android:minHeight">13dip</item>
 		<item name="android:maxHeight">13dip</item>
 		<item name="android:thumb">@drawable/scrubber_control_selector_holo</item>//拖动的图标
 		<item name="android:thumbOffset">16dip</item>//保证滑块中心和进度条首尾两端的中心点是一致的
 		<item name="android:paddingLeft">16dip</item>//保证滑块显示全部，没有它滑块在首尾两端只会显示一半，左一半、右一半
 		<item name="android:paddingRight">16dip</item>//同上，控制右边的滑块能全部显示
 	</style>
 	```
  
 4. scrubber_progress_horizontal_holo_dark.xml变成我们自己的图片
 	```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" android:drawable="@drawable/security_progress_bg">//好看的图片
 		</item>
 		<item android:id="@android:id/secondaryProgress" android:drawable="@drawable/security_progress_bg">
 			
 		</item>
 		<item android:id="@android:id/progress" android:drawable="@drawable/security_progress">//好看的图片
 			
 		</item>
 	</layer-list>
 	```
 	
 5. SeekBar使用自定义样式
 	```xml
 	<SeekBar
 		android:id="@+id/mediacontroller_seekbar"
 		style="@style/MediaController_SeekBar"
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
 		android:layout_centerVertical="true"
 		android:focusable="true"
 		android:max="1000" />
 	```