2016-08-20 4 views
0

나는 레이아웃을 멋지게 만드는 데 어려움을 겪고있다.GridLayout을 사용하여 계산기를 망친다

기본 사항을 이해하기 위해 간단한 계산기 앱을 만들기로 결정했습니다.
그래서, LinearLayout에 중첩 된 GridLayout을 사용하여 텍스트 필드 아래에 Button을 배치합니다.

여기 내 레이아웃 소스입니다.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100"> 

    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_weight="30"/> 

    <GridLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false" 
     android:layout_weight="70"> 

     <Button 
      android:text="C" /> 

     <Button 
      android:text="BS" /> 

     <Button 
      android:text="/" /> 

     <Button 
      android:text="x" /> 

     <Button 
      android:text="7" /> 

     <Button 
      android:text="8" /> 

     <Button 
      android:text="9" /> 

     <Button 
      android:text="-" /> 

     <Button 
      android:text="4" /> 

     <Button 
      android:text="5" /> 

     <Button 
      android:text="6" /> 

     <Button 
      android:text="+" /> 

     <Button 
      android:text="1" /> 

     <Button 
      android:text="2" /> 

     <Button 
      android:text="3" /> 

     <Button 
      android:layout_gravity="fill" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:layout_gravity="fill" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:text="." /> 
    </GridLayout> 

</LinearLayout> 

이 레이아웃을 화면에 채우는 방법은 무엇입니까?

current app

그리고 만들어 내 응용 프로그램은 빠른 답변에 대한 희망이

want to look like

처럼 보이는.

[편집] 이제는 상황이 나아졌지만 새로운 질문이 생겼습니다. 지금 내 주요 활동은 내 의견으로는, 아주 좋은이

this

처럼 보이지만 :

  1. 방법은 키보드의 오른쪽에 빈 공간을 제거하려면?
  2. 키보드와 텍스트보기를 각각 70과 30 퍼센트의 화면과 같이 만드는 방법은 무엇입니까?

또한, 새로운 레이아웃 코드는 다음과 같습니다

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="android.calcandroid.MainActivity"> 

    <TextView 
     android:background="@drawable/shape" 
     android:layout_height="match_parent" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_above="@+id/gridLayout" /> 

    <GridLayout 
     android:id="@+id/gridLayout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_alignParentBottom="true" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false"> 

     <Button 
      android:background="@drawable/shape" 
      android:text="C" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="BS" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="/" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="x" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="7" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="8" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="9" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="-" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="4" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="5" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="6" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="+" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="1" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="2" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="3" /> 

     <Button 
      android:background="@drawable/shape" 
      android:layout_gravity="fill_vertical" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:background="@drawable/shape" 
      android:layout_gravity="fill_horizontal" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:background="@drawable/shape" 
      android:text="." /> 
    </GridLayout> 

</RelativeLayout> 
+0

TableLayout을 사용해보십시오. 그럼 당신은 화면의 너비에 맞게 열을 늘릴 수 –

+0

그리드는 그것을 할 수 없어? – likeanowl

+0

GridView 또는 GridLayout은 계산기 앱에 적합합니다. –

답변

0

이 아주 가까이있어. 세로 구분선을 처리하는 방법을 잘 모릅니다. 어떤 이유로 각 행에 걸쳐있는 각 열 사이에 1dp보기를 배치하면 GridLayout이 전체보기를 확장합니다.

는 그리고 이것을 사용하려면 지원 라이브러리 버전

compile "com.android.support:gridlayout-v7:<support library number>" 

emulator

색상이 종속성이 필요합니다.XML

<color name="calcAccent">#ef6c00</color> 

styles.xml

<style name="calcAction"> 
    <item name="android:background">#f7f8fa</item> 
</style> 
<style name="calcNumber"> 
    <item name="android:background">#fafbfd</item> 
</style> 

레이아웃 XML 마지막으로

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:grid="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

    <TextView 
      android:layout_height="match_parent" 
      android:layout_width="match_parent" 
      android:text="0" 
      android:layout_above="@+id/gridLayout" android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" android:gravity="bottom|end" 
      android:singleLine="true" android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      android:textSize="48sp" android:background="#e3e7ea" android:paddingBottom="32dp" 
      android:padding="16dp"/> 

    <android.support.v7.widget.GridLayout 
      android:id="@+id/gridLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" 
      grid:useDefaultMargins="false" grid:alignmentMode="alignBounds" grid:columnCount="7" grid:rowCount="9"> 

     <!-- Row 1 --> 
     <Button 
       android:text="C" 
       grid:layout_row="0" grid:layout_column="0" 
       style="@style/calcAction" android:textStyle="bold" android:textColor="@color/calcAccent" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <ImageButton 
       android:src="@android:drawable/ic_input_delete" 
       grid:layout_row="0" grid:layout_column="2" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" /> 
     <Button 
       android:text="&#247;" 
       grid:layout_row="0" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" grid:layout_column="4"/> 
     <Button 
       android:text="x" 
       grid:layout_row="0" grid:layout_column="6" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       style="@style/calcAction"/> 

     <!-- Row 2 --> 
     <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="1" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 
     <Button 
       android:text="7" grid:layout_row="2" grid:layout_column="0" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       style="@style/calcNumber"/> 
     <Button 
       android:text="8" grid:layout_row="2" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="9" grid:layout_row="2" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="-" grid:layout_row="2" grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 

     <!-- Row 3 --> 
     <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="3" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 
     <Button 
       android:text="4" grid:layout_row="4" grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="5" grid:layout_row="4" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="6" grid:layout_row="4" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="+" grid:layout_row="4" grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 

     <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="7" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 

     <!-- Row 4 --> 
     <Button 
       android:text="1" grid:layout_row="6" grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="2" grid:layout_row="6" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="3" grid:layout_row="6" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="=" grid:layout_row="6" grid:layout_column="6" 
       style="@style/calcNumber" android:background="@color/calcAccent" 
       grid:layout_rowSpan="3" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       android:textAppearance="@style/TextAppearance.AppCompat.Large" 
       android:textColor="@color/primary_material_light" android:textStyle="bold" android:textSize="22sp" 
       android:gravity="bottom|center_horizontal" android:padding="8dp"/> 
     <!-- Row 5 --> 

     <Button 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       android:text="0" 
       grid:layout_row="8" grid:layout_column="0" grid:layout_columnSpan="3" 
       style="@style/calcNumber"/> 
     <Button 
       android:text="." 
       grid:layout_row="8" grid:layout_column="4" 
       grid:layout_columnWeight="1" style="@style/calcNumber"/> 

     <!-- Horizontal Grid --> 
     <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 


    </android.support.v7.widget.GridLayout> 

</RelativeLayout> 
+0

와우, 환상적입니다! – likeanowl

+0

그래, 각 단추 주위에 전체 테두리를 추가하는 것을 고려했지만 가장자리의 두께를 "두 배로"하지 않으므로 단추 사이에가는보기 행을 넣었습니다. –

0
는에 = 0 버튼을 변경

: 나는 당신의 의견에서 실현

<Button 
    android:layout_rowSpan="2" 
    android:layout_gravity="fill_vertical" 
    android:text="=" /> 
<Button 
    android:layout_columnSpan="2" 
    android:layout_gravity="fill_horizontal" 
    android:text="0" /> 

[편집]

그 = 버튼이 화면 하단으로 튀어 나왔습니다. 이것은 여러분이 높은 가중치를 계산기에 할당했기 때문에 fill_vertical을 사용하면 그렇게 할 것입니다.

나는 가정이다 (그러나 나는 틀렸다면 정정 해줘) 당신이 계산기는 화면 하단에 정렬 할 것을 보여 주었다 원하는 그래픽에서. (대신있는 LinearLayout의 RelativeLayout의를 사용 tldr) : 그런 경우, 여기 레이아웃 내 제안 개정의

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:layout_height="match_parent" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_above="@+id/gridLayout" /> 

    <GridLayout 
     android:id="@+id/gridLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_alignParentBottom="true" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false"> 

     <Button 
      android:text="C" /> 

     <Button 
      android:text="BS" /> 

     <Button 
      android:text="/" /> 

     <Button 
      android:text="x" /> 

     <Button 
      android:text="7" /> 

     <Button 
      android:text="8" /> 

     <Button 
      android:text="9" /> 

     <Button 
      android:text="-" /> 

     <Button 
      android:text="4" /> 

     <Button 
      android:text="5" /> 

     <Button 
      android:text="6" /> 

     <Button 
      android:text="+" /> 

     <Button 
      android:text="1" /> 

     <Button 
      android:text="2" /> 

     <Button 
      android:text="3" /> 

     <Button 
      android:layout_gravity="fill_vertical" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:layout_gravity="fill_horizontal" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:text="." /> 
    </GridLayout> 

</RelativeLayout> 
+0

@ChrisWard 답변 해 주셔서 감사합니다. 에뮬레이터에서 여전히 이상하게 보입니다. http://imgur.com/a/AY9hO 왜? – likeanowl

+0

안녕하세요 @likeanowl, 나는 문제를보고 위의 게시물을 편집했습니다. –

+0

고맙습니다. 지금 당장 시험해 보겠습니다. – likeanowl

0

, 후 거의 십시간 내가 만족 스럽습니다. Now its looks like this

는 @의 cricket_007 제안에 따라, 내 코드는

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:grid="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100" 
    tools:context="android.calcandroid.MainActivity"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="20"> 

     <TextView 
      android:layout_height="match_parent" 
      android:layout_width="match_parent" 
      android:text="0" 
      android:gravity="bottom|end" 
      android:singleLine="true" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      android:textSize="48sp" 
      android:background="#e3e7ea" 
      android:paddingBottom="32dp" 
      android:padding="16dp"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="80"> 

     <android.support.v7.widget.GridLayout 
      android:id="@+id/gridLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      grid:useDefaultMargins="false" 
      grid:alignmentMode="alignBounds" 
      grid:columnCount="7" 
      grid:rowCount="9"> 

      <!-- Row 1 --> 
      <Button 
       android:text="C" 
       android:background="@drawable/shape" 
       grid:layout_row="0" 
       grid:layout_column="0" 
       style="@style/calcAction" 
       android:textStyle="bold" 
       android:textColor="@color/calcAccent" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <ImageButton 
       android:background="@drawable/shape" 
       android:src="@android:drawable/ic_input_delete" 
       grid:layout_row="0" 
       grid:layout_column="2" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" /> 

      <Button 
       android:background="@drawable/shape" 
       android:text="&#247;" 
       grid:layout_row="0" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       grid:layout_column="4"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="x" 
       grid:layout_row="0" 
       grid:layout_column="6" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcAction"/> 

      <!-- Row 2 --> 
      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="1" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="7" 
       grid:layout_row="2" 
       grid:layout_column="0" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="8" 
       grid:layout_row="2" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="9" 
       grid:layout_row="2" 
       grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="-" 
       grid:layout_row="2" 
       grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <!-- Row 3 --> 

      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="3" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="4" 
       grid:layout_row="4" 
       grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="5" 
       grid:layout_row="4" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="6" 
       grid:layout_row="4" 
       grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="+" 
       grid:layout_row="4" 
       grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="7" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <!-- Row 4 --> 

      <Button 
       android:background="@drawable/shape" 
       android:text="1" 
       grid:layout_row="6" 
       grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="2" 
       grid:layout_row="6" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_row="6" 
       grid:layout_column="4" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:text="3" 
       style="@style/calcNumber"/> 

      <Button 
       grid:layout_row="6" 
       grid:layout_column="6" 
       grid:layout_rowSpan="3" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:background="@color/calcAccent" 
       android:textAppearance="@style/TextAppearance.AppCompat.Large" 
       android:textColor="@color/primary_material_light" 
       android:textStyle="bold" 
       android:textSize="22sp" 
       android:gravity="center_vertical|center_horizontal" 
       android:padding="8dp" 
       android:text="=" 
       style="@style/calcNumber"/> 
      <!-- Row 5 --> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       grid:layout_row="8" 
       grid:layout_column="0" 
       grid:layout_columnSpan="3" 
       style="@style/calcNumber" 
       android:text="0"/> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_row="8" 
       grid:layout_column="4" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber" 
       android:text="."/> 

      <!-- Horizontal Grid --> 
      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 


     </android.support.v7.widget.GridLayout> 

    </LinearLayout> 

</LinearLayout> 

은 어쩌면 조금 지저분한이다,하지만 내 생각은 괜찮아요.

관련 문제