Android:允许TableLayout中的边距/填充以在窗口小部件之间进行一些分隔

时间:2013-12-31 09:45:58

标签: android android-layout android-tablelayout

我在TableLayout中定义了六个按钮: -

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

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

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:text="Btn1" />
</TableRow>

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

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

的显示如下:

enter image description here

这里我想要在所有这些按钮之间分开。当我应用填充或边距时,右侧的按钮不适合屏幕而某些部分被切割。

这里我给第一行填充20,第二行给出20,然后它看起来像: -

enter image description here

代码:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:padding="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_margin="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:text="Btn1" />
</TableRow>

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

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

如何解决此问题?

风格: -

<style name="CustomStyleButton2" parent="@android:style/Widget.Button">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#dedfdc</item>
    <item name="android:gravity">center</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">0.6</item>
    <item name="android:background">@drawable/custom_button2</item>
    <item name="android:padding">10dip</item>
</style>

背景:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#151515" />
            <stroke android:width="1dp" android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient android:angle="270" android:endColor="#2E2E2E" android:startColor="#585858" />
            <stroke android:width="1dp" android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
</selector>

3 个答案:

答案 0 :(得分:3)

enter image description here只需将这些行添加到您的样式

即可
<item name="android:layout_marginRight">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>

答案 1 :(得分:1)

您应该正确使用权重,例如将weightSum设置为TableRow,将layout_weight设置为每个按钮。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2"
    android:padding="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

    <TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2"
    android:layout_margin="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

此外,如果您想要在所有按钮之间分离,请为每个按钮而不是表格行设置边距。

答案 2 :(得分:1)

而是表格布局,使用下面指定的三个线性布局。

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

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ffffff" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/action_back"
        android:gravity="center"
        android:paddingLeft="20dp"
        android:padding="3dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:background="@drawable/d" />

        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:background="#ffffff" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="TextView"
            android:visibility="invisible" />

        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_marginRight="5dp"
            android:background="#ffffff" />

        <Button
            android:id="@+id/button2"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:background="@drawable/b" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

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

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

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

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

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

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

</LinearLayout>

之后android:drawableTop =“@ drawable / d”我把图像绘制出来。通过指定您可以使用您想要的Watever设计按钮。现在,您可以将填充对齐为linearlayout。

编辑:

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





    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

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

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

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

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

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

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />


        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

</LinearLayout>

截屏:http://s1288.photobucket.com/user/csevoice1/media/untitled_zps659b57d7.png.html

希望你需要它。