3

我在尝试使用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);

谁能找到错误？或者我做错了什么？

谢谢你。

4

1 回答 1

3

通读您的代码有些困难。我建议将其重构为更小的方法，以使推理更容易。话虽如此，我看到了一些问题：

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对象，其中包含您最初在“正确”子项上具有的 flex 基础和顺序值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;
    }
}

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

于 2018-01-23T20:37:02.120 回答