दो कॉलम और ऑटो आकार की छवियों के साथ ग्रिडिड्यू

Question

मैं दो कॉलम के साथ एक ग्रिडव्यू बनाने की कोशिश कर रहा हूं। मेरा मतलब है कि इस छवि की तरह प्रति पंक्ति में दो तस्वीरें।

लेकिन मेरी तस्वीरों में उनके बीच रिक्त स्थान है, इस तथ्य के कारण कि यह समान आकार नहीं है। यहाँ मुझे मिल रहा है।

जैसा कि आप देख सकते हैं कि पहली तस्वीर किंवदंती को छुपाती है जो संपर्क नाम और फोन नंबर दिखाती है। और अन्य चित्र सही ढंग से नहीं खिंचे हैं।

यहाँ मेरी GridView xml फ़ाइल है। जैसा कि आप देख सकते हैं कि 200dp परcolumnWidth सेट है । मुझे यह स्वचालित होना पसंद है , इसलिए चित्र प्रत्येक स्क्रीन आकार के लिए स्वचालित रूप से आकार बदल देंगे।

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

तो मैं क्या चाहता हूं, प्रति पंक्ति दो छवियों को दिखाने के लिए है, और छवियों को ऑटो आकार, कोई फर्क नहीं पड़ता स्क्रीन आकार। मैं अपने लेआउट पर क्या गलत कर रहा हूं?

धन्यवाद।

Comments

शायद आपको ImageView को अपने LinearLayout में एनकैप्सुलेट करने की कोशिश करनी चाहिए। इस तरह आप LinearLayout टैग को ठीक उसी तरह कॉन्फ़िगर कर सकते हैं जैसा आप चाहते हैं और फिर बस ImageView को भर दें।

— दानी

@ दानी आपका क्या मतलब है? मैं अभी भी ImageView को ठीक उसी तरह कॉन्फ़िगर कर सकता हूं जैसा मैं चाहता हूं। क्या आप मुझे कुछ उदाहरण दे सकते हैं?

— rogcg

मुझे लगता है कि आपको छवियों से अंगूठे बनाने की आवश्यकता है, जो सभी समान हैं, पूर्व 100x100 या जो कुछ भी आपको उनकी आवश्यकता है। यदि आप अपनी उदाहरण छवि पर देख सकते हैं, तो आप जिस प्रभाव को देख रहे हैं वह छवि का केवल एक भाग है। और आपके प्रोजेक्ट में यू सिर्फ ओरिजिनल इमेज दिखाता है, जो गलत है अगर यू गैलरी बनाने की जरूरत है। एंड्रॉइड देव वेब साइट में अंगूठे की तलाश करने की कोशिश करें :)

— Vasil Valchev

@VasilValchev लेकिन समस्या यह है, भले ही मैं अंगूठे (जैसे कि 100x100) बनाता हूं, मुझे अलग-अलग स्क्रीन आकारों के लिए इसका आकार बदलने की आवश्यकता है। मैं इमेज व्यू scaleTypeपर सेंटरकॉप प्रॉपर्टी का उपयोग करता हूं । मुझे जो प्राप्त करने की आवश्यकता है वह चित्रों को एक साथ करने का एक तरीका है, और विभिन्न स्क्रीन आकारों के लिए स्वचालित रूप से आकार बदलता है।

— rogcg

आप हमेशा क्षैतिज सफ़ेद कोड में स्क्रीन आकार प्राप्त कर सकते हैं और बस इसे / 2 से विभाजित कर सकते हैं। यदि आप अपने प्रोजेक्ट में देख सकते हैं कि समस्या ऊँचाई पर है, अगर आपको पता है कि वास्तव में आपका वज़न क्या है तो आप एक सही आयत बना सकते हैं। मैं यह नहीं देखता कि समस्या कहां है?

— वासिल वेलेव

Answer 1

यहाँ यह करने के लिए एक अपेक्षाकृत आसान तरीका है। अपने लेआउट में एक GridView फेंकें, स्तंभ की चौड़ाई को फैलाने के लिए खिंचाव मोड सेट करें, रिक्ति को 0 पर सेट करें (या जो भी आप चाहते हैं), और कॉलम की संख्या 2 पर सेट करें:

रेस / लेआउट / 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 / उदाहरण / 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 का उपयोग करके एक ग्रिड आइटम के लिए एक लेआउट बनाएं और केंद्र के लिए पैमाना टाइप करें:

रेस / लेआउट / 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 / उदाहरण / 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));
}

और परिणाम का आनंद लें:

Comments

इसने काम कर दिया! लेकिन मैं चाहूंगा कि आप मुझे एक क्लास बनाने की आवश्यकता समझाएं ImageViewऔर क्यों xml फ़ाइल में <com.example.graphicstest.SquareImageView>एक साधारण <ImageView>टैग के बजाय कुछ इस तरह का उपयोग करें । क्या आप मुझे इस पहलू अनुपात के बारे में अधिक समझा सकते हैं , और इस वर्ग को कैसे नहीं बना सकते हैं, यह आइटम को प्रभावित करता है। क्या कस्टम वर्ग की आवश्यकता के बिना इसे अनुकूलित करने का कोई तरीका है ? वैसे भी आपकी मदद के लिए धन्यवाद। ImageView

— rogcg

मूल रूप से, एंड्रॉइड के इमेज व्यू वर्ग में, "जब तक आप हार्ड कोड की चौड़ाई और ऊंचाई नहीं लेते हैं, तब तक" इस दृश्य के लिए एक वर्ग पहलू अनुपात (चौड़ाई / ऊंचाई) रखें, इसका कोई तरीका नहीं है। आप एडॉप्टर के getView में LayoutParams का कुछ मैनुअल समायोजन कर सकते हैं, लेकिन स्पष्ट रूप से, यह ImageView को सभी मापों को संभालने देने के लिए बहुत सरल है, और परिणामों को ओवरराइड करने के लिए कहना होगा "जो भी चौड़ाई समाप्त हो रही है, मेरी ऊंचाई समान रखें"। आपको इसके बारे में कभी नहीं सोचना चाहिए, यह हमेशा चौकोर होता है, और यह सिर्फ उम्मीद के मुताबिक काम करता है। मूल रूप से यह दृश्य वर्ग रखने का सबसे आसान तरीका है।

— केविन कोप्पॉक

मैं कस्टम ImageView वर्ग बनाने से बचने के लिए एक कारण के बारे में नहीं सोच सकता , जैसा कि आप इसके साथ वह सब कुछ कर सकते हैं, जो आप एक नियमित ImageView के साथ कर सकते हैं, लेकिन यह आपको माप और लेआउटप्रेम की तात्कालिकता और सभी जगह जाँच करने से रोकता है। ।

— केविन कोपॉक

संपादन के लिए धन्यवाद, सोचा कि यह एक आकर्षण की तरह काम कर सकता है!

— ज़ेंडर

@kcoppock: इस कोड को साझा करने के लिए बहुत बहुत धन्यवाद। मुझे जो सबसे ज्यादा पसंद है वह यह है कि आप "वास्तविक" चित्रों द्वारा छवि के लिए रंगों को बदल सकते हैं और ठीक से आकार ले सकते हैं! क्या मैं समझना चाहूंगा कि क्या यह संभव है कि विचारों का आकार बदल सके ताकि एक निश्चित संख्या में दृश्य पूरे स्क्रीन को भर दें।

— एंटोनसैक

Answer 2

आधुनिक अंतर्निहित सामान जैसे 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>

और बेहतर प्रदर्शन के लिए आप कुछ सामान का उपयोग कर सकते हैं जैसे पिकासो इमेज लोडर जो आपको हर छवि माता-पिता की पूरी चौड़ाई भरने में मदद करता है। अपने एडेप्टर में उदाहरण के लिए आपको इसका उपयोग करना चाहिए:

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 का उपयोग करने की सलाह देता हूं।

उममीद है कि इससे मदद मिलेगी..

Comments

एपीआई 26.1 के साथ यह समाप्त हो गया। लिंक

— डोमिनिकनस के।