Loading

几种网络加载的过渡(更新MaterialProgressBar)

自定义圆形ProgressBar

1、在drawable文件夹下新建:progressbar_circle_1.xml,如下:

1 <?xml version="1.0" encoding="utf-8"?>
2 <rotate xmlns:android="http://schemas.android.com/apk/res/android" 
3     android:drawable="@drawable/publicloading"   
4     android:fromDegrees="0"  
5     android:pivotX="50%"  
6     android:pivotY="50%"  
7     android:toDegrees="360" > 
8     >
9 </rotate

rotate定义了一张图片的选择效果:

  fromDegrees 动画开始时的角度

  toDegrees     动画结束时物体的旋转角度,正代表顺时针,负代表逆时针

  pivotX    属性为动画相对于物体的X坐标的开始位置

  pivotY    属性为动画相对于物体的Y坐标的开始位置

2、在Style中定义mProgress_circle,如下:

1 <style name="mProgress_circle">  
2     <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>  
3     <item name="android:minWidth">25dp</item>  
4     <item name="android:minHeight">25dp</item>  
5     <item name="android:maxWidth">60dp</item>  
6     <item name="android:maxHeight">60dp</item>  
7 </style> 

3、在组件中引用,如下:

1     <ProgressBar  
2         android:id="@+id/progressBar2"  
3         style="@style/mProgress_circle"  
4         android:layout_gravity="center_vertical"  
5         android:layout_width="match_parent"  
6         android:indeterminateDuration="1200"  
7         android:layout_height="wrap_content" />  

 

自定义加载对话框Dialog

1、自定义loading_diolog.xml:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:id="@+id/dialog_view"  
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     android:orientation="vertical" 
 7     android:minHeight="100dp"
 8     android:minWidth="280dp"
 9     android:gravity="center"
10     android:padding="10dp"
11     android:background="@drawable/popupwindowstyle"
12     >
13     <ImageView 
14         android:id="@+id/img"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:src="@drawable/publicloading"
18         />
19     <TextView 
20         android:id="@+id/tipTextView"
21         android:layout_width="wrap_content"
22         android:layout_height="wrap_content"
23         android:layout_marginTop="10dp"
24         android:text="数据加载中...."
25         />
26 </LinearLayout>


2、对话框背景边框popuwindowstyle.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" >
 3     <gradient
 4         android:angle="270"
 5         android:centerColor="@color/background"
 6         android:endColor="@color/background"
 7         android:startColor="@color/background" />
 8  9     <stroke
10         android:width="1dp"
11         android:color="@color/font_gray" />
12     <corners android:radius="8dp" />
13 
14 </shape>

shape自定义圆角、虚线、渐变:

  corners  圆角

  gradient  渐变

  padding      内容离边界距离

  size    大小

  solid    填充颜色

  stroke   描边

3、自定义Dialog样式:

1 <!-- 自定义loading dialog -->  
2     <style name="loading_dialog" parent="android:style/Theme.Dialog">  
3         <item name="android:windowFrame">@null</item>  
4         <item name="android:windowNoTitle">true</item>   
5         <item name="android:windowBackground">@android:color/transparent</item> 
6         <item name="android:windowIsFloating">true</item>  
7         <item name="android:windowContentOverlay">@null</item>  
8     </style>

4、创建Dialog,传递参数Context、msg:

 1 /** 
 2      * 得到自定义的progressDialog 
 3      * @param context 
 4      * @param msg 
 5      * @return 
 6      */  
 7     public static Dialog createLoadingDialog(Context context, String msg) {  
 8   
 9         LayoutInflater inflater = LayoutInflater.from(context);  
10         View v = inflater.inflate(R.layout.loading_dialog, null);// 得到加载view  
11         LinearLayout layout = (LinearLayout) v.findViewById(R.id.dialog_view);// 加载布局  
12         // main.xml中的ImageView  
13         ImageView spaceshipImage = (ImageView) v.findViewById(R.id.img);  
14         TextView tipTextView = (TextView) v.findViewById(R.id.tipTextView);// 提示文字  
15         // 加载动画  
16         Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(  
17                 context, R.anim.loading_animation);  
18         // 使用ImageView显示动画  
19         spaceshipImage.startAnimation(hyperspaceJumpAnimation);  
20         tipTextView.setText(msg);// 设置加载信息  
21   
22         Dialog loadingDialog = new Dialog(context, R.style.loading_dialog);// 创建自定义样式dialog  
23   
24         loadingDialog.setCancelable(false);// 不可以用“返回键”取消  
25         loadingDialog.setContentView(layout, new LinearLayout.LayoutParams(  
26                 LinearLayout.LayoutParams.FILL_PARENT,  
27                 LinearLayout.LayoutParams.FILL_PARENT));// 设置布局  
28         return loadingDialog;  
29   
30     }

通过dialog.show()、dialog.dismiss()来显示、隐藏

原图:

类似的;

效果图一:

效果图二:

 

3、安卓5.0之后,官方progress就引入了一种新的风格,MaterialProgressBar

   Material design进度条:MaterialProgressBar

使用说明:

MaterialProgressBar其实并没有定义进度条本身,而是把自定义的Drawable设置到ProgressBar上。

比如,在ProgressBar上设置HorizontalIndeterminateProgressDrawable:

progressBar.setIndeterminateDrawable(new HorizontalIndeterminateProgressDrawable(this));

为了让你的ProgressBar在所有版本上都有正确的大小,你需要使用我们提供的style。其内部实现的技巧是用android:minHeight,android:maxHeight(and width)来控制Drawable的大小。

  • Widget.MaterialProgressBar.ProgressBar.Horizontal

  • Widget.MaterialProgressBar.ProgressBar

  • And more size and no-padding variants in styles.xml

比如,定义一个indeterminate horizontalProgressBar:

<ProgressBar
            android:id="@+id/indeterminate_horizontal_progress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:indeterminate="true"
android:visibility="visible"
style="@style/Widget.MaterialProgressBar.ProgressBar" />

别忘记创建和设置Drawable。

你还可以通过调用setShowTrack()和 setUseIntrinsicPadding()来自定义Drawable的表现。与着色有关的方法也是兼容了的 setTint(),setTintList()和 setTintMode()这些方法都可以直接使用。

更多例子的细节,可以参考样例项目中MainActivity的onCreate()方法 和 main_activity.xml 布局。


ProGuard

如果你使用了ProGuard,需要在ProGuard配置文件中添加如下的一行代码,这样ObjectAnimator才能正常工作。

-keep class me.zhanghai.android.materialprogressbar.** { *; }

项目主页:
https://github.com/DreaminginCodeZH/MaterialProgressBar

 

 

 

  

posted @ 2016-03-28 15:15  集君  阅读(1345)  评论(0编辑  收藏  举报