简体   繁体   English

无限滚动图库视图,带有文字说明

[英]Infinite Scrolling Gallery View with text description

I have infinite gallery based on this example : 基于这个例子,我有无限的画廊:

http://blog.blundell-apps.com/infinite-scrolling-gallery/ , http://blog.blundell-apps.com/infinite-scrolling-gallery/ ,

It runs nicely, now I want to have the Gallery still scroll through the images and under each image there should be a text caption . 它运行得很好,现在我想让图库仍然滚动图像, 每个图像下面应该有一个文本标题

I searched net with no result, would you please help me in coding that, just beginner in development. 我搜索网没有结果,请你帮我编码,只是初学者在开发中。

================================================================================== ================================================== ================================

NEW Update : 新更新

upload photo explane what i need exactly which i get it with normal gallery (applied text to each image and able to customize text too as shown down image ,and each image has diffrenet text than others , but still not succeed to do it with infinite gallery : 上传照片解释我需要的东西我用普通画廊得到它(应用文本到每个图像,并能够自定义文本,如下图所示,每个图像都有diffrenet文本比其他图像,但仍然没有成功用无限画廊做到这一点:

在此输入图像描述

PLEASE ANY HELP AND ADVICE . 请任何帮助和建议。

THANKS ALOT. 非常感谢。

I went through Blundell's tutorial and thanks to him I know how to make an Infinitelyscrolling gallery :) 我浏览了Blundell的教程,感谢他,我知道如何创建一个Infinitelyscrolling画廊:)

To answer the question, about how to add a text caption below each of the images , I made same small changes to Blundell's nice tut and used some of his suggestions in the above answer and I think I got a nice way of doing the task. 为了回答这个问题,关于如何在每个图像下面添加文本标题 ,我对Blundell的漂亮啧啧进行了相同的小改动,并在上面的答案中使用了他的一些建议,我认为我有一个很好的方法来完成任务。

The code below doesnt inflate or use gallery_item.xml at all , so it will increase the performance significantly compared to the way when you are inflating it every time. 下面的代码根本不会膨胀或使用gallery_item.xml ,因此与每次充气时相比,它会显着提高性能。

Trimmed down code of classes from Blundell's tutorial ( because in the question, you are using only resources and not sdcard). 修剪Blundell教程中的类代码(因为在这个问题中,你只使用资源而不是sdcard)。

public class InfiniteScrollingGalleryActivity extends Activity {

public class GalleryItem{
      int imageId;
      String caption;
       public int getImageId() {
        return imageId;     }

    public String getCaption() {
        return caption;
    }
        public GalleryItem(int i,String s) {
        imageId=i;
        caption=s;  }   
}

int[] resourceImages = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
        R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher};

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
     GalleryItem[] item = new GalleryItem[6];
        //initialising all items, change member variables according to needs
    for(int i=0;i<6;i++){
        item[i] = new GalleryItem(resourceImages[i], "pic no" +(i+1));          }                
    setContentView(R.layout.activity_main);
     InfiniteGallery galleryOne = (InfiniteGallery) findViewById(R.id.galleryOne);
    galleryOne.setResourceGallery(item);
     }  }

Here I have added the GalleryItem class array and passed it. 这里我添加了GalleryItem类数组并传递了它。

Also added the below code in InfiniteGalley class. 还在InfiniteGalley类中添加了以下代码。

public void setResourceGallery(GalleryItem[] item) {
        setAdapter(new InfiniteGalleryResourceAdapter(getContext(), item));
        setSelection((getCount() / 2));
    }

below code's getView() is where the good things happen : 在代码的getView()下面是好事发生的地方:

 public class InfiniteGalleryResourceAdapter extends BaseAdapter {

    /** The context your gallery is running in (usually the activity) */
    private Context mContext;   
 GalleryItem[] myItems; 

    public InfiniteGalleryResourceAdapter(Context context, GalleryItem[] item) {
        this.mContext = context;
            myItems=item;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // convertView is always null in android.widget.Gallery
        TextView t = new TextView(mContext);
        try {           
            int itemPos = (position % myItems.length);
            t.setText(myItems[itemPos].getCaption());
            Drawable d = mContext.getResources().getDrawable(myItems[itemPos].getImageId());
            ((BitmapDrawable) d).setAntiAlias(true); // Make sure we set anti-aliasing otherwise we get jaggies (non-smooth lines)

            //d.setBounds(0,0,60,60); //use this to change dimens of drawable,if needed
            t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null);

        } catch (OutOfMemoryError e) {
            // a 'just in case' scenario
            Log.e("InfiniteGalleryResourceAdapter", "Out of memory creating imageview. Using empty view.", e);
        }

        return t;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

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

    @Override
    public long getItemId(int position) {
        return position;
    }
    /** The width of each child image */
    private static final int G_ITEM_WIDTH = 120;
    /** The height of each child image */
    private static final int G_ITEM_HEIGHT = 80;
    private int imageWidth;
    private int imageHeight;
}

In getView() , I am just creating a textView and assigning the drawable to it using the handy t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null); getView() ,我只是创建一个t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null);并使用方便的t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null);分配drawable t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null); . So it excludes the need of inflating layouts which is a heavy operation. 因此, 排除夸大的布局是一项繁重的操作的需要。

Below is the output image: 以下是输出图像:

在此输入图像描述

In the adapter you can see the method: getView, you can see this method returns an ImageView, so now you want the getView method to return an imageview and textview... 在适配器中你可以看到方法:getView,你可以看到这个方法返回一个ImageView,所以现在你想让getView方法返回一个imageview和textview ...

U can do this in a few ways, here how you can do it with a LayoutInflater 你可以通过几种方式实现这一点,在这里你可以用LayoutInflater来做到这一点

View v = getLayoutInflater().inflate(R.layout.gallery_item, null);
((ImageView) v.findViewById(R.id.img)).setImageResource(imageIds[position]);
((TextView) v.findViewById(R.id.caption)).setText(captions[position]);

So in your res/layout folder you should have an 'gallery_item' layout that contains an ImageView (img) and a TextView (caption) 所以在你的res / layout文件夹中你应该有一个'gallery_item'布局,其中包含一个ImageView(img)和一个TextView(标题)

ie

gallery_item.xml gallery_item.xml

 <LinearLayout>
      <ImageView ... />
      <TextView ... />
 </LinearLayout>

Hope this was helpfull! 希望这有用!

EDIT 编辑

so as the above example shows you would need two arrays, one of imageIds and one of textCaptions. 因此,上面的示例显示您需要两个数组,一个是imageIds,另一个是textCaptions。 To keep your Adapter nice and clean it's screaming for you to make an object. 为了让你的适配器保持良好和清洁,它会尖叫你制作一个物体。

 public class GalleryItem {
       int imageId;
       String caption

       // Constructor

       // getters and setters

 }

You could then pass an Array or List of your GalleryItems to the Adapter (replacing the setAdapter method). 然后,您可以将GalleryItems的数组或列表GalleryItems给适配器(替换setAdapter方法)。 ie: 即:

 GalleryItem[] items = new GalleryItem[];

Then in your getView method as outlined above you would extract each object: 然后在上面概述的getView方法中,您将提取每个对象:

 GalleryItem item = items[position];
 View v = getLayoutInflater().inflate(R.layout.gallery_item, null);

((ImageView) v.findViewById(R.id.img)).setImageResource(item.getImageId());
((TextView) v.findViewById(R.id.caption)).setText(item.getCaption());

Hope thats clear 希望那清楚

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM