java - Android UI 以编程方式在 GridLayout 位置

Question

我正在尝试实现下面的布局，我的想法是对动态 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
    }        
]}

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

实现 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

<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" />

然后创建一个grid 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;
            }
        }
    }

在我的例子中没有，我并排显示了 2 个带有文本框的 ImageView ，所以我创建了一个自定义 ImageView 类来调整在网格项目 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
}

现在在你的 Activity 中

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

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