Android-customize the scroll bar and android-scroll bar

Android-customize the scroll bar and android-scroll bar

1. Case studies

2. Prepare materials
                                            progress1.png(78*78)              progress2.png(78*78)
3. Principles
Use an image as the background image of the ProgressBar (Generally, light colors are used.). The other is the image of the scroll bar (Generally, images with deep colors are used.). The progress is: The Scrolling Image is gradually displayed, and the background image is gradually hidden to achieve the above effect.
4. Inspired by the source code provided by the Android Control
4.1 The scroll bar with progress by default, as shown in figure
1     <ProgressBar2     android:id="@+id/progressBar2"3    style="@android:style/Widget.ProgressBar.Horizontal"4     android:layout_width="268dp"5     android:layout_height="wrap_content"6     android:progress="45" /> 
Note: The key is that the style attribute is working.
4.2 locate the position defined by the style
Place the cursor over the style property value, press Ctrl, and a hyperlink appears. Click the hyperlink to jump to the style definition position.
The style definition is as follows:
Key Research:
Android: progressDrawable:Scroll bar style
@ Android: drawable/progress_horizontal:Style definition file
Search for android-sdk-windows \ platforms \ android-14 \ data \ resProgress_horizontal.xmlFile. The search result is as follows:
Open the progress_horizontal.xml file with the following content:
 1 <layer-listxmlns:android="http://schemas.android.com/apk/res/android">    2     <itemandroid:id="@android:id/background"> 3         <shape> 4             <cornersandroid:radius="5dip"/> 5             <gradient 6                     android:startColor="#ff9d9e9d" 7                     android:centerColor="#ff5a5d5a" 8                     android:centerY="0.75" 9                     android:endColor="#ff747674"10                     android:angle="270"11             />12         </shape>13     </item>   14     <itemandroid:id="@android:id/secondaryProgress">15         <clip>16             <shape>17                 <cornersandroid:radius="5dip"/>18                 <gradient19                         android:startColor="#80ffd300"20                         android:centerColor="#80ffb600"21                         android:centerY="0.75"22                         android:endColor="#a0ffcb00"23                         android:angle="270"24                 />25             </shape>26         </clip>27     </item>   28     <itemandroid:id="@android:id/progress">29         <clip>30             <shape>31                 <cornersandroid:radius="5dip"/>32                 <gradient33                         android:startColor="#ffffd300"34                         android:centerColor="#ffffb600"35                         android:centerY="0.75"36                         android:endColor="#ffffcb00"37                         android:angle="270"38                 />39             </shape>40         </clip>41     </item>42 </layer-list>
 
Meaning:
<Item android: id = "@ android: id/background">:Defines the background style of the scroll bar.
<Item android: id = "@ android: id/secondaryProgress">:Style of the second scroll bar
<Item android: id = "@ android: id/progress">:Scroll bar style
Think: What if I want to do a vertical scroll bar?
The key is to modify the attributes of the clip element.
<Clip android: clipOrientation = "vertical" defines the scroll direction. vertical is the vertical direction. android: drawable = "@ drawable/progress1" defines the Scrolling Image. android: gravity = "bottom"> define the start position of the scroll </clip>
 
5. Define the Style File progress_vertical.xml
Progress_vertical.xmlThe file code is as follows:
 1 <?xmlversion="1.0"encoding="utf-8"?> 2 <layer-listxmlns:android="http://schemas.android.com/apk/res/android"> 3     <itemandroid:id="@android:id/progress"> 4         <clip 5             android:clipOrientation="vertical" 6             android:drawable="@drawable/progress1" 7             android:gravity="bottom"> 8         </clip> 9     </item>10 </layer-list>
 
6. apply custom styles
<Button android: id = "@ + id/btStart" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_marginTop = "150dp" android: text = "start"/> <ProgressBar android: id = "@ + id/pbPic" style = "@ android: style/Widget. progressBar. horizontal "android: layout_width =" 50dp "android: layout_height =" 68dp "android: background =" @ drawable/progress2 "android: max =" 100 "android: progress = "0" android: progres SDrawable = "@ drawable/progress_vertical"/> <! -- Apply this property --> <TextView android: id = "@ + id/txtProgress" android: layout_width = "wrap_content" android: layout_height = "wrap_content"/>
 
 
 
7. click the button to simulate the scroll effect.
Publicclass ProgressActivity extends Activity {ProgressBar pb = null; TextView txtProgress; Handler handler = new Handler (); @ Override publicvoid onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); System. out. println ("topic =" + getTheme () + ""); pb = (ProgressBar) findViewById (R. id. pbPic); Button btnStart = (Button) findViewById (R. id. btStart); // button txtProgress = (TextView) findViewById(R.id.txt Progress); // display the Progress btnStart. setOnClickListener (new OnClickListener () {// click the event publicvoid onClick (View v) {new Thread (new Runnable () {// create and start a Thread, run the simulation task publicvoid run () {for (inti = 0; I <100; I ++) {// loop 100 times try {handler. post (new Runnable () {// update the interface data publicvoid run () {pb. incrementProgressBy (1); // increase the progress of txtProgress. setText (pb. getProgress () + "%"); // display the progress of completion}); Thread. sleep (100);} catch (InterruptedException e ){}}}}). start ();}});}}