检查更新和下载的自定义弹出框

要做一个下载更新apk的功能，开始是从网上找的代码，用的原生的dialog和progress，很丑，后来用从网上找的自定义progress，但是无效，先把那不好调整样式的网上摘录贴上来：

在drawable文件夹中建立如下旋转动画文件

<?xml version="1.0" encoding="utf-8"?>

<animated-rotate xmlns: Android ="http://schemas.android.com/apk/res/android"    

    android:drawable="@drawable/loading1"    

    android:pivotX="50%"    

    android:pivotY="50%" />  

其中loading1即为您想用的图片

二 在布局文件中设置progressbar

 <ProgressBar

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

         android:indeterminateDrawable="@drawable/progressbg"

         android:indeterminateOnly="true"

         android:indeterminateBehavior="repeat"

    

       />

android 自定义水平的ProgressBar

先看效果图：

代码：

新建drawable

新建一个drawable/progressbarclor

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:id="@android:id/progress"

        android:drawable="@drawable/common_button_red"/>

</layer-list>

新建drawable/progresssape

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <corners android:radius="10dp" />

    <solid android:color="#ffffff" />

</shape>

布局：

<ProgressBar

                android:background="@drawable/progresssape"

                android:id="@+id/pb"

                android:layout_width="wrap_content"

                android:layout_height="10dp"

                android:layout_marginLeft="8dp"

                android:layout_marginRight="8dp"

                android:layout_weight="1"

                android:indeterminateOnly="false"

                android:max="100"

                android:progressDrawable="@drawable/progressbarclor" />

http://winwyf.blog.51cto.com/4561999/857867

Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子

很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如

ok，我们开始吧：

 

一）变换前背景

先来看看progressbar的属性：

1. <ProgressBar 
2.             android:id="@+id/progressBar" 
3.             style="?android:attr/progressBarStyleHorizontal" 
4.             android:layout_width="match_parent" 
5.             android:layout_height="wrap_content" 
6.             android:layout_margin="5dip" 
7.             android:layout_toRightOf="@+id/progressBarV" 
8.             android:indeterminate="false" 
9.             android:padding="2dip" 
10.             android:progress="50" /> 

根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml

1. <style name="Widget.ProgressBar.Horizontal"> 
2.         <item name="android:indeterminateOnly">false</item> 
3.         <item name="android:progressDrawable">@android:drawable/progress_horizontal</item> 
4.         <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> 
5.         <item name="android:minHeight">20dip</item> 
6.         <item name="android:maxHeight">20dip</item> 
7.     </style> 

看到

<item   name = "android:progressDrawable" > @android:drawable/progress_horizontal </item>  

木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
2.      
3.     <item android:id="@android:id/background"> 
4.         <shape> 
5.             <corners android:radius="5dip" /> 
6.             <gradient 
7.                     android:startColor="#ff9d9e9d" 
8.                     android:centerColor="#ff5a5d5a" 
9.                     android:centerY="0.75" 
10.                     android:endColor="#ff747674" 
11.                     android:angle="270" 
12.             /> 
13.         </shape> 
14.     </item> 
15.      
16.     <item android:id="@android:id/secondaryProgress"> 
17.         <clip> 
18.             <shape> 
19.                 <corners android:radius="5dip" /> 
20.                 <gradient 
21.                         android:startColor="#80ffd300" 
22.                         android:centerColor="#80ffb600" 
23.                         android:centerY="0.75" 
24.                         android:endColor="#a0ffcb00" 
25.                         android:angle="270" 
26.                 /> 
27.             </shape> 
28.         </clip> 
29.     </item> 
30.      
31.     <item android:id="@android:id/progress"> 
32.         <clip> 
33.             <shape> 
34.                 <corners android:radius="5dip" /> 
35.                 <gradient 
36.                         android:startColor="#ffffd300" 
37.                         android:centerColor="#ffffb600" 
38.                         android:centerY="0.75" 
39.                         android:endColor="#ffffcb00" 
40.                         android:angle="270" 
41.                 /> 
42.             </shape> 
43.         </clip> 
44.     </item> 
45.      
46. </layer-list> 

 看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有

把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等

那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
3.      
4.     <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" /> 
5.      
6. </layer-list> 

在android:drawable中指定你处理好的图片

然后回到布局中

1. <ProgressBar 
2.             android:id="@+id/progressBar1" 
3.             android:layout_width="match_parent" 
4.             android:layout_height="wrap_content" 
5.             android:layout_below="@+id/progressBar" 
6.             android:layout_margin="5dip" 
7.             android:layout_toRightOf="@+id/progressBarV" 
8.             android:background="@drawable/progress_bg" 
9.             android:indeterminate="false" 
10.             android:indeterminateOnly="false" 
11.             android:maxHeight="20dip" 
12.             android:minHeight="20dip" 
13.             android:padding="2dip" 
14.             android:progress="50" 
15.             android:progressDrawable="@drawable/progress_horizontal1" /> 

android:background="@drawable/progress_bg"指定背景

android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的 progress_horizontal1

ok，搞定

 注意看，四角还是有圆倒角的，貌似是系统自己加上去的，总之我的图片里面是没有做这个倒角处理的

 

二）纵向进度条

还是得从源码入手，看回 progress_horizontal.xml

1. <item android:id="@android:id/progress"> 
2.         <clip> 
3.             <shape> 
4.                 <corners android:radius="5dip" /> 
5.                 <gradient 
6.                         android:startColor="#ffffd300" 
7.                         android:centerColor="#ffffb600" 
8.                         android:centerY="0.75" 
9.                         android:endColor="#ffffcb00" 
10.                         android:angle="270" 
11.                 /> 
12.             </shape> 
13.         </clip> 
14.     </item> 

为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义

1. <?xml version="1.0" encoding="utf-8"?> 
2. <clip 
3.     xmlns:android="http://schemas.android.com/apk/res/android" 
4.     android:drawable="@drawable/drawable_resource" 
5.     android:clipOrientation=["horizontal" | "vertical"] 
6.     android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | 
7.                      "fill_vertical" | "center_horizontal" | "fill_horizontal" | 
8.                      "center" | "fill" | "clip_vertical" | "clip_horizontal"] /> 

android:clipOrientation有两个属性，默认为horizontal

android:gravity有两个属性，默认为left

那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码 progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX

1. <item android:id="@android:id/progress"> 
2.         <clip 
3.             android:clipOrientation="vertical" 
4.             android:gravity = "bottom"> 
5.             <shape> 
6.                 <corners android:radius="5dip" /> 
7.                 <gradient 
8.                         android:startColor="#ffffd300" 
9.                         android:centerColor="#ffffb600" 
10.                         android:centerX="0.75" 
11.                         android:endColor="#ffffcb00" 
12.                         android:angle="90" 
13.                 /> 
14.             </shape> 
15.         </clip> 
16.     </item> 

布局中android:progressDrawable="@drawable/progress_vertical"

ok，搞定，就是这么简单：

 

 

三）弧形bar

这个也许算不上是进度条，用的也不多，最多也就仪表盘用用，不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的，看代码

1. public class Arcs extends View {   
2.     private Paint mArcPaint;   
3.     private Paint mArcBGPaint;   
4.    
5.     private RectF mOval;   
6.     private float mSweep = 0;   
7.     private int mSpeedMax = 200; 
8.     private int mThreshold = 100; 
9.     private int mIncSpeedValue = 0; 
10.     private int mCurrentSpeedValue = 0;  
11.     private float mCenterX;   
12.     private float mCenterY;   
13.     private float mSpeedArcWidth;   
14.   
15.     private final float SPEED_VALUE_INC = 2;  
16.   
17.     ..........  
18.   
19. }  

首先是一堆成员变量，两个Paint用来画圆弧一个前景一个背景，一个RectF圆弧就画在上面，然后是一些控制参数比如sweep圆弧扫过的角度，xy坐标等等

 

1. mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
2.         mArcPaint.setStyle(Paint.Style.STROKE); 
3.         mArcPaint.setStrokeWidth(mSpeedArcWidth); 
4. //        mPaint.setStrokeCap(Paint.Cap.ROUND); 
5.         mArcPaint.setColor(0xff81ccd6); 
6.         BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER); 
7.         mArcPaint.setMaskFilter(mBlur); 
8.          
9.         mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
10.         mArcBGPaint.setStyle(Paint.Style.STROKE); 
11.         mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8); 
12.         mArcBGPaint.setColor(0xff171717); 
13.          
14.         BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER); 
15.       mArcBGPaint.setMaskFilter(mBGBlur); 

设置两个画笔，颜色，宽度，样式等等， BlurMaskFilter 笔是边缘模糊效果，有几种，可以自己尝试

 

1. @Override 
2. protected void onSizeChanged(int w, int h, int ow, int oh) { 
3.         super.onSizeChanged(w, h, ow, oh); 
4.         Log.i("onSizeChanged w", w+""); 
5.         Log.i("onSizeChanged h", h+""); 
6.         mCenterX = w * 0.5f;  // remember the center of the screen 
7.         mCenterY = h - mSpeedArcWidth; 
8.         mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2); 
9.     } 

重写父类View的onSizeChanged，为的是自己根据布局中的大小做居中处理

 

1. @Override   
2.     protected void onDraw(Canvas canvas) {  
3.         drawSpeed(canvas);  
4.         calcSpeed();  
5.     }  
6.   
7. private void drawSpeed(Canvas canvas) {  
8.         canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);  
9.   
10.         mSweep = (float) mIncSpeedValue / mSpeedMax * 180;  
11.         if (mIncSpeedValue > mThreshold) {  
12.             mArcPaint.setColor(0xFFFF0000);  
13.         }  
14.         else {  
15.             mArcPaint.setColor(0xFF00B0F0);  
16.         }  
17.           
18.         canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);          
19.     }  
20.   
21. private void calcSpeed() {  
22.         if (mIncSpeedValue < mCurrentSpeedValue) {  
23.             mIncSpeedValue += SPEED_VALUE_INC;  
24.             if (mIncSpeedValue > mCurrentSpeedValue) {  
25.                 mIncSpeedValue = mCurrentSpeedValue;  
26.             }  
27.             invalidate();  
28.         }  
29.         else if (mIncSpeedValue > mCurrentSpeedValue) {  
30.             mIncSpeedValue -= SPEED_VALUE_INC;  
31.             if (mIncSpeedValue < mCurrentSpeedValue) {  
32.                 mIncSpeedValue = mCurrentSpeedValue;  
33.             }  
34.             invalidate();  
35.         }  
36.     }  

重写onDraw以便重绘canvas

drawSpeed里面

通过计算mSweep = (float) mIncSpeedValue / mSpeedMax * 180;

然后canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);

会根据mSweep的变化，画出相应长度的弧度来

根据与阈值的对比，还可以设定不同的 颜色：

 

if (mIncSpeedValue > mThreshold) {

mArcPaint.setColor(0xFFFF0000);

}

else {

mArcPaint.setColor(0xFF00B0F0);

}

 

 

calcSpeed通过一个步进来控制增量或减量，以使弧度自然过渡，减少跳跃

ok，大功告成

以上是网上摘录的代码和说明，但是对我这个要自定义的功能修改色值和样式无效，试了好几种方法也并没有达到自己要的效果，后来重新自己定义了布局和样式，现把样式贴上来

/**
* 显示软件更新对话框
*/
private void showNoticeDialog() {
// 构造对话框
LayoutInflater iLayoutInflater = LayoutInflater.from(mContext);
View view = (View) iLayoutInflater.inflate(R.layout.dialog_check_updata, null);
btn_confirm = (Button) view.findViewById(R.id.btn_confirm);
btn_cancel = (Button) view.findViewById(R.id.btn_cancel);
AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
final Dialog d = builder.setView(view).create();
btn_confirm.setOnClickListener(new android.view.View.OnClickListener() {


@Override
public void onClick(View v) {
d.dismiss();
showDownloadDialog();
}
});
btn_cancel.setOnClickListener(new android.view.View.OnClickListener() {


@Override
public void onClick(View v) {
d.dismiss();
}
});
d.show();
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(d.getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = 400;
d.getWindow().setAttributes(lp);
}


/**
* 显示软件下载对话框
*/
private void showDownloadDialog() {
// 构造软件下载对话框
// 构造软件下载对话框


AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
// UserDialog.Builder builder = new UserDialog.Builder(mContext);
// builder.setTitle(R.string.soft_updating);
// 给下载对话框增加进度条
final LayoutInflater inflater = LayoutInflater.from(mContext);
View v = inflater.inflate(R.layout.softupdate_progress, null);
mProgress = (ProgressBar) v.findViewById(R.id.update_progress);
mProgressPercent = (TextView) v.findViewById(R.id.check_update_percent);
mCancle = (TextView) v.findViewById(R.id.check_update_cancel);
builder.setView(v);
// 取消更新
mCancle.setOnClickListener(new android.view.View.OnClickListener() {


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
cancelUpdate = true;
}
});
mDownloadDialog = builder.create();
mDownloadDialog.show();
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(mDownloadDialog.getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
mDownloadDialog.getWindow().setAttributes(lp);
// 现在文件
downloadApk();

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/pad_height_112"
    android:background="@drawable/corners_checkupdata"
    android:layout_gravity="center"
    android:orientation="vertical" >
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_marginTop="@dimen/pad_height_25"
        android:layout_marginBottom="@dimen/pad_height_20"
        android:text="发现新版本,是否立即更新？"
        android:textSize="16sp"
        />
    <LinearLayout 
        android:layout_marginLeft="@dimen/pad_height_65"
        android:layout_marginRight="@dimen/pad_height_65"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/btn_confirm"
            android:layout_height="@dimen/pad_height_28"
            android:layout_width="0dp"
            android:layout_weight="2"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@drawable/corners_checkupdata_confirm"
            android:text="立即更新"
            />
        <View 
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="1"
            />
        <Button 
            android:id="@+id/btn_cancel"
            android:layout_height="@dimen/pad_height_28"
            android:layout_width="0dp"
            android:layout_weight="2"
            android:textSize="14sp"
            android:textColor="@color/color_red"
            android:background="@drawable/corners_checkupdata_cancel"
            android:text="稍后更新"
            />
    </LinearLayout>


</LinearLayout>

色值文件

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <stroke android:color="@color/color_red"
        android:width="1px"
        />    
    <corners 
                android:bottomRightRadius="@dimen/pad_height_4"   
                android:bottomLeftRadius="@dimen/pad_height_4"/>    
</shape>  

下载进度的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/pad_height_36"
       android:paddingRight="@dimen/pad_height_36"
       android:paddingBottom="@dimen/pad_height_36"
android:orientation="vertical">
<TextView
       android:id="@+id/check_update_title"
         android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/soft_updating"
        android:textSize="@dimen/pad_text_size_16"
       android:textColor="#333"
       android:layout_marginRight="@dimen/pad_height_36"
       android:layout_marginLeft="@dimen/pad_height_36"
       android:layout_marginBottom="@dimen/pad_height_20"
       android:layout_marginTop="@dimen/pad_height_25"
        android:gravity="center"
        />
<FrameLayout 
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
 <ProgressBar
     android:id="@+id/update_progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/progress_horizontal11"
         style="?android:attr/progressBarStyleHorizontal"  
        />
   <TextView
       android:id="@+id/check_update_percent"
         android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="50%"
        android:gravity="center"
        />
 </FrameLayout>
 <TextView
       android:id="@+id/check_update_cancel"
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/soft_update_cancel"
        android:textSize="@dimen/pad_text_size_12"
       android:textColor="#d33d3e"
       android:background="@drawable/button_shape_bg"
       android:padding="@dimen/pad_height_12"
        android:layout_gravity="right"
       android:layout_marginTop="@dimen/pad_height_10"
        android:gravity="center"
        />
</LinearLayout>

色值和样式文件

<?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/progress_bar_bg">
    </item>
    <item android:id="@android:id/progress" >
        <clip android:drawable="@drawable/progress_bg2"  >
        </clip>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >
    <size android:width="660dp" android:height="100dp"/>
    <corners android:radius="100dp"/>
    <stroke android:width="1dp" android:color="#d33d3e" />
    <solid android:color="#d33d3e"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >
    <size android:width="660dp" android:height="100dp"/>
    <corners android:radius="50dp"/>
    <stroke android:width="1dp" android:color="#d33d3e" />
    <solid android:color="#ffffff"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >
    <size android:width="50dp" android:height="20dp"/>
    <corners android:radius="5dp"/>
    <stroke android:width="1dp" android:color="#d33d3e" />
</shape>