Android UI以编程方式GridLayout位置

Question

我正在尝试实现下面的布局，其想法是编写dynamic-UI：

https://www.dropbox.com/s/stlirgv7coqf0eu/mockup1.png。

我在应用程序中使用的JSON如下：

{
"name": "Formulare",
"url": "http://server.save-data.de/13467",
"rows": 5,
"cols": 3,
"formItems": [
    {
        "type": "button",
        "value": "Abschicken",
        "action": "send",
        "posX": 2,
        "posY": 4,
        "width": 2,
        "height": 2
    },
    {
        "type": "label",
        "value": "Vorname",
        "posX": 1,
        "posY": 2,
        "width": 2,
        "height": 2
    },
    {
        "type": "label",
        "value": "Nachname",
        "posX": 1,
        "posY": 3,
        "width": 2,
        "height": 2
    },
    {
        "type": "inputFieldText",
        "value": "Max",
        "validation": "50",
        "placeholder": "Vorname",
        "name": "firstname",
        "localStorage": true,
        "mandatory": true,
        "posX": 2,
        "posY": 2,
        "width": 2,
        "height": 3
    },
    {
        "type": "inputFieldText",
        "value": "Mustermann",
        "validation": "50",
        "placeholder": "Nachname",
        "name": "lastname",
        "localStorage": true,
        "mandatory": true,
        "posX": 2,
        "posY": 3,
        "width": 2,
        "height": 3
    }        
]}

对于JSON-Data和JSON-Parser，我使用了从FasterXML Jackson -> (github.com/FasterXML/jackson)选择的mocky http://www.mocky.io/v2/5316e43f2b7484ac02382f7c。

实现JSON到Java对象的工作！问题是，我如何定位这些对象？我猜GridLayout适合我的需要，但是我不知道没有XML我是如何实现它的。

我只能在列表中显示对象，以下是代码：

ScrollView scrollView = (ScrollView) findViewById(R.id.formContainer);

GridLayout layout = new GridLayout(getApplicationContext());
layout.setOrientation(GridLayout.VERTICAL);
layout.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
            LayoutParams.WRAP_CONTENT));

List<FormItem> formItems = form.getFormItems();
if (formItems != null) {
    for (FormItem formItem : formItems) {
        layout.addView(formItem.getViewObject(this));
    }
}
scrollView.addView(layout);

Answer 1

您所能做的就是在布局XML中定义网格视图

<GridView
        android:drawSelectorOnTop="true"
        android:horizontalSpacing="5dp"
        android:id="@+id/gridview"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:numColumns="2"
        android:stretchMode="columnWidth"
        android:verticalSpacing="5dp" />

然后创建一个网格item.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:hapticFeedbackEnabled="true"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:soundEffectsEnabled="true" >

<com.rizem.cbehindcode.grid.SquareImageView
    android:id="@+id/picture"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:scaleType="centerCrop" />

<TextView
    android:background="#55000000"
    android:gravity="center"
    android:hapticFeedbackEnabled="true"
    android:id="@+id/titeText"
    android:layout_gravity="bottom"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:paddingBottom="15dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:soundEffectsEnabled="true"
    android:textAppearance="?android:attr/textAppearanceSearchResultTitle" />

现在通过扩展BaseAdapter类来创建自定义适配器。

 public class IndexAdapter2 extends BaseAdapter {

        private List<Item> items = new ArrayList<Item>();
        private LayoutInflater inflater;
        private Context context;
        private boolean selected = false;

        public IndexAdapter2(Context context) {
            inflater = LayoutInflater.from(context);
            this.context = context;
                //TODO :Parse your json and add item according to it
                // in my case i am adding only textview and image view you can add other
                //Controls also .

            items.add(new Item("Chapter 1 ", R.drawable.background1));
            items.add(new Item("Chapter 2 ", R.drawable.background2));
            items.add(new Item("Chapter 3 ", R.drawable.background3));
            items.add(new Item("Chapter 4 ", R.drawable.background4));
            items.add(new Item("Chapter 5", R.drawable.background5));
            items.add(new Item("Chapter 6", R.drawable.background6));
            items.add(new Item("Chapter 7", R.drawable.background7));
            items.add(new Item("Chapter 8", R.drawable.background8));
            items.add(new Item("Chapter 9", R.drawable.background9));
            items.add(new Item("Chapter 10", R.drawable.background10));

        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int i) {
            return items.get(i);
        }

        @Override
        public long getItemId(int i) {
            return items.get(i).drawableId;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            View v = view;
            ImageView picture;
            TextView name;

            if (v == null) {
                         //Inflate your custom gird item list. and set the controls data
                v = inflater.inflate(R.layout.grid_item, viewGroup, false);
                v.setTag(R.id.picture, v.findViewById(R.id.picture));
                v.setTag(R.id.titeText, v.findViewById(R.id.titeText));

            }

            picture = (ImageView) v.getTag(R.id.picture);
            name = (TextView) v.getTag(R.id.titeText);
            name.setTypeface(Typeface.DEFAULT_BOLD);
            name.setTextColor(Color.WHITE);
            name.setTextSize(15);

            Item item = (Item) getItem(i);

            picture.setImageResource(item.drawableId);
            name.setText(item.name);
            v.setTag(i);
            return v;
        }

        private class Item {
            final String name;
            final int drawableId;

            Item(String name, int drawableId) {
                this.name = name;
                this.drawableId = drawableId;
            }
        }
    }

不，在我的例子中，我并排显示了两个图像视图，因此我创建了一个自定义图像视图类来调整网格项目list.xml中使用的图像尺寸

public class SquareImageView extends ImageView {

public SquareImageView(Context context) {
    super(context);

}

public SquareImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

}

public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}

}

现在在你的活动中

//Get the grid layout object.
GridView app_gridView = (GridView) findViewById(R.id.gridview);

// Instance of IndexAdapter Class.
app_gridView.setAdapter(new IndexAdapter2(this));

Answer 2

将它用作来自json的每个条目的项，但控制哪个视图将是可见的。

`<?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:orientation="horizontal" >

    <TextView
        android:id="@+id/label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="left"
        android:textAlignment="gravity" />

    <EditText
        android:id="@+id/input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="center"
        android:hint="data"
        android:textAlignment="gravity" />

    <LinearLayout
        android:id="@+id/checkboxGrp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical" >

        <CheckBox
            android:id="@+id/checkbox1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <CheckBox
            android:id="@+id/checkbox2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <RadioGroup
        android:id="@+id/radioGrp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical" >

        <!-- add as many radio buttons as possible -->

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton" />
    </RadioGroup>

</LinearLayout>`

将此视图添加到滚动视图容器中

    LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    view = inflater.inflate(layout_resource, null);

例如:从快照的第2行开始，只有输入字段可见。所以把别人赶走吧

findViewById(checkboxGrp).setVisibility(View.GONE) findViewById(radioGrp).setVisibility(View.GONE)

禁用这些组的可见性

这可能不是一个完整的布局，只是尝试，直到你得到正确的我的建议是列表视图，而不是滚动视图，如果有很多项目要显示