Android中原生Progress几种常用的风格

相信大家在开发中或多或少会用到一些进度条,但很多时候我们都会自定义一些进度条,或者使用第三方框架,比如SmartRefreshLayout等,但Android原生的进度条的功能也很强大,Android进度条有4种风格可以使用。

Android进度条有4种风格可以使用。

  • 默认值是progressBarStyle。
  • 设置成progressBarStyleSmall后,图标变小。
  • 设置成progressBarStyleLarge后,图标变大
  • 设置成progressBarStyleHorizontal后,变成横向长方形。

自定义圆形进度条ProgressBar的一般有三种方式:

一、通过动画实现

定义res/anim/loading_anim.xml如下:
<?xml version="1.0"encoding="utf-8"?>
<animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f0"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f1"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f2"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f3"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f4"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f5"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f6"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f7"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f8"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f9"/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f10"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f11"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f12"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f13"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f14" />
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f15"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f16"
/>
<item android:duration="150" android:drawable="@drawable/loading_blue_16_f17"
/>
</animation-list>
在layout文件中引用如下:
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="20dip"
android:layout_marginTop="20dip"
android:indeterminate="false"
android:indeterminateDrawable="@anim/loading_anim" />

二、通过自定义颜色实现

定义res/drawable/loading_color.xml如下:
<?xml version="1.0" encoding="utf-8"?>
<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="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false"/>
    </shape>
</rotate>
在layout文件中引用如下:
<ProgressBar
    android:id="@+id/progressBar2"
    android:indeterminate="false"
    android:indeterminateDrawable="@drawable/loading_color"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"/>

三、使用一张图片进行自定义

定义res/drawable/loading_img.xml如下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:drawable="@drawable/exchange_loading"
            android:fromDegrees="0.0"
            android:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="360.0"/>
    </item>
</layer-list>
在layout文件中引用如下:
<ProgressBar
    android:id="@+id/progressBar3"
    android:indeterminate="false"
    android:indeterminateDrawable="@drawable/lodaing_img"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
/>

另外,在平时我经常用的一个第三方框架就是SmartRefreshLayout

SmartRefreshLayout是一个“聪明”或者说“智能”的下拉刷新布局,由于它的“智能”,它不只是如其它的刷新布局所说的支持所有的View,还支持多层嵌套的视图结构。
除了“聪明”之外,SmartRefreshLayout还具备了很多的特点。SmartRefreshLayout 没有使用到:序列化、反序列化、JNI、反射,所以并不需要添加混淆过滤代码
它继承自ViewGroup 而不是其它的FrameLayout或者LinearLayout,提高了性能。
github网址: https://github.com/scwang90/SmartRefreshLayout

使用姿势

1.在 buld.gradle 中添加依赖

compile 'com.android.support:appcompat-v7:25.3.1'//版本随意
compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.3-alpha-6'
compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.0.3-alpha-6'//没有使用特殊Header,可以不加这行

2.在XML布局文件中添加 SmartRefreshLayout

<?xml version="1.0" encoding="utf-8"?>
<com.scwang.smartrefresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:background="#fff" />
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

3.在 Activity 或者 Fragment 中添加代码

RefreshLayout refreshLayout = (RefreshLayout)findViewById(R.id.refreshLayout);
refreshLayout.setOnRefreshListener(new OnRefreshListener() {
    @Override
    public void onRefresh(RefreshLayout refreshlayout) {
        refreshlayout.finishRefresh(2000);
    }
});
refreshLayout.setOnLoadmoreListener(new OnLoadmoreListener() {
    @Override
    public void onLoadmore(RefreshLayout refreshlayout) {
        refreshlayout.finishLoadmore(2000);
    }
});

使用指定的 Header 和 Footer

1.方法一 全局设置

public class App extends Application {
    //static 代码段可以防止内存泄露
    static {
        //设置全局的Header构建器
        SmartRefreshLayout.setDefaultRefreshHeaderCreater(new DefaultRefreshHeaderCreater() {
                @Override
                public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
                    layout.setPrimaryColorsId(R.color.colorPrimary, android.R.color.white);//全局设置主题颜色
                    return new ClassicsHeader(context).setSpinnerStyle(SpinnerStyle.Translate);//指定为经典Header,默认是 贝塞尔雷达Header
                }
            });
        //设置全局的Footer构建器
        SmartRefreshLayout.setDefaultRefreshFooterCreater(new DefaultRefreshFooterCreater() {
                @Override
                public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
                    //指定为经典Footer,默认是 BallPulseFooter
                    return new ClassicsFooter(context).setSpinnerStyle(SpinnerStyle.Translate);
                }
            });
    }
}
   (注意:方法一 设置的Header和Footer的优先级是最低的,如果同时还使用了方法二、三,将会被其它方法取代)

2.方法二 XML布局文件指定

<com.scwang.smartrefresh.layout.SmartRefreshLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#444444"
    app:srlPrimaryColor="#444444"
    app:srlAccentColor="@android:color/white"
    app:srlEnablePreviewInEditMode="true">
    <!--srlAccentColor srlPrimaryColor 将会改变 Header 和 Footer 的主题颜色-->
    <!--srlEnablePreviewInEditMode 可以开启和关闭预览功能-->
    <com.scwang.smartrefresh.layout.header.ClassicsHeader
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/padding_common"
        android:background="@android:color/white"
        android:text="@string/description_define_in_xml"/>
    <com.scwang.smartrefresh.layout.footer.ClassicsFooter
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
    (注意:方法二 XML设置的Header和Footer的优先级是中等的,会被方法三覆盖。)

3.方法三 Java代码设置

final RefreshLayout refreshLayout = (RefreshLayout) findViewById(R.id.refreshLayout);
//设置 Header 为 Material风格
refreshLayout.setRefreshHeader(new MaterialHeader(this).setShowBezierWave(true));
//设置 Footer 为 球脉冲
refreshLayout.setRefreshFooter(new BallPulseFooter(this).setSpinnerStyle(SpinnerStyle.Scale));

在无意中使用这个框架,感觉很爽,很智能,使用上基本上就是傻瓜式的搬运,不过想自己运用的更加丰富就需要对框架的源码进行解析

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,613评论 4 59
  • 此时此刻,我的室友在打电话,她的语言和语言中的情绪对我来说声声刺耳,她在跟她的母亲打电话,讨论给她买房子的事,我不...
    杜小妞365阅读 246评论 11 2
  • 烈日与我瞻乾坤 外公问我多少分 童谣伴我迎黎明 纸墨共我绘...
    触摸那片曙光阅读 270评论 0 0
  • 如果你是热情的太阳, 就会拥有温暖万物的力量。 鲜花对你展露笑脸, 绿树翘望你的方向, 小草偎依在你的脚旁, 小鸟...
    __天道酬勤__阅读 665评论 1 2