Android 不使用设备宽度和高度创建运行时 View

标签 android android-layout react-native

我正在使用 api 的 left 和 top 值动态创建布局。 api 数据如下所示:-

{
"isSuccess": true,
"data": [{
        "left": "159",
        "top": "17",
        "seat_name": "Staff"
    },
    {
        "left": "159",
        "top": "65",
        "seat_name": "Staff"
    },
    {
        "left": "238",
        "top": "15",
        "seat_name": "3"
    },
    {
        "left": "239",
        "top": "66",
        "seat_name": "4"
    },
    {
        "left": "313",
        "top": "13",
        "seat_name": "5"
    },
    {
        "left": "314",
        "top": "67",
        "seat_name": "6"
    },
    {
        "left": "241",
        "top": "223",
        "seat_name": "7"
    },
    {
        "left": "239",
        "top": "160",
        "seat_name": "8"
    },
    {
        "left": "314",
        "top": "159",
        "seat_name": "9"
    },
    {
        "left": "315",
        "top": "223",
        "seat_name": "10"
    },
    {
        "left": "366",
        "top": "223",
        "seat_name": "11"
    },
    {
        "left": "364",
        "top": "160",
        "seat_name": "12"
    },
    {
        "left": "374",
        "top": "71",
        "seat_name": "13"
    },
    {
        "left": "371",
        "top": "12",
        "seat_name": "14"
    },
    {
        "left": "430",
        "top": "12",
        "seat_name": "15"
    },
    {
        "left": "432",
        "top": "68",
        "seat_name": "16"
    },
    {
        "left": "428",
        "top": "158",
        "seat_name": "17"
    },
    {
        "left": "431",
        "top": "223",
        "seat_name": "18"
    },
    {
        "left": "493",
        "top": "12",
        "seat_name": "19"
    },
    {
        "left": "492",
        "top": "64",
        "seat_name": "20"
    },
    {
        "left": "491",
        "top": "158",
        "seat_name": "21"
    },
    {
        "left": "486",
        "top": "222",
        "seat_name": "22"
    },
    {
        "left": "555",
        "top": "14",
        "seat_name": "23"
    },
    {
        "left": "553",
        "top": "65",
        "seat_name": "24"
    },
    {
        "left": "553",
        "top": "160",
        "seat_name": "25"
    },
    {
        "left": "553",
        "top": "220",
        "seat_name": "26"
    },
    {
        "left": "616",
        "top": "16",
        "seat_name": "27"
    },
    {
        "left": "618",
        "top": "65",
        "seat_name": "28"
    },
    {
        "left": "620",
        "top": "117",
        "seat_name": "29"
    },
    {
        "left": "618",
        "top": "166",
        "seat_name": "30"
    },
    {
        "left": "619",
        "top": "216",
        "seat_name": "31"
    }
]}

我编写的用于创建布局的代码是:

    private void createLayout() {
    ScrollView objScrollView = new ScrollView(this);
    ViewGroup.LayoutParams objLayoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.FILL_PARENT);
    objScrollView.setLayoutParams(objLayoutParams);
    RelativeLayout objParentLayout = new RelativeLayout(this);
    RelativeLayout.LayoutParams objParentParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

    int intId = 100;
    int intLeft = 0;
    for (int i = 0; i < arrobjSeats.size(); i++) {
        Seat objSeat = arrobjSeats.get(i);

        RelativeLayout objItemLayout = new RelativeLayout(this);
        RelativeLayout.LayoutParams objItemParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        objItemParams.setMargins(objSeat.getIntTop() + 30, objSeat.getIntLeft() - 110, 0, 10);
        intLeft = objSeat.getIntTop();

        ImageView imgSeat = new ImageView(this);
        imgSeat.setImageResource(R.drawable.ic_airline_seat_recline_normal_black_24dp);
        imgSeat.setColorFilter(Color.parseColor(objSeat.getStrSeatColor()), android.graphics.PorterDuff.Mode.SRC_IN);
        imgSeat.setPadding(5, 5, 10, 25);
        imgSeat.setId(intId++);
        RelativeLayout.LayoutParams objImageParams = new RelativeLayout.LayoutParams(120, 80);
        objImageParams.addRule(RelativeLayout.CENTER_HORIZONTAL);

        TextView txtSeatName = new TextView(this);
        RelativeLayout.LayoutParams objTextParams = new RelativeLayout.LayoutParams(120, RelativeLayout.LayoutParams.WRAP_CONTENT);
        objTextParams.addRule(RelativeLayout.ALIGN_BOTTOM, imgSeat.getId());
        txtSeatName.setPadding(5, 10, 5, 5);
        txtSeatName.setTextColor(Color.parseColor(objSeat.getStrSeatColor()));
        txtSeatName.setText(objSeat.getStrSeatName());
        txtSeatName.setGravity(Gravity.CENTER);
        txtSeatName.setTextSize(16);

        objItemLayout.setTag(i);

        objItemLayout.addView(imgSeat, objImageParams);
        objItemLayout.addView(txtSeatName, objTextParams);

        objItemLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int intPosition = (int) v.getTag();
                Seat objSeat = arrobjSeats.get(intPosition);
                Toast.makeText(SeatActivity.this, "Seat=>" + objSeat.getIntSeatId() + "=>" + objSeat.getStrSeatName(), Toast.LENGTH_SHORT).show();
            }
        });
        objParentLayout.setBackgroundColor(Color.CYAN);
        objParentLayout.addView(objItemLayout, objItemParams);
        System.out.println("Final Color=>" + objSeat.getStrSeatColor());
    }
    objScrollView.addView(objParentLayout, objParentParams);
    relativeLayout.addView(objScrollView);
}

所以使用上面的代码,我得到如下输出(几乎完美)。只是每个项目之间的间距有问题:

enter image description here

注意:我已经通过在 View 上应用绝对位置参数在 React Native 中实现了这个 api。它在许多 Android 设备上完美地显示了 UI,我已经测试过了。

所以我的问题是:

  1. 为什么在将布局参数设置为 MATCH_PARENT/FILL_PARENT 后,布局不采用完整的设备宽度和高度? (还尝试使用固定的布局值,例如给定的 120dp 宽度和高度。)
  2. 当我尝试为每个项目设置背景时,可以看到每个项目都与其对应的项目重叠。不知道为什么?

我在上面的代码中做错了什么吗?

最佳答案

首先,您需要了解要放置座位的 View 大小。 简单的方法 - 获取显示宽度和高度:

Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

但这将很难维护(您将没有机会将其移动到其他容器) 更好的方法 - 创建自定义 ViewGroup(例如 FrameLayout)并覆盖 onMeasure/onLayout 方法,参见 How to size an Android view based on its parent's dimensions

获得尺寸后,您必须重新计算位置。 首先得到最大左边和最大顶点。 比计算比例系数。例如,如果屏幕宽度为 600,最大左点为 250,座位宽度为 100,则比例宽度系数为 (600-100)/250 = 2 比使用系数添加所有座位:

objItemParams.setMargins(objSeat.getIntTop() * scaleCoefWidth, objSeat.getIntLeft() * scaleCoefHeigth, 0, 0);

注意,如果你想将它添加到垂直滚动,那么你需要更改获取高度的逻辑(例如,如果座位数小于 10,则将它们全部绘制在屏幕上,如果超过 10,则高度必须是超过屏幕(或 ViewGroup)高度以允许垂直滚动。

关于Android 不使用设备宽度和高度创建运行时 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50055808/

相关文章:

android - 使用 Translate Animation 将 View 从一种布局转换为另一种布局

java - 如何通过数据绑定(bind)更新布局元素的可见性

react-native - 如何使用动画在 React Native 中制作循环图像背景

Android 2.2 requestFocus() 和微调器

java - 错误 Android 尝试调用虚拟方法 'void android.widget.Button.setOnClickListener(android.view.View$OnClickListener)'

android - 我怎样才能在我的应用程序中实现 longclickable

reactjs - 在功能组件中使用 React.memo 来渲染项目 FlatList 以尽量减少重新渲染现有项目

css - 无法更改字体系列(React-Native)

android - 无法解析方法 'getWindow()'

java - SelectionTracker.Builder 不工作 IllegalArgumentException