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));

在無意中使用這個框架,感覺很爽,很智能,使用上基本上就是傻瓜式的搬運,不過想自己運用的更加豐富就需要對框架的源碼進行解析

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,523評論 25贊 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,252評論 4贊 61
  • 此時此刻，我的室友在打電話，她的語言和語言中的情緒對我來說聲聲刺耳，她在跟她的母親打電話，討論給她買房子的事，我不...
    杜小妞365閱讀 278評論 11贊 2
  • 烈日與我瞻乾坤 外公問我多少分 童謠伴我迎黎明 紙墨共我繪...
    觸摸那片曙光閱讀 305評論 0贊 0
  • 如果你是熱情的太陽， 就會擁有溫暖萬物的力量。 鮮花對你展露笑臉， 綠樹翹望你的方向， 小草偎依在你的腳旁， 小鳥...
    __天道酬勤__閱讀 716評論 1贊 2