Question

我在尝试使用FlexboxLayout创建简单界面时遇到了一些问题。我在.xml文件中创建视图，并且所有视图都按预期工作，但是当我尝试以编程方式创建相同视图时，我无法设置layout_flexBasisPercent。我想尝试这样的事情：

这是xml代码：

<com.google.android.flexbox.FlexboxLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexDirection="row"
    tools:context=".MainActivity">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:flexDirection="row"
        app:layout_flexBasisPercent="30%"
        app:layout_order="2">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/lorem"/>

    </com.google.android.flexbox.FlexboxLayout>

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:flexDirection="row"
        app:layout_flexBasisPercent="70%"
        app:layout_order="1" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/random"/>

    </com.google.android.flexbox.FlexboxLayout>

我尝试使用此代码以编程方式重现相同的视图，但不起作用：

    FlexboxLayout fb = findViewById(R.id.fb_main);
    fb.setLayoutDirection(FlexDirection.ROW);

    // Create right subregion on main layout
    FlexboxLayout right = new FlexboxLayout(this);
    FlexboxLayout.LayoutParams lpRight =
            new FlexboxLayout.LayoutParams(
                    FlexboxLayout.LayoutParams.MATCH_PARENT,
                    FlexboxLayout.LayoutParams.MATCH_PARENT);
    lpRight.setFlexBasisPercent(30f);
    lpRight.setOrder(2);
    lpRight.setLayoutDirection(FlexDirection.ROW);
    // Right subregions contains a Textview
    TextView tv = new TextView(this);
    tv.setLayoutParams(lpRight);
    tv.setText(getResources().getString(R.string.lorem));
    right.addView(tv);

    // Create left subregion on main layout
    FlexboxLayout left = new FlexboxLayout(this);
    FlexboxLayout.LayoutParams lpLeft =
            new FlexboxLayout.LayoutParams(
                    FlexboxLayout.LayoutParams.MATCH_PARENT,
                    FlexboxLayout.LayoutParams.MATCH_PARENT);
    lpLeft.setFlexBasisPercent(70f);
    lpLeft.setOrder(1);
    lpLeft.setLayoutDirection(FlexDirection.ROW);
    // Left subregion contains an Imageview
    ImageView iv = new ImageView(this);
    iv.setLayoutParams(lpLeft);
    iv.setImageResource(R.drawable.random);
    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
    left.addView(iv);

    fb.addView(left);
    fb.addView(right);

有人能找到错误吗？或者我做错了什么？

谢谢。

Answer 1

阅读代码有点困难;我建议将其重构为更小的方法，以便更轻松地推理事情。话虽如此，我看到了一些问题：

fb.setLayoutDirection(FlexDirection.ROW);

这应该是对fb.setFlexDirection()的调用。

FlexboxLayout.LayoutParams lpRight =
        new FlexboxLayout.LayoutParams(
                FlexboxLayout.LayoutParams.MATCH_PARENT,
                FlexboxLayout.LayoutParams.MATCH_PARENT);
lpRight.setFlexBasisPercent(30f);
lpRight.setOrder(2);
lpRight.setLayoutDirection(FlexDirection.ROW);
// Right subregions contains a Textview
TextView tv = new TextView(this);
tv.setLayoutParams(lpRight);

在这里，您要创建一个LayoutParams对象，其中包含您最初在“正确”的孩子FlexboxLayout上提供的弹性基础和订单值，但您可以将这些LayoutParams设置为改为TextView。

此外，您不小心再次呼叫setLayoutDirection()而不是setFlexDirection()。

FlexboxLayout.LayoutParams lpLeft =
        new FlexboxLayout.LayoutParams(
                FlexboxLayout.LayoutParams.MATCH_PARENT,
                FlexboxLayout.LayoutParams.MATCH_PARENT);
lpLeft.setFlexBasisPercent(70f);
lpLeft.setOrder(1);
lpLeft.setLayoutDirection(FlexDirection.ROW);
// Left subregion contains an Imageview
ImageView iv = new ImageView(this);
iv.setLayoutParams(lpLeft);

这里也有同样的问题。

这是一项工作活动，可以完成您在图片中发布的内容：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FlexboxLayout root = createRootView();
        setContentView(root);

        FlexboxLayout right = createRightFlexbox();
        TextView rightText = createTextView();
        right.addView(rightText);
        root.addView(right);

        FlexboxLayout left = createLeftFlexbox();
        ImageView leftImage = createImageView();
        left.addView(leftImage);
        root.addView(left);
    }

    private FlexboxLayout createRootView() {
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT);

        FlexboxLayout flexbox = new FlexboxLayout(this);
        flexbox.setLayoutParams(params);
        flexbox.setFlexDirection(FlexDirection.ROW);

        return flexbox;
    }

    private FlexboxLayout createRightFlexbox() {
        FlexboxLayout.LayoutParams params = new FlexboxLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
        params.setFlexBasisPercent(0.3f);
        params.setOrder(2);

        FlexboxLayout flexbox = new FlexboxLayout(this);
        flexbox.setLayoutParams(params);
        flexbox.setFlexDirection(FlexDirection.ROW);

        return flexbox;
    }

    private TextView createTextView() {
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT);

        TextView textView = new TextView(this);
        textView.setLayoutParams(params);
        textView.setText(R.string.lorem);

        return textView;
    }

    private FlexboxLayout createLeftFlexbox() {
        FlexboxLayout.LayoutParams params = new FlexboxLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
        params.setFlexBasisPercent(0.7f);
        params.setOrder(1);

        FlexboxLayout flexbox = new FlexboxLayout(this);
        flexbox.setLayoutParams(params);
        flexbox.setFlexDirection(FlexDirection.ROW);

        return flexbox;
    }

    private ImageView createImageView() {
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT);

        ImageView imageView = new ImageView(this);
        imageView.setLayoutParams(params);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setImageResource(R.drawable.random);

        return imageView;
    }
}

通过将代码拆分为方法，您可以更轻松地查看要应用于哪些视图的布局参数。另外，您可以在顶层看到屏幕的整体结构。

以编程方式使用FlexboxLayout

1 个答案: