zoukankan      html  css  js  c++  java
  • android 自己定义水平和圆形progressbar 仅仅定义一些style就能够

    效果图:



    改动progressbar 让他满足自己的需求一般来说仅仅改动一下,progressbar的style就能够满足需求了:

    activity代码:只显示一个布局而已

    package com.example.testcustomprogressbar;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    
    public class MainActivity extends Activity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    	}
    }
    

    xml界面:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.testcustomprogressbar.MainActivity" >
    
        <ProgressBar
            android:id="@+id/my_customprogressbar1"
            style="@style/mycustom_progressbar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
    
        <ProgressBar
            android:id="@+id/my_customprogressbar2"
            style="@style/mycustom_progressbar2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/my_customprogressbar1"
            android:layout_below="@+id/my_customprogressbar1"
            android:layout_marginTop="26dp" />
    
        <ProgressBar
            android:id="@+id/my_customprogressbar3"
            style="@style/mycustom_progressbar3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/my_customprogressbar2"
            android:layout_below="@+id/my_customprogressbar2"
            android:layout_marginTop="26dp" />
        
         <ProgressBar
            android:id="@+id/my_customprogressbar4"
            style="@style/mycustom_progressbar_hor"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/my_customprogressbar3"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="22dp"
            android:max="100"
            android:progress="40"
            android:secondaryProgress="60" />
        
        <ProgressBar
            android:id="@+id/my_customprogressbar5"
            style="@style/mycustom_progressbar_hor2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/my_customprogressbar4"
            android:layout_below="@+id/my_customprogressbar4"
            android:layout_marginTop="26dp"
            android:max="100"
            android:progress="40"
            android:secondaryProgress="60" />
    
       
    
    </RelativeLayout>

    第一种圆形progressbar 只让一个图片旋转起来:

    style的代码:

     <style name="mycustom_progressbar1">
            <item name="android:indeterminateDrawable">@drawable/progressbar_ver_image</item>
            <item name="android:minHeight">30dp</item>
            <item name="android:minWidth">30dp</item>
            <item name="android:maxHeight">60dp</item>
            <item name="android:maxWidth">60dp</item>
        </style>

    progressbar_ver_image的代码:

    <?

    xml version="1.0" encoding="utf-8"?> <!-- 定义一个旋转的动画 ,图片是我们自己定义的--> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/resizeapi" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > </rotate>



    另外一种圆形progressbar 使用一个动画:

    style:

     <style name="mycustom_progressbar2">
            <item name="android:indeterminateDrawable">@drawable/progressbar_ver_animation</item>
            <item name="android:minHeight">60dp</item>
            <item name="android:minWidth">60dp</item>
            <item name="android:maxHeight">100dp</item>
            <item name="android:maxWidth">100dp</item>
        </style>

    progressbar_ver_animation的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <item
            android:drawable="@drawable/ok1"
            android:duration="250"/>
        <item
            android:drawable="@drawable/ok2"
            android:duration="250"/>
        <item
            android:drawable="@drawable/ok3"
            android:duration="250"/>
        <item
            android:drawable="@drawable/ok4"
            android:duration="250"/>
    
    </animation-list>


    第三种圆形progressbar 使用shape来构建drawable:

    <style name="mycustom_progressbar3">
            <item name="android:indeterminateDrawable">@drawable/progressbar_ver_shape</item>
            <item name="android:minHeight">60dp</item>
            <item name="android:minWidth">60dp</item>
            <item name="android:maxHeight">100dp</item>
            <item name="android:maxWidth">100dp</item>
        </style>

    progressbar_ver_shape的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- 定义一个旋转的动画 ,图片是我们自己定义的shape -->
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="8"
            android:useLevel="false" >
            <gradient
                android:centerColor="#FFFFFF"
                android:centerY="0.50"
                android:endColor="#1E90FF"
                android:startColor="#000000"
                android:type="sweep"
                android:useLevel="false" />
        </shape>
    
    </rotate>

    第四种: 横向progressbar 复制粘贴系统的style,然后改动:

    <?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>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffff0000"
                        android:centerColor="#ffff0000"
                        android:centerY="0.75"
                        android:endColor="#ffff0000"
                        android:angle="270"
                />
            </shape>
        </item>
       
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <shape>
                    <corners android:radius="5dip" />
                    <gradient
                            android:startColor="#800000ff"
                            android:centerColor="#800000ff"
                            android:centerY="0.75"
                            android:endColor="#800000ff"
                            android:angle="270"
                    />
                </shape>
            </clip>
        </item>
       
        <item android:id="@android:id/progress"
            >
            <clip >
               
                <shape>
                    <corners android:radius="5dip" />
                    <gradient
                            android:startColor="#ff00ff00"
                            android:centerColor="#ff00ff00"
                            android:centerY="0.75"
                            android:endColor="#ff00ff00"
                            android:angle="270"
                    />
                </shape>
            </clip>
        </item>
       
    </layer-list>

    这样直接在progressbar中引用该style就能够满足需求了,当然我们也能够把progressbar background progress secondprogress都分别定义成一个drawable,然后使用:

    background:

    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <corners android:radius="5dip" />
        <gradient
            android:angle="270"
            android:centerColor="#ffff0000"
            android:centerY="0.75"
            android:endColor="#ffff0000"
            android:startColor="#ffff0000" />
    </shape>

    progress:

    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <corners android:radius="5dip" />
    
        <gradient
            android:angle="270"
            android:centerColor="#ff00ff00"
            android:centerY="0.75"
            android:endColor="#ff00ff00"
            android:startColor="#ff00ff00" />
    
    </shape>

    secondprogress:

    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <corners android:radius="5dip" />
    
        <gradient
            android:angle="270"
            android:centerColor="#800000ff"
            android:centerY="0.75"
            android:endColor="#800000ff"
            android:startColor="#800000ff" />
    
    </shape>

    这个时候style中的代码就会清晰一点:

    <?

    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/progressbar_hor_bg"> </item> <item android:id="@android:id/secondaryProgress"> <clip android:drawable="@drawable/progressbar_hor_second_progress" > </clip> </item> <item android:id="@android:id/progress"> <clip android:drawable="@drawable/progressbar_hor_progress" > </clip> </item> <!-- progress 这个地方原作者写的是一个点9的图--> <!-- <item android:id="@android:id/progress"> <clip> <nine-patch android:src="@drawable/progress_patch_galy" /> </clip> </item> --> </layer-list>



    嘿嘿..最后,做人要厚道:神一般男人的原博主博文连接http://blog.csdn.net/mad1989/article/details/38042875


    对了,代码还是贴上来吧.总感觉在ide中直接看代码会更舒服一些:http://download.csdn.net/detail/u010399316/9000197


  • 相关阅读:
    NAT(网络地址转换)
    go从文件中读取json字符串并转换
    实现守护进程
    c++ uconcontext.h实现协程
    bzoj 1085骑士精神
    在线代码评测机
    基于时间轮的定时器
    内存管理(一)
    二叉树的先序中序后序(非递归)
    RDD操作
  • 原文地址:https://www.cnblogs.com/yfceshi/p/7183565.html
Copyright © 2011-2022 走看看