一个简单的android电池显示layout

最新推荐文章于 2019-08-06 23:58:40 发布

胡老哈

最新推荐文章于 2019-08-06 23:58:40 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Andriod基础

本文链接：https://blog.youkuaiyun.com/a102111/article/details/48231737

Andriod基础专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用自定义ProgressBar和ImageView在Android中创建一个显示电池电量和充电状态的布局。通过调整ProgressBar和ImageView的位置，实现电量比例的显示，同时通过覆盖的ImageView来表示充电情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思想：progressbar控制电量显示，再加上一个imageview覆盖再上层用于表示充电状态，右边加一个imageview表示电池头部

其实直接在view上自己画会更简单一些，同时也好控制各种位置，但这里暂时不这么做。

以下是layout部分：

自定义progressbar：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <nine-patch 
            android:src="@drawable/battery_empty_body"
            android:dither="true" />
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="0dp" />
                <solid android:color="#646463" />
            </shape>
        </clip>
    </item>
 
</layer-list>

这里背景图使用9.png，方便控制各种大小，不会出现形变啥的。

电池身体：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

	<ProgressBar 
		android:id="@+id/pgb_battery"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:max="100"
		android:progress="50"
		android:progressDrawable="@drawable/progressbar_battery"
		style="?android:attr/progressBarStyleHorizontal" />
	 
	<ImageView 
		android:id="@+id/img_battery_charing"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="@drawable/battery_charging"
		android:contentDescription="@string/nothing" />

</RelativeLayout>

这里用一个imageview作为充电标志。没有充电时，可以设置为invisible。

之所有所有的都用fillparent是因为方便控制放大缩小。

完整电池：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

	<ImageView 
		android:id="@+id/img_battery_head"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent"
		android:background="@drawable/battery_empty_head"
		android:contentDescription="@string/nothing"
		android:layout_alignParentRight="true" />
    	
	<include
	    android:id="@+id/layout_battery_inner"
	    android:layout_toLeftOf="@id/img_battery_head"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    layout="@layout/layout_battery_body" />

</RelativeLayout>

使用：

	<include
	    android:id="@+id/layout_battery"
	    android:layout_width="30dp"
	    android:layout_height="15dp"
	    layout="@layout/layout_battery" />

使用时指定一下大小即可。如果不指定大小，会出现全屏。这个待解决。

效果类似这样：