Android:如何使用 XML 绘制 8 个相等的矩形以适合屏幕宽度
Android: How to draw 8 equal rectangles to fit screen width with XML
我是 JAVA 和 Android 开发的新手。
基本上我想画 8 个相等的矩形(键盘键)以适应 100% 的宽度。
据我所知,linearlayout 不支持可绘制对象,很遗憾,这段代码对我不起作用:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="2">
<View
android:id="@+id/keyboardKey1"
android:background="@drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="@+id/keyboardKeyC"
android:layout_toRightOf="@+id/keyboardKeyA" />
<View
android:id="@+id/keyboardKey2"
android:background="@drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="@+id/keyboardKeyC"
android:layout_toRightOf="@+id/keyboardKeyA" />
</LinearLayout>
这里还有keyboard_key_while.xml的内容:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#000" />
</shape>
据我所知,我也不能反其道而行之,在可绘制对象内部使用线性布局 XML。你能给我一些建议吗?
谢谢!
我以前做过。让我检查一下我的代码,看看我是否还有它。
我找到了。我创建的布局用于计算器。我希望按钮根据屏幕尺寸缩放。
我为按钮使用了具有纯白色背景的 TextView。我相信您也可以使用可绘制对象作为背景。无论如何,看看我做 LinearLayouts 的方式。
代码
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="@+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="Food"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="@+id/more"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="@drawable/layer_list_arrow_dn"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="@+id/amount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="0.00"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="@drawable/layer_list_clear"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:background="#00fcb514"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="0dp"
android:layout_marginRight="5dp"
android:background="#00333333"
>
<TextView
android:id="@+id/b00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="@drawable/ripple_holo_blue_bright"
android:text="7"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="4"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="1"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text=""
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00666666"
>
<TextView
android:id="@+id/b10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="8"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="5"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="2"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="0"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00999999"
>
<TextView
android:id="@+id/b20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="9"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="6"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="3"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b23"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="."
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="0dp"
android:background="#00cccccc"
>
<TextView
android:id="@+id/b30"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:textSize="27sp"
android:textStyle="bold"
android:background="@drawable/layer_list_arrow_up"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b31"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/layer_list_arrow_dn"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
您可以将 LinearLayout
设置为水平方向,并将每个视图设置为 layout_weight
和零 layout_width
。你快到了,但你必须使用 layout_weight
而不是 weight
。
这显示两个键占据了屏幕的宽度。如果您在其中放置 8 个视图,它会相应地缩放。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="@+id/keyboardKey1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="@drawable/keyboard_key_white" />
<View
android:id="@+id/keyboardKey2"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="@drawable/keyboard_key_white" />
</LinearLayout>
还有两件事
在您的示例中,您在键盘视图(layout_alignTop
和 layout_toRightOf
)中使用了 RelativeLayout
布局参数。但是,键盘视图由 LinearLayout
托管,因此会被忽略,因此可以将它们排除在外。
另一种方法是使用 GridLayout
,您可以在其中指定所需的列数和行数。在 GridLayout 中,您可以使用 layout_column
和 layout_row
为每个子视图指定希望它显示在哪一列和哪一行。
阅读 Android Developer API Guides 上的布局。
我是 JAVA 和 Android 开发的新手。
基本上我想画 8 个相等的矩形(键盘键)以适应 100% 的宽度。
据我所知,linearlayout 不支持可绘制对象,很遗憾,这段代码对我不起作用:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="2">
<View
android:id="@+id/keyboardKey1"
android:background="@drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="@+id/keyboardKeyC"
android:layout_toRightOf="@+id/keyboardKeyA" />
<View
android:id="@+id/keyboardKey2"
android:background="@drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="@+id/keyboardKeyC"
android:layout_toRightOf="@+id/keyboardKeyA" />
</LinearLayout>
这里还有keyboard_key_while.xml的内容:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#000" />
</shape>
据我所知,我也不能反其道而行之,在可绘制对象内部使用线性布局 XML。你能给我一些建议吗?
谢谢!
我以前做过。让我检查一下我的代码,看看我是否还有它。
我找到了。我创建的布局用于计算器。我希望按钮根据屏幕尺寸缩放。
我为按钮使用了具有纯白色背景的 TextView。我相信您也可以使用可绘制对象作为背景。无论如何,看看我做 LinearLayouts 的方式。
代码
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="@+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="Food"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="@+id/more"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="@drawable/layer_list_arrow_dn"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="@+id/amount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="0.00"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="@drawable/layer_list_clear"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:background="#00fcb514"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="0dp"
android:layout_marginRight="5dp"
android:background="#00333333"
>
<TextView
android:id="@+id/b00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="@drawable/ripple_holo_blue_bright"
android:text="7"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="4"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="1"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text=""
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00666666"
>
<TextView
android:id="@+id/b10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="8"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="5"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="2"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="0"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00999999"
>
<TextView
android:id="@+id/b20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="9"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="6"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="3"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b23"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="."
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="0dp"
android:background="#00cccccc"
>
<TextView
android:id="@+id/b30"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:textSize="27sp"
android:textStyle="bold"
android:background="@drawable/layer_list_arrow_up"
android:onClick="onViewClick"
/>
<TextView
android:id="@+id/b31"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/layer_list_arrow_dn"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
您可以将 LinearLayout
设置为水平方向,并将每个视图设置为 layout_weight
和零 layout_width
。你快到了,但你必须使用 layout_weight
而不是 weight
。
这显示两个键占据了屏幕的宽度。如果您在其中放置 8 个视图,它会相应地缩放。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="@+id/keyboardKey1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="@drawable/keyboard_key_white" />
<View
android:id="@+id/keyboardKey2"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="@drawable/keyboard_key_white" />
</LinearLayout>
还有两件事
在您的示例中,您在键盘视图(layout_alignTop
和 layout_toRightOf
)中使用了 RelativeLayout
布局参数。但是,键盘视图由 LinearLayout
托管,因此会被忽略,因此可以将它们排除在外。
另一种方法是使用 GridLayout
,您可以在其中指定所需的列数和行数。在 GridLayout 中,您可以使用 layout_column
和 layout_row
为每个子视图指定希望它显示在哪一列和哪一行。
阅读 Android Developer API Guides 上的布局。