自定义ProgressBar(长)
博客专区 > lsy999 的博客 > 博客详情
自定义ProgressBar(长)
lsy999 发表于1年前
自定义ProgressBar(长)
  • 发表于 1年前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 如果有帮助到您的话 请关注我http://t.xiaomiquan.com/VjiIyVb里面有更多。

首先在布局上

<RelativeLayout
    android:layout_below="@id/just_used_to_locate_04"
    android:layout_marginLeft="16.0dip"
    android:layout_marginRight="16.0dip"
    android:layout_marginTop="5dp"
    android:layout_toRightOf="@+id/cim_xinix"
    android:layout_width="wrap_content"
    android:layout_height="30dp">
    <ProgressBar
        android:id="@+id/gradient_progress"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:progress="60"
        android:progressDrawable="@drawable/my_xinxi_progress"
        android:indeterminateDuration="10"
        />

    <ImageView
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:background="@drawable/redbag_img_minitree"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="6/10"
        android:textColor="#ffffff"
        />
</RelativeLayout>

在drawable下布局两个

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="20dp" />
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
            <gradient
                android:angle="270"
                android:centerColor="#C55C18"
                android:centerY="0.75"
                android:endColor="#C55C18"
                android:startColor="#C55C18" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="20dp" />
                <stroke
                    android:width="2dp"
                    android:color="#ffffff" />
                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>

            <scale android:scaleWidth="100%"
                android:drawable="@drawable/progressview_xinxi"   />
        </clip>
    </item>

</layer-list>
效果图如上
progressview_xinxi.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <stroke
        android:width="2dp"
        android:color="#00000000" />
    <stroke
        android:width="4dp"/>
    <solid android:color="#00000000"/>
    <solid android:color="#F55c18"/>
    <gradient
        android:angle="0"
        android:centerY="0.75"
        android:endColor="#ff3e24"
        android:startColor="#ffcf23"/>

</shape>

然后在mainActivity里面加上一句

ProgressBar gradient_progress = (ProgressBar) findViewById(R.id.gradient_progress);
ObjectAnimator
        .ofInt(gradient_progress, "progress", 0, 60)
        .setDuration(500)
        .start();

就这样 这个动态的长形出来了。

shape的定义

android:shape=["rectangle"|"oval"|"line"|"ring"]

shape的 形状,默认为矩形,可以设置为矩形(rectangle), 、椭圆形(oval)、线性形状(line)、环形(ring)

下面的属性只有在android:shape=”ring时可用:
android:innerRadius 尺寸,内环的半径。
android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,

  • solid
    实心,填充的意思
    android:color指定填充的颜色

  • gradient
    渐变
    android:startColor 开始的颜色
    android:endColor 渐变结束的颜色
    android:angle 渐变角度,必须为45的整数倍,当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上
    android:type=”linear”,即线性渐变,可以指定渐变为径向渐变,android:type=”radial”,径向渐变需要指定半径android:gradientRadius=”50”

  • stroke
    描边缘
    android:width=”2dp” 描边的宽度
    android:color 描边的颜色
    我们还可以把描边弄成虚线的形式,设置方式为:android:dashWidth=”5dp” android:dashGap=”3dp”
    其中android:dashWidth表示’-‘这样一个横线的宽度,android:dashGap表示之间隔开的距离。

  • corners
    拐角,radius属性为半径,android:radius为角的弧度,值越大角越圆。

  • padding:间隔

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:startColor="#ff8c00"
                android:endColor="#ff8c00"
                android:angle="270"/>
            <stroke
                android:width="0dp"
                android:color="#dcdcdc">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"></padding>
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <gradient
                android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270">
            </gradient>
            <stroke
                android:width="0dp"
                android:color="#dcdcdc">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp">
            </padding>
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ff9677"
                android:endColor="#ff9d77"
                android:angle="270">
            </gradient>
            <stroke
                android:width="0dp"
                android:color="#fad3cf">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp">
            </padding>
        </shape>
    </item>
</selector>
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 76
码字总数 24285
×
lsy999
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: