Blender Python Column Align

Question

Ok, so I made a python UI for my rig, and here’s the result.

It’s good, but I wanted the buttons to be much closer together. Here’s what mean:

The thing is that I don’t know how to do so. Here’s the code:

r = b.row(align = True)
            r.label(text= "      Right Leg")
            r.label(text= "      Left Leg")
            r = b.row(align = True)
            r.prop(obj, "IK_LEG_RIGHT", text="FK Leg", toggle=True)
            r.prop(obj, "IK_LEG_LEFT", text="FK Leg", toggle=True)
            r = b.row(align = True)
            r.prop(obj, "LRS", text="Stretch", toggle=True)
            r.prop(obj, "LLS", text="Stretch", toggle=True)
            r = b.row(align = True)
            r.prop(obj, "Leg_Squash_R", text="Squash", toggle=True)
            r.prop(obj, "Leg_Squash_L", text="Squash", toggle=True)
            if rig["IK_LEG_LEFT"] == 0 or rig["IK_LEG_RIGHT"] == 0:
                r = b.column(align = True)
                r.prop(obj, "Stiff_Leg_IK", text="Stiff Leg IK", toggle=True)
            if rig["Stiff_Leg_IK"] == 0:
                r = b.column(align = True)
                r.prop(obj, "ankle_swap", text="Ankle Swap", toggle=True)

If there are any suggestions. Please let me know.

Answer 1

You can use UILayout.grid_flow():

import bpy
class LayoutDemoPanel(bpy.types.Panel):
    """Creates a Panel in the scene context of the properties editor"""
    bl_label = "Layout Demo"
    bl_idname = "SCENE_PT_layout"
    bl_space_type = 'PROPERTIES'
    bl_region_type = 'WINDOW'
    bl_context = "scene"

    def draw(self, context):
        layout = self.layout
        scene = context.scene

        grid = layout.grid_flow(columns=2, align=True)
        grid.prop(scene, "frame_start")
        grid.prop(scene, "frame_end")
        grid.prop(scene, "frame_start")
        grid.prop(scene, "frame_end")

def register():
    bpy.utils.register_class(LayoutDemoPanel)
def unregister():
    bpy.utils.unregister_class(LayoutDemoPanel)
 
if __name__ == "__main__":
    register()

You can also combine multiple grids by using one regular UILayout.column():

    def draw(self, context):
        layout = self.layout
        scene = context.scene
        
        col = layout.column(align=True)
        grid = col.grid_flow(columns=2, align=True)
        grid.prop(scene, "frame_start")
        grid.prop(scene, "frame_end")
        grid.prop(scene, "frame_start")
        grid.prop(scene, "frame_end")
        grid = col.grid_flow(columns=1, align=True)
        grid.prop(scene, "frame_start")
        grid.prop(scene, "frame_end")

Answer 2

You can use the regular column-row layout.

I assume b = layout.box() in your provided code. If so, add one additional column to the box and set align to True like so:

col = b.column(align=True)

Then replace all b.layout() calls by col.layout() (layout means row, col or another UILayout object), then your code should look similar to this:

col = b.column(align=True)
r = col.row(align=True)
r.label(text="Right Leg")
r.label(text="Left Leg")
r = col.row(align=True)
r.prop(obj, "IK_LEG_RIGHT", text="FK Leg", toggle=True)
r.prop(obj, "IK_LEG_LEFT", text="FK Leg", toggle=True)
r = col.row(align = True)
r.prop(obj, "LRS", text="Stretch", toggle=True)
r.prop(obj, "LLS", text="Stretch", toggle=True)
r = col.row(align = True)
r.prop(obj, "Leg_Squash_R", text="Squash", toggle=True)
r.prop(obj, "Leg_Squash_L", text="Squash", toggle=True)
if rig["IK_LEG_LEFT"] == 0 or rig["IK_LEG_RIGHT"] == 0:
    r = col.column(align = True)
    r.prop(obj, "Stiff_Leg_IK", text="Stiff Leg IK", toggle=True)
if rig["Stiff_Leg_IK"] == 0:
    r = col.column(align = True)
    r.prop(obj, "ankle_swap", text="Ankle Swap", toggle=True)

Answer 3

Great code.

The following code allows me to create a column in a box.

This solved a longtime mystery of mine.

use gird_flow

layout = self.layout
row = layout.row()
gridbox = row.box()
rowgridbox = gridbox.grid_flow(columns=3, align=True)
rowgridbox .prop(self,"add_materialcolor")
rowgridbox .prop(self,"color_pic",text="")
rowgridbox .prop(self,"materialname")

use split

layout = self.layout
row =layout.row()
gridbox = row.box()
# Define methods for splitting
gridboxsplit = gridbox.split()
# Define columns
gridbox = gridboxsplit.column()
gridbox.prop(self,"add_matelialcolor")
# Define columns
gridbox = gridboxsplit.column()
gridbox.prop(self,"color_pic",text="")
# Define columns
gridbox = gridboxsplit.column()
gridbox.prop(self,"matelialname")

It's the same either way. I think "grid_flow" is a cleaner code.

layout = self.layout
row = layout.row()
gridbox = row.box()
rowgridbox = gridbox.grid_flow(columns=1, align=True)
rowgridbox .prop(self,"add_matelialcolor")
rowgridbox = gridbox.grid_flow(columns=2, align=True)
rowgridbox .prop(self,"color_pic",text="")
rowgridbox .prop(self,"matelialname")

このように各行で列の制御が容易です。 「スプリット」「column」を使うと、 ボックス内の制御が難しくなります。