美文网首页
Android中原生Progress几种常用的风格

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

作者: 黑石ZB | 来源:发表于2017-08-04 19:54 被阅读0次

    相信大家在开发中或多或少会用到一些进度条,但很多时候我们都会自定义一些进度条,或者使用第三方框架,比如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中原生Progress几种常用的风格

          本文链接:https://www.haomeiwen.com/subject/qusblxtx.html