我的应用程序的纵向布局是绘制视图大于它应该

时间:2015-04-19 20:36:27

标签: android android-linearlayout android-progressbar android-relativelayout

我为我构建的小应用程序的主屏幕设置了2个布局。一种布局用于纵向,一种布局用于横向。

横向版本看起来就像我想要的那样。

landscape

以下是此布局的XML代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient"
    android:gravity="center_horizontal|top"
    tools:context=".Main">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">

        <ProgressBar
            android:id="@+id/consumption_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progressbar"
            android:secondaryProgress="100" />

        <ProgressBar
            android:id="@+id/time_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progressbar2"
            android:secondaryProgress="100" />

        <TextView
            android:id="@+id/water_consumed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            android:fontFamily="sans-serif-light"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/unit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textColor="@color/white"
            android:layout_centerInParent="true"
            android:layout_below="@id/water_consumed"
            android:fontFamily="sans-serif-light"
            android:text="@string/milliliters_abbrev"
            android:textSize="16sp" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/glass"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/glass"
                android:fontFamily="sans-serif-light" />

            <View
                android:layout_width="@dimen/spacer"
                android:layout_height="@dimen/spacer" />

            <TextView
                android:id="@+id/custom"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/custom"
                android:fontFamily="sans-serif-light" />
        </LinearLayout>

        <View
            android:layout_width="@dimen/spacer"
            android:layout_height="@dimen/spacer" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/small_bottle"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/small_bottle"
                android:fontFamily="sans-serif-light" />

            <View
                android:layout_width="@dimen/spacer"
                android:layout_height="@dimen/spacer" />

            <TextView
                android:id="@+id/large_bottle"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/large_bottle"
                android:fontFamily="sans-serif-light" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

纵向XML是完全相同的XML,除了最上面的LinearLayout添加了android:orientation="vertical"

但是,在纵向模式下,进度条的大小自身大于包含它们的视图。

enter image description here

我怀疑这是因为屏幕的一半不是完美的正方形,而包含View的{​​{1}}应该是正方形。有谁知道如何在这里实现我的目标?

1 个答案:

答案 0 :(得分:0)

它似乎需要onMeasure中的最大值(宽度,高度)并设置较大的值。解决方案是简单地扩展ProgressBar并覆盖onMeasure方法

public class CustomProgressBar extends ProgressBar {
    public CustomProgressBar(Context context) {
        super(context);
    }

    public CustomProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        int min = Math.min(width, height);
        setMeasuredDimension(min, min);
    }
}

另一种方法是把它放在一个水平的LinearLayout中,并在左边放置一个15%宽的虚拟视图,在它右边放置一个15%的虚拟视图(或者对你有益的任何东西)。

您的评论和奇怪的情况可以尝试:

    <TextView
        android:id="@+id/water_consumed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        android:fontFamily="sans-serif-light"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/unit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:textColor="@color/white"
        android:gravity="center"
        android:layout_below="@id/water_consumed"
        android:fontFamily="sans-serif-light"
        android:text="@string/milliliters_abbrev"
        android:textSize="16sp" />