实际布局和图形布局不对应

Question

我有以下带有hp bar和mana bar的XML代码：

     <TextView 
    android:id="@+id/player_health"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/player_job"
    android:textSize="13sp"
    android:textColor="#ffffff"
    android:text="@string/player_health"
    android:layout_centerHorizontal="true"/>

            <View
                android:id="@+id/background_health"
                android:layout_width="200dp"
                android:layout_height="20dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@+id/player_health"
                android:background="@drawable/background_health_rectangle"/>

            <View
                android:id="@+id/health"
                android:layout_height="20dp"
                android:layout_width="200dp"
                android:layout_alignLeft="@+id/background_health"
                android:layout_alignTop="@+id/background_health"
                android:layout_below="@+id/player_health"
                android:background="@drawable/health_rectangle" />

            <TextView 
                android:id="@+id/player_health_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="10sp"
                android:textColor="#ffffff"
                android:layout_below="@+id/player_health"
                android:layout_centerHorizontal="true"/>

<TextView 
    android:id="@+id/player_mana"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/health"
    android:textSize="13sp"
    android:textColor="#ffffff"
    android:text="@string/player_mana"
    android:layout_centerHorizontal="true"/>

            <View
                android:id="@+id/background_mana"
                android:layout_width="200dp"
                android:layout_height="20dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@+id/player_mana"
                android:background="@drawable/background_health_rectangle"/>

            <View
                android:id="@+id/mana"
                android:layout_height="20dp"
                android:layout_width="200dp"
                android:layout_alignLeft="@+id/background_mana"
                android:layout_alignTop="@+id/background_mana"
                android:layout_below="@+id/player_mana"
                android:background="@drawable/mana_rectangle" />

            <TextView 
                android:id="@+id/player_mana_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="10sp"
                android:textColor="#ffffff"
                android:layout_below="@+id/player_mana"
                android:layout_centerHorizontal="true"/> 

<TextView 
    android:id="@+id/attribute"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/attribute_title"
    android:layout_below="@+id/mana"
    android:paddingTop="10dp"
    android:textSize="20sp"
    android:textColor="#ffffff"
    android:layout_centerHorizontal="true"/>

并且eclips中的图形布局显示：

但是在实际设备上显示的内容非常不同：

我不知道为什么会这样，我尝试了许多不同的东西，但没有它们起作用。这是我第一次看到实际的外观和图形布局是如此不同。

哦，我差点忘了，这里是background_health_rectangle的XML文件的代码：

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <solid android:color="#ffffffff" />

</shape>

health_rectangle：

     <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <solid android:color="#ffff0000" />

</shape>

mana_rectangle：

     <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <solid android:color="#FF0000FF" />

</shape>

Answer 1

我想通了，这是代码中的一个问题，我使用布局参数来改变条的宽度，我意外地合并了这两个参数。这是正确的代码：

RelativeLayout.LayoutParams health_params = (RelativeLayout.LayoutParams)
                health_bar.getLayoutParams();
                float actual_health_percent = (actual_health/health)*200; 
                int health_value = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, actual_health_percent, getResources().getDisplayMetrics());
                health_params.width = health_value;
                health_bar.setLayoutParams(health_params);

                RelativeLayout.LayoutParams mana_params = (RelativeLayout.LayoutParams)
                mana_bar.getLayoutParams();
                float actual_mana_percent = (actual_mana/mana)*200; 
                int mana_value = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, actual_mana_percent, getResources().getDisplayMetrics());
                mana_params.width = mana_value;
                mana_bar.setLayoutParams(mana_params);