代号一个布局问题

Question

我想以下列方式显示图像

但它的显示如下

如何实现主要图像的输出......以及如何使图像响应？

以下是我的代码：

public void Fair(){
        Form hi = new Form(new BoxLayout(BoxLayout.Y_AXIS));
        hi.setTitle("Fair");

       hi.getToolbar().addCommandToLeftBar("", theme.getImage("BlackBack.png"), (evt) -> {
       });

        hi.getToolbar().addCommandToRightBar("", theme.getImage("BlackMenu.png"), (evt) -> {
        });

        Image men = theme.getImage("men.png");
        Button menButton = new Button(men);

        Image women = theme.getImage("women.png");
        Button womenButton = new Button(women);

        Container container1 = BoxLayout.encloseX(menButton,womenButton);



        hi.add(container1);
        hi.show();

    }

Answer 1

将您的代码更改为以下，BoxLayout-X不会填充屏幕宽度，但可能会继续增长。因此，将其更改为GridLayout 2列。

public void Fair() {
    Form hi = new Form(new BoxLayout(BoxLayout.Y_AXIS));
    hi.setTitle("Fair");

    hi.getToolbar().addCommandToLeftBar("", theme.getImage("BlackBack.png"), (evt) -> {
    });

    hi.getToolbar().addCommandToRightBar("", theme.getImage("BlackMenu.png"), (evt) -> {
    });

    Image men = theme.getImage("men.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Button menButton = new Button(men);

    Image women = theme.getImage("women.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Button womenButton = new Button(women);

    Container container1 = GridLayout.encloseIn(2, menButton, womenButton);

    hi.add(container1);
    hi.show();
}

创建原始设计：

public void Fair() {
    Form hi = new Form(BoxLayout.y());
    hi.setTitle("Fair");
    hi.setScrollableY(true);

    hi.getToolbar().addCommandToLeftBar("", RES.getImage("BlackBack.png"), (evt) -> {
    });

    hi.getToolbar().addCommandToRightBar("", RES.getImage("BlackMenu.png"), (evt) -> {
    });

    Image men = RES.getImage("men.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Image women = RES.getImage("women.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Image accessories = RES.getImage("accessories.png").scaledWidth(Display.getInstance().getDisplayWidth());
    Image brands = RES.getImage("brands.png").scaledWidth(Display.getInstance().getDisplayWidth());

    Container containerWomen = LayeredLayout.encloseIn(new Label(women),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("for", "SmallLabelUiid"), new Label("Men", "LargeBoldLabelUiid"))));
    Button womenButton = new Button();
    womenButton.addActionListener(ev -> {
    });
    containerWomen.setLeadComponent(womenButton);

    Container containerMen = LayeredLayout.encloseIn(new Label(men),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("for", "SmallLabelUiid"), new Label("Women", "LargeBoldLabelUiid"))));
    Button menButton = new Button();
    menButton.addActionListener(ev -> {
    });
    containerMen.setLeadComponent(menButton);

    Container containerMenAndWomen = GridLayout.encloseIn(2, containerMen, containerWomen);

    Container containerAccessories = LayeredLayout.encloseIn(new Label(accessories),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("Accessories", "LargeBoldLabelUiid"))));
    Button accessoriesButton = new Button();
    accessoriesButton.addActionListener(ev -> {
    });
    containerAccessories.setLeadComponent(accessoriesButton);

    Container containerBrands = LayeredLayout.encloseIn(new Label(brands),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("Brands", "LargeBoldLabelUiid"), new SpanLabel("A man's worth is no greater than his ambitions", "SmallLabelUiid"))));
    Button brandsButton = new Button();
    brandsButton.addActionListener(ev -> {
    });
    containerBrands.setLeadComponent(brandsButton);

    hi.add(containerMenAndWomen).add(containerAccessories).add(containerBrands);
    hi.show();
}

Answer 2

这里使用此布局，根据需要修改

<?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:weightSum="3"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_weight="1">

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

            <ImageView
                android:layout_width="match_parent"
                android:background="#7e3c3c"
                android:layout_height="match_parent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="For Boys"
                android:textColor="#fff"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:layout_alignParentStart="true"
                android:id="@+id/textView" />


        </RelativeLayout>

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

            <ImageView
                android:layout_width="match_parent"
                android:background="#0f94ce"
                android:layout_height="match_parent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="For Girls"
                android:textColor="#fff"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:layout_alignParentStart="true" />


        </RelativeLayout>

    </LinearLayout>

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

        <ImageView
            android:layout_width="match_parent"
            android:background="#eccf15"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Accessories"
            android:layout_marginTop="20dp"
            android:textColor="#000"
            android:gravity="center"/>


    </RelativeLayout>

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

        <ImageView
            android:layout_width="match_parent"
            android:background="#15ec4e"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Brands"
            android:layout_marginTop="20dp"
            android:textColor="#d60707"
            android:gravity="center"/>
    </RelativeLayout>

</LinearLayout>