您的位置:首页 > Web前端 > CSS

自定义简单ProgressBar样式

2017-03-07 19:32 253 查看
该篇为学习笔记

记录学习中的困难,日后便于回顾熟练。

为了毕业找工作,决定基于环信的SDK,开发一个能发送多种消息类型的聊天应用。

第一步,想得有个欢迎界面,初始化界面。

由于android自带的style和我的应用主题不搭,决定自定义下style。

结果如下



Activity XML 文件中引用自定义的样式

<ProgressBar
style="@style/InitProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:id="@+id/progressBar"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true" />


在样式文件(style.xml)中加入自己的样式

<!-- 自定义样式的name属性用于引用,父亲是默认的style -->
<style name="InitProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal">
<!-- 最大高度50dp,最小高度10dp,进度值确定,Drawable样式文件引用 -->
<item name="android:maxHeight">50dp</item>
<item name="android:minHeight">10dp</item>
<item name="android:indeterminateOnly">false</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:progressDrawable">@drawable/init_progressbar</item>
</style>


在Drawable中新建自己的init_progressbar.xml

<?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="0dp"/>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"/>
</shape>
</item>
<!-- 第二进度条样式,用不怎么到直接设置成了和背景色一样的颜色,隐藏起来 -->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="0dp"/>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#CCCCCC"
android:startColor="#CCCCCC"/>
</shape>
</clip>
</item>
<!-- 第一进度条样式,我想修改的,修改成简单的灰色 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<!-- 圆角设置 -->
<corners android:radius="0dp"/>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#515151"
android:startColor="#515151"/>
</shape>
</clip>
</item>
</layer-list>


OK完成,继续。。。

$(".MathJax").remove();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android 界面