在android中使用带有自定义布局的pageviewer

时间:2013-05-17 11:36:43

标签: android android-viewpager

我是Android的新手,而画廊正在显示为折旧尝试使用viewpager概念动态加载包含imageview和textview的自定义布局一切都很好但是在加载viewpager时图像显示为左右两侧viewpager和显示大空间,所以问题是我们如何在使用viewpager时删除页面或视图之间的空间。 这是我尝试实现的屏幕截图: enter image description here

这就是我得到的:

enter image description here

所以当你看到红色圆圈的两个图像是那些正在添加到viewpager的图像,并且在两个图像之间有很多空间。

提到图像和文本在那里的pageadapter类

public class ImagePagerAdapter extends PagerAdapter {

    private ArrayList<Integer> filter_image_arr;
    private ArrayList<String> filter_desc;
    private Context mcontext;
    private LayoutInflater inflator;
    private View layout;
    private TextView filter_title;
    private ImageView filter_image;

    public ImagePagerAdapter(Context context) {
        // TODO Auto-generated constructor stub

        mcontext=context;
        /*
         * add image to the arraylist
         */
        filter_image_arr=new ArrayList<Integer>();
        filter_image_arr.add(R.drawable.cakenormal);
        filter_image_arr.add(R.drawable.blur);
        filter_image_arr.add(R.drawable.emboss);
        filter_image_arr.add(R.drawable.gray);
        filter_image_arr.add(R.drawable.hue);
        filter_image_arr.add(R.drawable.monochrome);
        filter_image_arr.add(R.drawable.nored);
        filter_image_arr.add(R.drawable.oil);
        filter_image_arr.add(R.drawable.pixellate);
        filter_image_arr.add(R.drawable.posterize);
        filter_image_arr.add(R.drawable.sepia);
        filter_image_arr.add(R.drawable.vibrance);
        filter_image_arr.add(R.drawable.vintage);

        /*
         * add the desc for the filter effect....
         *
         */
        filter_desc=new ArrayList<String>();
        filter_desc.add("NORMAL");
        filter_desc.add("BLUR");
        filter_desc.add("EMBOSS");
        filter_desc.add("GRAY");
        filter_desc.add("HUE");
        filter_desc.add("MONOCHROME");
        filter_desc.add("NO RED");
        filter_desc.add("OIL");
        filter_desc.add("PIXELATE");
        filter_desc.add("POSTERIZE");
        filter_desc.add("SEPIA");
        filter_desc.add("VIBRANCE");
        filter_desc.add("VINTAGE");

        inflator=(LayoutInflater) mcontext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        layout=inflator.inflate(R.layout.custom_gallery_item_layout, null);

        filter_image=(ImageView) layout.findViewById(R.id.filter_image);
        filter_image.setImageResource(filter_image_arr.get(position));
        filter_image.setScaleType(ImageView.ScaleType.FIT_START);
        int padding=mcontext.getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin);
        filter_image.setTag(position);
        //filter_image.setPadding(padding, padding, padding, padding);
        filter_title=(TextView) layout.findViewById(R.id.filter_desc);
        filter_title.setText(filter_desc.get(position));
        filter_title.setTag(position);

        ((ViewPager)container).addView(layout, 0);


        return layout;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0==((View)arg1);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return filter_image_arr.size();
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
        ((ViewPager)container).removeView((View)object);
    }


}

这里是将适配器添加到viewpager

的活动类
public class MainActivity extends Activity {

    //private GPUImageView gpuimageview;
    private Button save_image;
    private Context mcontext;
    private ViewPager gallery_pager;
    private ImagePagerAdapter pageadapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mcontext=MainActivity.this;

        //gpuimageview=(GPUImageView) findViewById(R.id.gpuimageview);


        gallery_pager=(ViewPager) findViewById(R.id.view_pager);

        gallery_pager.setPageMargin(-50);
        gallery_pager.setHorizontalFadingEdgeEnabled(true);
        gallery_pager.setFadingEdgeLength(30);

        pageadapter=new ImagePagerAdapter(mcontext);

        gallery_pager.setAdapter(pageadapter);

        gallery_pager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });

    }


}

所以任何人都可以告诉我第一个屏幕截图是如何实现的,或者我使用旧的画廊概念。

这里是包含viewpager

的xml部分
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >



    <RelativeLayout
        android:id="@+id/filtergallery_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="14dp"
        android:background="#AA000000" >

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            />
    </RelativeLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/gpuimageview"
        android:layout_alignParentLeft="true"
        android:text="save" />

</RelativeLayout>

这是自定义布局,其中包含我正在膨胀的imageview和textview

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

    <ImageView 
        android:id="@+id/filter_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_launcher"
        />

    <TextView
        android:id="@+id/filter_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/filter_image"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="3dp"
        android:background="#07000000"
        android:text="filter" />

</RelativeLayout>

所以任何帮助都会受到赞赏。谢谢。

1 个答案:

答案 0 :(得分:0)

WiewPager不支持wrap_content,您可以设置match_parent或固定大小。如果您设置wrap_content,那么系统会将其视为match_parent