1

私は GridLayout を使用してアンドロイドでこの種のデザインを模倣しようとしています:

ここに画像の説明を入力

以下のコードを使用して、ほとんどのことを行ったと思います。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="8"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:background="@drawable/rounded">

    <TextView
        android:layout_gravity="center_horizontal"
        android:text="Some Text Here"
        android:textStyle="bold"
        android:textColor="#000000"
        android:textSize="30dp"
        android:textAlignment="center"
        android:layout_columnSpan="8"
        android:paddingBottom="10dp"
        />

    <TextView
        android:text="16"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:textColor="#000000"
        android:textSize="18dp"
        android:paddingLeft="10dp"
        android:paddingBottom="5dp"/>

    <TextView
        android:text="27"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:textSize="18dp"
        android:textColor="#000000"/>

    <TextView
        android:text="52"
        android:textStyle="bold"
        android:layout_columnSpan="6"
        android:textSize="18dp"
        android:paddingRight="10dp"
        android:textColor="#000000"/>

    <TextView
        android:text="Text 1"
        android:paddingRight="20dp"
        android:paddingLeft="10dp"
        android:textSize="18dp"
        android:textColor="#ff565656"
        android:paddingBottom="10dp"/>

    <TextView
        android:text="Text 2"
        android:paddingRight="20dp"
        android:textSize="18dp"
        android:textColor="#ff565656"/>

    <TextView
        android:text="Text 3"
        android:textColor="#ff565656"
        android:textSize="18dp"
        android:paddingRight="10dp"/>

</GridLayout>

ただし、エミュレータで実行すると、次のようになります。

ここに画像の説明を入力

左右のスペースが多すぎることに注意してください。

質問

  • グリッド レイアウトを構成して、左右の画面の大部分を占めるようにするにはどうすればよいですか (上記のサンプルのように)。

  • 画面の背景色を変更するにはどうすればよいですか - 現在は黒ですが、別の色に変更したいと考えています。

4

2 に答える 2

0

の場合GridLayout、これを置き換えます...

android:layout_width="wrap_content"

と...

android:layout_width="fill_parent"

次のように...

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="8"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:background="@drawable/rounded">
于 2014-02-18T17:53:37.263 に答える
0

@Anthony - 記述されたコードで GridLayout の力と本質を使用していません。ビューを最初の画面に表示するために手動でビューにパディングを割り当てたので、これは他のレイアウトでも非常に可能です。以下のように。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"

    android:layout_height="0dp"
    android:layout_weight="2"
    android:text="Some Text Here"
    android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="16"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="17"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="18"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

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

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text1"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text2"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text3"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

そして、GridLayout は行と列に関するものです。したがって、ビューをそのように配置し、それをより完全に使用する場合は、ビューを配置する行と列の位置を指定すると、他のプロパティがそれに追加されます。ここにリンクがあります。

これを試してみると、あなたはそれをよりよく理解できると確信しています. ハッピーコーディング。:)

于 2014-02-18T18:30:27.670 に答える