Android - GridLayout中的Square ImageButton

时间:2017-02-18 18:02:27

标签: android

我是Android新手所以请耐心等待:)

在我的主屏幕/主要活动中,我想要网格2 x N,所以我想要有两列和N行。网格中的项目是ImageButton。

一切正常,当ImageButtons中的img是ic_launcher时 - >然后网格中的项目很好。但当我把我的图形(500x500px)放在"瓷砖上时#34;比屏幕大,我不知道如何"规模"这个img适合瓷砖,因此它们可以具有与ic_launcher相同的尺寸。

这是代码:

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="3">

    <ImageButton
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:scaleType="centerCrop"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_width="wrap_content"
        android:padding="1dp"
        android:elevation="0dp"
        android:layout_gravity="fill" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"/>      

</GridLayout>

这是一切都很好的屏幕:

enter image description here

我可以做些什么来扩展我的img以适应这个尺寸?

重要的是:我的img是正方形的比例所以我想将这个img缩放到正方形大小。

编辑:当我使用我的img时,它看起来像这样:

enter image description here

2 个答案:

答案 0 :(得分:1)

我找到了一个针对我遇到的同样问题的调整::

通过LinearLayout将ImageButton包装为::

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:weightSum="10"
    android:gravity="center">

       <ImageButton
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    android:scaleType="centerCrop"
    android:layout_weight="6"
    android:layout_width="0dp"
    android:layout_gravity="fill" />

    </LinearLayout>

    <LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="10"
    android:gravity="center">

       <ImageButton
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    android:scaleType="centerCrop"
    android:layout_width="0dp"
    android:layout_weight="6"
    android:padding="1dp"
    android:layout_gravity="fill" />

   </LinearLayout>

</LinearLayout

根据需要将边距和填充应用于ImageButton或LinearLayout。这只是一个概念,让事情发挥作用。

答案 1 :(得分:1)

这是我的尝试..

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private GridView gridView;
    ArrayList<Integer> integerRes = new ArrayList<>();
    {
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);
        integerRes.add(R.drawable.bbent);


    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.grid);
        gridView.setAdapter(new GridAdapter());


    }

    class GridAdapter extends BaseAdapter {

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

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

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ImageView imageView=new ImageView(getApplicationContext());

            imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,440));
            // for better result in various devices calculate width at runtime and measure height accordingly

            imageView.setImageResource(integerRes.get(i));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            return imageView;
        }
    }

}

grid.xml

<?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="vertical">

    <GridView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"/>
</LinearLayout>

enter image description here