দুটি কলাম এবং স্বয়ংক্রিয় পুনরায় আকার দেওয়া চিত্র সহ গ্রিডভিউ

Question

আমি দুটি কলাম দিয়ে গ্রিডভিউ করার চেষ্টা করছি। আমি এই চিত্রটির মতোই প্রতি সারি পাশে দুটি ফটো বোঝাতে চাইছি।

তবে আমার ছবিগুলির মধ্যে একই জায়গাগুলি রয়েছে কারণ এটি একই আকার নয়। আমি যা পাচ্ছি তা এখানে।

যেমন আপনি দেখতে পাচ্ছেন প্রথম ছবিটি কিংবদন্তিকে লুকিয়ে রাখে যা যোগাযোগের নাম এবং ফোন নম্বরটি দেখায়। এবং অন্যান্য ছবিগুলি সঠিকভাবে প্রসারিত হয় না।

আমার গ্রিডভিউ এক্সএমএল ফাইলটি এখানে। আপনি দেখতে পাচ্ছেন যে 200dpcolumnWidth সেট করা আছে । আমি এটি স্বয়ংক্রিয় হওয়া চাই , তাই ছবিগুলি প্রতিটি পর্দার আকারের জন্য স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে।

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

সম্ভবত আপনার নিজের লিনিয়ারলাউট এ চিত্রউইউকে সজ্জিত করার চেষ্টা করা উচিত। আপনি লাইনারিআলআউট ট্যাগটি ঠিক যেমনটি চান ঠিক তেমন কনফিগার করতে পারেন এবং তারপরে কেবল চিত্রভিউটি এটি পূরণ করতে পারেন।

— দানি 1

@ দানি মানে কি? আমি এখনও চাই ঠিক মতো চিত্রকল্পটি কনফিগার করতে পারি। আপনি আমাকে কিছু উদাহরণ দিতে পারেন?

— rogcg

আমি মনে করি আপনাকে চিত্রগুলি থেকে থাম্বগুলি তৈরি করতে হবে, যা সমস্ত একই, প্রাক্তন 100x100 বা আপনার যা প্রয়োজন। আপনি যদি আপনার উদাহরণের চিত্রটিতে দেখতে পারেন তবে আপনি যে প্রভাবটি খুঁজছেন তা হ'ল চিত্রের কেবল অংশ display এবং আপনার প্রকল্পে আপনি কেবল আসল চিত্রটি প্রদর্শন করেন যা আপনার গ্যালারী তৈরি করার প্রয়োজন হলে ভুল। অ্যান্ড্রয়েড ডেভ ওয়েব সাইটে

— থাম্বগুলি

@ ভাসিভালচেভ তবে সমস্যাটি হ'ল যদিও আমি থাম্বগুলি তৈরি করি (উদাহরণস্বরূপ 100x100) আমার বিভিন্ন পর্দার আকারের জন্য এটির আকার পরিবর্তন করতে হবে। আমি ইমেজভিউতে কেন্দ্র ক্রপ scaleTypeসম্পত্তিটি ব্যবহার করি না । আমার যা অর্জন করা দরকার তা হ'ল ছবি পাশাপাশি পাশাপাশি করা এবং বিভিন্ন পর্দার আকারের জন্য স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করা।

— rogcg

আপনি সর্বদা অনুভূমিক শ্বেত কোডে পর্দার আকার পেতে পারেন এবং কেবল এটিকে 2/2 দিয়ে ভাগ করতে পারেন। আপনি যদি আপনার প্রকল্পে দেখতে পারেন যে সমস্যাটি উচ্চতার মধ্যে রয়েছে, আপনি যদি জানেন যে আপনার ওজনটি ঠিক কী তবে আপনি সর্বদা একটি সঠিক আয়তক্ষেত্র তৈরি করতে পারেন। আমি দেখতে পাচ্ছি না সমস্যাটা কোথায়?

— ভাসিল ভালচেভ

Answer 1

এটি করার জন্য এখানে তুলনামূলক সহজ পদ্ধতি। আপনার লেআউটে গ্রিডভিউ নিক্ষেপ করুন, কলাম প্রস্থকে প্রসারিত করার জন্য প্রসারিত মোডটি সেট করুন, ব্যবধানটি 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 / কম / উদাহরণস্বরূপ / 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
    }
}

এই স্কোয়ারআইমেজভিউটি ব্যবহার করে একটি গ্রিড আইটেমের জন্য একটি বিন্যাস করুন এবং স্কেলটাইপটিকে কেন্দ্রের ক্রপে সেট করুন:

মাঝামাঝি / লেআউট / 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 / কম / উদাহরণস্বরূপ / 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এবং এক্সএমএল ফাইলে <com.example.graphicstest.SquareImageView>সাধারণ <ImageView>ট্যাগের পরিবর্তে কেন এমন কিছু ব্যবহার করবেন । আপনি কি আমাকে এই দিক অনুপাত সম্পর্কে আরও ব্যাখ্যা করতে পারেন এবং কীভাবে এই শ্রেণিটি তৈরি করবেন না, আইটেমগুলিকে প্রভাবিত করে। কাস্টম ক্লাসের প্রয়োজন ছাড়াই এটিকে অনুকূল করার কোনও উপায় আছে ? যাইহোক আপনার সাহায্যের জন্য ধন্যবাদ। ImageView

— rogcg

মূলত, অ্যান্ড্রয়েডের ইমেজভিউ ক্লাসে, "হার্ড, এই ভিউটির জন্য একটি বর্গক্ষেত্রের অনুপাত (প্রস্থ / উচ্চতা)" নির্দিষ্ট করে দেওয়ার কোনও উপায় নেই, যদি না আপনার হার্ড কোডের প্রস্থ এবং উচ্চতা হয়। আপনি অ্যাডাপ্টারের গেটভিউতে লেআউটপ্যারামগুলির কিছু ম্যানুয়াল অ্যাডজাস্টমেন্ট করতে পারেন, তবে সত্যি বলতে, চিত্রভিউকে সমস্ত পরিমাপ হ্যান্ডেল করতে দেওয়া সহজ, এবং ফলাফলগুলি ওভাররাইড করে "যে প্রস্থটি যাই হোক না কেন, আমার উচ্চতা একই থাকে" say আপনাকে কখনই এটি নিয়ে ভাবতে হবে না, এটি সর্বদা বর্গাকার এবং এটি প্রত্যাশার মতোই কাজ করে। মূলত এটি ভিউ বর্গক্ষেত্র রাখার সবচেয়ে সহজ উপায়।

— কেভিন কপোকক

আমি কাস্টম ইমেজভিউ ক্লাসটি এড়াতে কোনও কারণ ভাবতে পারি না , কারণ আপনি নিয়মিত ইমেজভিউয়ের সাহায্যে যা কিছু করতে পারেন তা করতে পারেন, তবে এটি আপনাকে পরিমাপ এবং লেআউটপ্যারাম ইনস্ট্যান্টেশন করতে এবং পুরো জায়গা জুড়ে পরীক্ষা করা থেকে বিরত রাখে ।

— কেভিন কপোকক

সম্পাদনার জন্য ধন্যবাদ, ভেবেছিলাম এটি এমনই হতে পারে, যাদুর মতো কাজ করে!

— জেন্ডার

@ কেকপপক: এই কোডটি ভাগ করে নেওয়ার জন্য অনেক ধন্যবাদ। আমার সবচেয়ে বেশি যা পছন্দ তা হ'ল আপনি "রিয়েল" ছবি দ্বারা চিত্রদর্শনটির জন্য রঙগুলি প্রতিস্থাপন করতে পারেন এবং সেগুলি সঠিকভাবে পুনরায় আকার দেওয়া হয়েছে! আমি যা বুঝতে চাই তা হল যদি এর সম্ভাব্যতাগুলিকে পুনরায় আকার দেওয়া সম্ভব হয় যাতে নির্দিষ্ট সংখ্যক দর্শন পুরো পর্দাটি পূরণ করে।

— আন্তনস্যাক

Answer 2

আধুনিক অন্তর্নির্মিত স্টাফগুলির মতো আরেকটি সহজ পদ্ধতির স্টাফের পারসেন্টারেলেটিভালআউট হিসাবে নতুন ব্যবহারকারীদের জন্য এখন এই সমস্যাটি রয়েছে। এই আইটেমটি প্রকাশের জন্য অ্যান্ড্রয়েড দলকে ধন্যবাদ।

<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);

এখন আপনার আর কাস্টমআইমেজভিউ ক্লাস দরকার নেই।

পুনশ্চ আমি ক্লাস আইটেমের টাইপ ইন্টের জায়গায় ইমেজভিউ ব্যবহার করার পরামর্শ দিই।

এই সাহায্য আশা করি ..

Comments

এপিআই 26.1 এর সাথে এটি চিত্রিত হয়েছে। লিঙ্কটি

— ডোমিনিকাস কে।