1.案例效果图

android-个性化进度条

2.准备素材

   android-个性化进度条

          android-个性化进度条                              android-个性化进度条

progress1.png(78*78)              progress2.png(78*78)

3.原理

採用一张图片作为ProgressBar的背景图片(一般採用颜色比較浅的)。

还有一张是滚动栏的图片(一般採用颜色比較深的图片)。进度在滚动是:滚动图片逐步显示。背景图片逐步隐藏,达到上面的效果。

4.灵感来自Android控件提供的源代码

4.1 默认带进度的滚动栏。例如以下图

    <ProgressBar
    android:
   style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="268dp"
    android:layout_height="wrap_content"
    android:progress="45" />

android-个性化进度条

注意:关键是style属性在起作用

4.2 找到样式定义的位置

     鼠标放在style属性值上。按下Ctrl键,出现超链接。点击超链接跳转到样式的定义位置

          android-个性化进度条

    样式定义的内容例如以下         

android-个性化进度条

重点研究:

android:progressDrawable:滚动栏的样式

@android:drawable/progress_horizontal:样式定义的文件

android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件。搜索结果例如以下:

    android-个性化进度条

打开progress_horizontal.xml文件。内容例如以下


释义:

     <item android:>:定义滚动栏的背景样式

     <item android:>:第二滚动栏的样式

    <item android:>:滚动栏的样式

思考:假设我想做垂直滚动栏。怎么办了?

关键在clip元素的属性上做改动

<clip
    android:clipOrientation
="vertical"    定义滚动的方向 vertical为垂直方向
    android:drawable="@drawable/progress1"  定义滚动的图片
    android:gravity="bottom" >  定义滚动的開始位置
</clip>

5.定义样式文件progress_vertical.xml

android-个性化进度条

progress_vertical.xml文件代码例如以下

6.应用自己定义的样式

   <Button
       android:
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="150dp"
       android:text="開始"/>
 
   <ProgressBar
       android:
       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:progressDrawable="@drawable/progress_vertical"/><!-- 在此属性上应用 -->
 
   <TextView
       android:
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

7.点击button模拟滚动的效果

publicclass ProgressActivity extends Activity {     
     ProgressBar pb =null;
     TextView txtProgress;
     Handler handler =new Handler();
     @Override
     publicvoid onCreate(BundlesavedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
          System.out.println("主题=" + getTheme() + "");
          pb = (ProgressBar) findViewById(R.id.pbPic);


 btnStart.setOnClickListener(new OnClickListener() { publicvoid onClick(Viewv) {

 new Thread(new Runnable() { publicvoid run() { for (inti = 0; i < 100;i++) {//循环100遍 try { handler.post(new Runnable() { //更新界面的数据 publicvoid run() { pb.incrementProgressBy(1);//添加进度



相关文章:

  • 2022-01-04
  • 2022-12-23
  • 2021-05-18
  • 2021-11-22
  • 2021-11-22
  • 2021-11-22
  • 2021-04-09
猜你喜欢
  • 2021-11-22
  • 2021-11-09
  • 2022-12-23
  • 2021-11-22
  • 2022-01-05
  • 2021-11-02
相关资源
相似解决方案