响应式UI GridView布局

时间:2018-02-22 02:11:18

标签: java android xml android-layout user-interface

我在其他网站上进行了调查,并就如何解决问题得到了不同的回答。实际上问题是我正在尝试制作响应式gridView布局,以显示带有数字的25个文本视图。我很难按照自己的方式构建它,但这就是我得到的:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
android:layout_gravity="center"
android:gravity="center"
tools:context="com.example.hristodraganov.bingo.MainActivity"
tools:showIn="@layout/activity_main">

<RelativeLayout
    android:id="@+id/relLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="4">


</RelativeLayout>

<GridView
    android:paddingTop="8dp"
    android:id="@+id/gridview"
    android:background="#000"
    android:layout_width="match_parent"
    android:layout_weight="6"
    android:layout_height="0dp"
    android:gravity="center"
    android:columnWidth="70dp"
    android:numColumns="5"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="1dp"
    android:stretchMode="spacingWidth"
    />

这是MainActivity上使用的布局。我使用以下代码将textview项目膨胀:

<?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:background="#d3d3d3"
android:gravity="center">

<com.example.****.****.SquareView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cell"
    android:textColor="#D0583B"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="30sp">

</com.example.****.****.SquareView>

BaseAdapter类的扩展名用于使用textviews对网格进行充气:

public class GridAdapter extends BaseAdapter {

    private final Context mContext;
    private  String[] numbers;


    public GridAdapter(Context context, String[] numbers) {
        this.mContext = context;
        this.numbers = numbers;
    }


    @Override
    public int getCount() {
        return numbers.length;
    }


    @Override
    public long getItemId(int position) {
        return 0;
    }


    @Override
    public Object getItem(int position) {
        return null;
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater)
                mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(mContext);


            gridView = inflater.inflate(R.layout.textview_layout, null);


            TextView textView = (TextView) gridView.findViewById(R.id.cell);
            textView.setText(numbers[position]);

        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

}

另外,我正在强制textView在这个SquareView类中进行平方:

public class SquareView extends android.support.v7.widget.AppCompatTextView {

public SquareView(Context context) {
    super(context);
}

public SquareView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

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

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, widthMeasureSpec); 
}}

现在布局很好,这是我用来构建它Nexus 5X的大小的图像。它看起来不错但是当我改为4“ - Nexus S时,整个最后一行都在屏幕下方的某个位置。这也发生在5” - Nexus 5,其中最后一行略微可见。高于5.2“至6.0”的布局非常适合。所以我的问题是我应该在这个场景中做些什么来使布局适合小尺寸的屏幕而不为它们制作重复的布局。 (注意:我被告知BaseAdapter实现将修复布局的响应性)。任何想法我能做什么? (抱歉,长篇文章。)

1 个答案:

答案 0 :(得分:0)

因为有很多不同的Android设备,您最好的选择是将您的布局封装在ScrollView中。

另一种选择是摆脱权重,让RelativeLayoutGridView占用所需空间后增长/缩小。这仍然可能不适用于较小的屏幕或横向。

```

<RelativeLayout
    android:id="@+id/relLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">


</RelativeLayout>

<GridView
    android:paddingTop="8dp"
    android:id="@+id/gridview"
    android:background="#000"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:columnWidth="70dp"
    android:numColumns="5"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="1dp"
    android:stretchMode="spacingWidth"/>

```