以编程方式使用 FlexboxLayout
Use FlexboxLayout programmatically
我在尝试使用 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);
谁能找出错误?或者我做错了什么?
谢谢。
通读您的代码有些困难;我建议将其重构为更小的方法,以便更轻松地推理事情。话虽这么说,但我发现了一些问题:
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
object,其中包含您最初在 "right" child 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);
同样的问题。
这是一个有效的 activity,可以执行您在图片中发布的内容:
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 创建简单界面时遇到了一些问题。
我在 .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);
谁能找出错误?或者我做错了什么?
谢谢。
通读您的代码有些困难;我建议将其重构为更小的方法,以便更轻松地推理事情。话虽这么说,但我发现了一些问题:
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
object,其中包含您最初在 "right" child 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);
同样的问题。
这是一个有效的 activity,可以执行您在图片中发布的内容:
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;
}
}
通过将代码拆分为方法,可以更轻松地查看将哪些布局参数应用于哪些视图。此外,您还可以在顶层看到屏幕的整体结构。