不同屏幕尺寸的计算器UI

时间:2017-07-14 05:41:47

标签: android

我是android新手。我正在研究计算器,但我遇到了问题。用户界面在Android工作室看起来不错,但是当我在Nexus 6(虚拟设备)上运行它时,我的UI看起来不支持不同的屏幕尺寸。我了解到DP(设备无关像素)默认情况下它适合每个屏幕尺寸的元素,但在这种情况下,它不起作用。我现在该怎么做才能为每台设备提供支持?我附上了UI代码和图片以获取更多信息。

This is the interface when I am working on and it looks good in android studio.

when I run this code in Nexus 6 it dose not fit. It dose not fit as the previous image in android studio.

这是XML布局文件。我使用相对布局作为父布局,内部相对布局使用多个线性布局。

<LinearLayout
    android:id="@+id/linearLayoutText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="serif-monospace"
        android:gravity="right"
        android:textColor="@color/cyan"
        android:textSize="@dimen/txtResultTextSize" />

    <TextView
        android:id="@+id/txtOperation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="monospace"
        android:gravity="right"
        android:padding="@dimen/txtOperationPadding"
        android:textColor="@color/cyan"
        android:textSize="@dimen/txtOperationTextSize" />

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayoutBtnDecimals"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/linearLayoutText"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnFactorial"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="!"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnDel"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="«"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnC"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="C"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnSqrRoot"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="√"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnForwardBracket"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="("
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnBackwardBracket"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text=")"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn7"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="7"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn8"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="8"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn9"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="9"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn4"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="4"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="5"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn6"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="6"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn1"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="1"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="2"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="3"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

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

        <Button
            android:id="@+id/btn0"
            android:layout_width="@dimen/btn0Width"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="0"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnDot"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="."
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignBaseline="@+id/linearLayoutBtnDecimals"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/linearLayoutText"
    android:layout_toEndOf="@+id/linearLayoutBtnDecimals"
    android:layout_toLeftOf="@+id/linearLayoutBtnDecimals"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnDiv"
        android:layout_width="@dimen/btnWidth"
        android:layout_height="@dimen/btnHeight"
        android:layout_marginBottom="@dimen/marginBottom"
        android:background="@color/dark"
        android:fontFamily="monospace"
        android:text="÷"
        android:textColor="@color/cyan"
        android:textSize="@dimen/btnTextSize" />

    <Button
        android:id="@+id/btnMul"
        android:layout_width="@dimen/btnWidth"
        android:layout_height="@dimen/btnHeight"
        android:layout_marginBottom="@dimen/marginBottom"
        android:background="@color/dark"
        android:fontFamily="monospace"
        android:text="×"
        android:textColor="@color/cyan"
        android:textSize="@dimen/btnTextSize" />

    <Button
        android:id="@+id/btnMinus"
        android:layout_width="@dimen/btnWidth"
        android:layout_height="@dimen/btnHeight"
        android:layout_marginBottom="@dimen/marginBottom"
        android:background="@color/dark"
        android:fontFamily="monospace"
        android:text="-"
        android:textColor="@color/cyan"
        android:textSize="@dimen/btnTextSize" />

    <Button
        android:id="@+id/btnPlus"
        android:layout_width="@dimen/btnWidth"
        android:layout_height="@dimen/btnHeight"
        android:layout_marginBottom="@dimen/marginBottom"
        android:background="@color/dark"
        android:fontFamily="monospace"
        android:text="+"
        android:textColor="@color/cyan"
        android:textSize="@dimen/btnTextSize" />

    <Button
        android:id="@+id/btnEqual"
        android:layout_width="@dimen/btnWidth"
        android:layout_height="@dimen/btnEqualHeight"
        android:layout_marginBottom="@dimen/marginBottom"
        android:background="@color/dark"
        android:fontFamily="monospace"
        android:text="="
        android:textColor="@color/cyan"
        android:textSize="@dimen/btnTextSize" />
</LinearLayout>

这是dimens.xml文件

<dimen name="btnWidth">95dp</dimen>
<dimen name="btnHeight">62dp</dimen>
<dimen name="btn0Width">191dp</dimen>
<dimen name="btnMarginRight">1dp</dimen>
<dimen name="btnTextSize">40sp</dimen>
<dimen name="btnEqualHeight">125dp</dimen>
<dimen name="marginBottom">1sp</dimen>
<dimen name="txtResultTextSize">80sp</dimen>
<dimen name="txtOperationTextSize">30sp</dimen>
<dimen name="txtOperationPadding">5dp</dimen>

那么我现在该怎么做才能为每个屏幕尺寸的设备设置布局? 在此先感谢。

2 个答案:

答案 0 :(得分:0)

更好地使用Constraint Layout。对于不同的屏幕类型,您也可以考虑使用不同的 dimens.xml 您可以通过使用屏幕密度&amp; 屏幕尺寸 ),它将应用于相应类型的屏幕

示例:

Example

答案 1 :(得分:-1)

永远不要将布局高度与父布局以外的内部布局匹配,而不是在dp中给出固定大小,您可以使用换行内容作为子视图(Button,Textviews等)。而且你也可以使用重量和。

<LinearLayout
    android:id="@+id/linearLayoutBtnDecimals"
    android:layout_width="wrap_content"
    android:layout_height="**wrap_content**"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/linearLayoutText"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/marginBottom"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnFactorial"
            android:layout_width="@dimen/btnWidth"
            android:layout_height="@dimen/btnHeight"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="!"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnDel"
            android:layout_width="**wrap_content**"
            android:layout_height="**wrap_content**"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="«"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />

        <Button
            android:id="@+id/btnC"
            android:layout_width="**wrap_content**"
            android:layout_height="**wrap_content**"
            android:layout_marginRight="@dimen/btnMarginRight"
            android:background="@color/darkGrey1"
            android:fontFamily="monospace"
            android:text="C"
            android:textColor="@color/lightGrey4"
            android:textSize="@dimen/btnTextSize" />
</LinearLayout>