不同屏幕尺寸的計算器UI

我是Android新手。我正在使用計算器，但我面臨一個問題。用戶界面在android studio中看起來不錯，但是當我在Nexus 6上運行它（虛擬設備）時，它看起來像我的UI不支持不同的屏幕尺寸。我瞭解了DP（與設備無關的像素），默認情況下它適合每種屏幕尺寸的元素，但在這種情況下，它不起作用。我現在應該做什麼來支持每個設備？我附上UI代碼和圖片以獲取更多信息。不同屏幕尺寸的計算器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>

所以我現在應該做的每一個屏幕尺寸設備設置佈局？在此先感謝。

來源

2017-07-14 Hafiz Hamza

如果您使用固定尺寸的UI，則必須根據屏幕尺寸創建不同的尺寸文件夾。另一種選擇是可以使用weightSum來相應地佈局和管理視圖（UI中的按鈕）。 –

使用重量總和是最佳選擇。 –

簡化您的設計：將按鈕放在GridView或GridLayout中。對結果感到滿意。 –

更好地使用Constraint Layout。您也可以考慮爲不同的屏幕類型不同dimens.xml（你可以通過創建像屏幕像素密度限定新dimens.xml文件做到這一點 & 屏幕尺寸），它被應用到各類型的屏幕

實施例：

來源

2017-07-14 05:52:52

-1

不要給佈局高度匹配父比母體佈局和，而不是其他的內佈局在dp中給出固定的大小，你可以使用包裝內容的子視圖（按鈕，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>

來源

2017-07-14 06:00:05

嵌套佈局會帶來性能損失。 –

不同屏幕尺寸的計算器UI

回答

相關問題