Gridview з двома стовпцями та автоматичними розмірами зображення


179

Я намагаюся зробити перегляд сітки з двома стовпцями. Я маю на увазі дві фотографії в ряду, як і це зображення.

введіть тут опис зображення

Але мої картини мають проміжки між ними, через те, що вони не однакового розміру. Ось що я отримую.

введіть тут опис зображення

як ви бачите, на першому малюнку ховається легенда, яка показує ім'я контакту та номер телефону. а інші малюнки розтягнуті неправильно.

Ось мій Xml-файл GridView Як ви бачите columnWidth, встановлено значення 200dp . Мені б хотілося, щоб воно було автоматичним , тому зображення будуть змінюватися автоматично для кожного розміру екрана.

<?xml version="1.0" encoding="utf-8"?>
<GridView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridViewContacts"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:numColumns="2"
    android:columnWidth="200dp"
    android:stretchMode="columnWidth"    
    android:gravity="center" />

і ось файл xml-файл, який представляє кожен елемент сам.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageViewContactIcon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/linearlayoutContactName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:background="#99000000"
        android:layout_alignBottom="@+id/imageViewContactIcon">

        <TextView
            android:id="@+id/textViewContactName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:textSize="15sp"
            android:text="Lorem Ipsum" />       

        <TextView
            android:id="@+id/textViewContactNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_marginLeft="5dp"
            android:focusable="true"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:textSize="10sp"
            android:text="123456789" />

    </LinearLayout>

</RelativeLayout>

Тож, що я хочу, - це показувати два зображення в ряд, а зображення автоматично змінювати розмір, незалежно від розміру екрана. Що я роблю не так у моєму макеті?

Дякую.


1
Можливо, вам слід спробувати інкапсулювати ImageView у власній LinearLayout. Таким чином, ви могли налаштувати тег LinearLayout саме так, як вам потрібно, а потім просто заповнити його ImageView.
Дані

@dani, що ти маєш на увазі? я все ще можу налаштувати ImageView саме так, як я хочу. ви могли б надати мені якийсь приклад?
rogcg

я думаю, що вам потрібно створити великі пальці з зображень, які все одно, колишні 100x100 або все, що вам потрібно. Якщо ви можете бачити на своєму прикладі зображення, ефект, який ви шукаєте, - це відображення лише частини зображення. І у вашому проекті просто відображайте оригінальне зображення, що неправильно, якщо вам потрібно зробити галерею. Спробуйте шукати великі пальці на веб-сайті Android android :)
Василь Валчев

@VasilValchev, але проблема полягає в тому, що навіть якщо я створюю великі пальці (наприклад, 100x100), мені потрібно буде змінити розмір екрана для різних розмірів екрана. Я alredy використовую scaleTypeвластивість centerCrop у ImageView. Мені потрібно досягти способу зробити знімки поруч і автоматично змінити розміри для різних розмірів екрана.
rogcg

Ви завжди можете отримати розмір екрана в горизонтальному коді біт і просто поділити його на / 2. Якщо ви бачите у своєму проекті проблема у висоті, якщо ви знаєте, яка саме ваша вага, ви завжди можете зробити ідеальний прямокутник. Я не бачу де проблема?
Василь Валчев

Відповіді:


402

Ось порівняно простий спосіб зробити це. Вставте GridView у свій макет, встановивши режим розтягування для розтягування ширини стовпців, встановіть інтервал у 0 (або що завгодно) та встановіть кількість стовпців на 2:

res / layout / main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</FrameLayout>

Створіть звичай, ImageViewякий підтримує його співвідношення сторін:

src / com / example / graphicstest / SquareImageView.java

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
    }
}

Створіть макет для елемента сітки за допомогою цього SquareImageView і встановіть масштаб типу в центрCrop:

res / layout / grid_item.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <com.example.graphicstest.SquareImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"/>

</FrameLayout>

Тепер зробіть якийсь адаптер для свого GridView:

src / com / example / graphicstest / MyAdapter.java

private final class MyAdapter extends BaseAdapter {
    private final List<Item> mItems = new ArrayList<Item>();
    private final LayoutInflater mInflater;

    public MyAdapter(Context context) {
        mInflater = LayoutInflater.from(context);

        mItems.add(new Item("Red",       R.drawable.red));
        mItems.add(new Item("Magenta",   R.drawable.magenta));
        mItems.add(new Item("Dark Gray", R.drawable.dark_gray));
        mItems.add(new Item("Gray",      R.drawable.gray));
        mItems.add(new Item("Green",     R.drawable.green));
        mItems.add(new Item("Cyan",      R.drawable.cyan));
    }

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

    @Override
    public Item getItem(int i) {
        return mItems.get(i);
    }

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

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

        if (v == null) {
            v = mInflater.inflate(R.layout.grid_item, viewGroup, false);
            v.setTag(R.id.picture, v.findViewById(R.id.picture));
            v.setTag(R.id.text, v.findViewById(R.id.text));
        }

        picture = (ImageView) v.getTag(R.id.picture);
        name = (TextView) v.getTag(R.id.text);

        Item item = getItem(i);

        picture.setImageResource(item.drawableId);
        name.setText(item.name);

        return v;
    }

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

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

Установіть цей адаптер на свій GridView:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    GridView gridView = (GridView)findViewById(R.id.gridview);
    gridView.setAdapter(new MyAdapter(this));
}

І насолоджуйтесь результатами:

Приклад GridView


3
це спрацювало! але я хотів би, щоб ви пояснили мені необхідність створення класу для ImageViewі чому використовувати щось подібне <com.example.graphicstest.SquareImageView>замість простого <ImageView>тегу у файлі xml . Чи можете ви пояснити мені більше про це співвідношення сторін і як не створювати цей клас, впливає на елементи. чи є спосіб оптимізувати це без необхідності користувацького ImageViewкласу? спасибі за вашу допомогу в будь-якому випадку
rogcg

10
В основному, в класі ImageView для Android немає ніякого способу просто вказати "ей, зберігати квадратне співвідношення сторін (ширина / висота) для цього виду", якщо ви не чітко визначите ширину та висоту коду. Ви можете зробити коригування LayoutParams в ручному режимі getView адаптера, але, чесно кажучи, набагато простіше дозволити ImageView обробляти всі вимірювання і просто перекрити результати, щоб сказати: "Яка б ширина не закінчилася, зробіть, щоб мій зріст залишався однаковим". Ніколи не треба думати про це, він завжди квадратний, і він працює просто так, як очікувалося. В основному це найпростіший спосіб зберегти вигляд квадрата.
Кевін Коппок

8
Я не можу придумати причину, щоб уникнути створення користувальницького класу ImageView, оскільки ви можете робити все з ним, як це можливо, за допомогою звичайного ImageView, але це просто заважає робити вимірювання та інстанціювання та перевірку LayoutParams повсюдно .
Кевін Коппок

1
Дякую за редагування, подумав, що це може бути так, працюючи як шарм!
Зандер

1
@kcoppock: Дякую за те, що поділився цим кодом. Мені найбільше подобається те, що ви можете замінити кольори для перегляду зображення на "справжні" зображення, а розмір зображення буде належним чином змінено! Я хотів би зрозуміти, чи можливо змінити розмір переглядів, щоб певна кількість переглядів заповнила весь екран.
AntonSack

14

Інший простий підхід із сучасними вбудованими речами, як PercentRelativeLayout , тепер доступний для нових користувачів, які стикаються з цією проблемою. дякую команді android за випуск цього предмета.

<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
app:layout_widthPercent="50%">

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

    <ImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#55000000"
        android:paddingBottom="15dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:textColor="@android:color/white" />

</FrameLayout>

а для кращої продуктивності ви можете використовувати такі речі, як завантажувач зображень Picasso, які допомагають заповнити всю ширину кожного батька зображень. наприклад, у адаптері вам слід скористатися цим:

int width= context.getResources().getDisplayMetrics().widthPixels;
    com.squareup.picasso.Picasso
            .with(context)
            .load("some url")
            .centerCrop().resize(width/2,width/2)
            .error(R.drawable.placeholder)
            .placeholder(R.drawable.placeholder)
            .into(item.drawableId);

тепер вам вже не потрібен CustomImageView Class.

PS Я рекомендую використовувати ImageView замість Type Int у класі Item.

сподіваюся, що ця допомога ..


З API 26.1 це вимкнено. Дивіться посилання
Dominikus K.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.