Android的进度UI自定义布局

问题描述：

我想自定义状态栏，以便它看起来像这样的图像：

I am trying to customize a status bar so it will look like this image:

不过，经过好几个小时我只有与背景我只需要（图2）状态栏：输入图像的描述在这里

However, after a good couple of hours all I have is a status bar with the background I need only (Image 2):

目前的code我是： XML布局：

The current code I have is: xml layout:

<ProgressBar
                android:id="@+id/pBarOverallStatus"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dip"
                android:layout_marginRight="10dip"
                android:layout_weight="94"
                android:indeterminateOnly="false"
                android:max="100"
                android:progressDrawable="@drawable/progress_bar_states" >
            </ProgressBar>

在progress_bar_states.xml：

The progress_bar_states.xml:

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

    <!-- <item android:id="@android:id/progress">
        <bitmap
            android:gravity="center"
            android:src="@drawable/progressbar_progressing" />

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

</layer-list>

删除注释，其中proressbar_progressing样子然后，我有东西有点难看，因为没有死角。

Removing the comment, where proressbar_progressing looks like then I am having something a bit ugly as there are no corners.

我加入从code，类似的背景：

I am adding the background from code, something like:

overallStatus = (ProgressBar) findViewById(R.id.pBarOverallStatus);
Resources res = getResources();
overallStatus.setBackgroundDrawable(res.getDrawable(R.drawable.progressbar_background));
overallStatus.setProgress(50);

我试图角落添加到图像，但没有运气。没有任何人有任何想法，我做错了什么？还是我缺少什么？另外，你有什么想法，我怎么能添加的左，右戒指？资源：

I tried to add corners to the image but no luck. Does anybody have any idea what I am doing wrong here? Or what am I missing? Also, do you have any idea how could I add the left and right rings? The resource:

答

解决方法的（感觉怪怪的回答你自己的）：首先，一个问题是，进步绘制有不同的尺寸比背景（愚蠢的我！）。此外，对于进度绘制的需要剪辑的XML。喜欢的东西progressbar_progress_clip.xml：

The solution (feels weird answering your own): First, one problem was that progress drawable had a different size than background (stupid me!). Also, for progress drawable a clip xml was needed. Something like progressbar_progress_clip.xml:

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/progressbar_progressing"
    android:clipOrientation="horizontal"
    android:gravity="left"/>

然后，添加进度条和两个图像中的相对布置，以使图像可以在状态栏后绘制。事情是这样的：

Then, add the progress bar and two images in a relative layout, so that the images can be drawn after the status bar. Something like this:

<RelativeLayout
                android:id="@+id/relativeLayout1"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dip"
                android:layout_marginRight="10dip"
                android:layout_weight="94" >

                <ProgressBar
                    android:id="@+id/pBarOverallStatus"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_marginBottom="2dp"
                    android:layout_marginTop="2dp"
                    android:indeterminateOnly="false"
                    android:max="100"
                    android:progressDrawable="@drawable/progressbar_progress_clip" >
                </ProgressBar>

                <ImageView
                    android:id="@+id/ringLeft"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_alignParentLeft="true"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="7dp"
                    android:contentDescription="@string/status_bar_ring"
                    android:src="@drawable/status_bar_ring" />

                <ImageView
                    android:id="@+id/ringRight"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="7dp"
                    android:contentDescription="@string/status_bar_ring"
                    android:src="@drawable/status_bar_ring" />
            </RelativeLayout>

谢谢你们！

Android的进度UI自定义布局

相关推荐