将3个图像动态插入水平滚动视图或Viewpager

时间:2012-12-07 05:12:13

标签: android android-layout android-intent android-widget android-scrollview

下面显示了我正在寻找的图像。目前我正在使用view pager&圆圈指示器。在视图页面中,它只显示一个图像。

我想在一个viewpager中找到三张图片,如图所示。当我滑动该页面时,再次从服务器加载三个不同的图像,下面是文本。这该怎么做?关于这个或任何其他方式实现这一点的任何想法?

我的代码如下所示。

我在这里添加了一些xml布局:homespizzaview.xml

  <LinearLayout
        android:id="@+id/linearLayoutbutton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip" >

   <android.support.v4.view.ViewPager
    android:id="@+id/pagerMenu"
    android:layout_width="0dip"
    android:layout_height="100dip"
    android:layout_weight="1"
    android:layout_marginLeft="10dip"
    android:layout_marginRight="10dip">

          </android.support.v4.view.ViewPager>   
    </LinearLayout>


  <RelativeLayout
    android:id="@+id/relativeLayoutDot1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dip">
  <com.viewpagerindicator.CirclePageIndicator
   android:id="@+id/indicatorMenu"
   android:layout_width="fill_parent"
   android:layout_height="25dip"
   android:layout_marginLeft="10dip"
   android:layout_marginRight="10dip"
   android:padding="10dip" />

 </RelativeLayout>

HomeView .java

 public class HomeView extends Activity {

    adaptermenu = new MenuPagerAdapter();
    pagerMenu = (ViewPager)findViewById(R.id.pagerMenu);
    pagerMenu.setAdapter(adaptermenu);
    pagerMenu.setCurrentItem(0);
    pagerMenu.setOffscreenPageLimit(adapter.getCount());
    pagerMenu.getAdapter().notifyDataSetChanged();
    pagerMenu.setPageMargin(15);

    indicator  = (CirclePageIndicator)findViewById(R.id.indicatorMenu);
    indicator.setViewPager(pagerMenu);

    final float density1 = getResources().getDisplayMetrics().density;
    indicator.setRadius(5 * density1);
    indicator.setPageColor(0xFF000000);
    indicator.setFillColor(0xFF888888);
    indicator.setStrokeWidth(2 * density1);

    //We set this on the indicator, NOT the pager
    indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             
        @Override
        public void onPageSelected(int position) {
         //   Toast.makeText(HomeSpizzaView.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
            pagerMenu.setCurrentItem(position, false);            
        }
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageScrollStateChanged(int state) {               
        }
    });

    indicator.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {

            pagerMenu.setCurrentItem(0);  
          Log.i("", "getCurrentItem"+  mPager.getCurrentItem());
          pagerMenu.getAdapter().notifyDataSetChanged();
        }
    });

       }
    } 

MenuPagerAdapter.java

 public class MenuPagerAdapter extends PagerAdapter {


public int getCount() {
    return 3;
}

public Object instantiateItem(View collection, int position) {

    ImageView image = new ImageView(collection.getContext()); 
    image.setPadding(20, 0, 20, 0);     
    int resId = 0;
    switch (position) {
    case 0:
        resId = R.drawable.promotion1;
        break;
    case 1:
        resId = R.drawable.promotion2;
        break;
    case 2:
        resId = R.drawable.promotion3;
        break;
    }
    image.setImageResource(resId); 
    ((ViewPager) collection).addView(image, 0);

    return image;
}

@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
    ((ViewPager) arg0).removeView((View) arg2);

}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0 == ((View) arg1);

}

@Override
public Parcelable saveState() {
    return null;
}
}

这里是更新代码,显示单个图像视图,下面是textview。我正在寻找动态图像&amp;文本..意思在1视图寻呼机3图像与3文本..目前它显示1图像视图与下面的文字..我在单个viewpager寻找3图像..如果我添加线性布局它显示3图像。但我添加相对布局显示单个图像..任何想法我做了什么错误。

 public Object instantiateItem(View collection, int position) {

    RelativeLayout  lLayout;      
    RelativeLayout.LayoutParams relativeLayout;

    lLayout = new RelativeLayout (collection.getContext());
      relativeLayout = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);

        for (int i = 0; i < 3; i++) {
            image = new ImageView(collection.getContext());
            image.setPadding(20, 0, 20, 0); 
            image.setId(1);
            int res = 0;
          switch (0) {
          case 0:
              res = R.drawable.menu_antipasti;          
              break;
          case 1:
              res = R.drawable.menu_combos;
              break;
          case 2:
              res = R.drawable.menu_drinks;
              break;
          }                  
            image.setImageResource(res);
            lLayout.addView(image);

            textview = new TextView(collection.getContext());
            textview.setTextColor(Color.BLACK);
            textview.setId(2);
            textview.setText("pizza");  
            textview.setPadding(60, 0, 20, 0);
            relativeLayout.addRule(RelativeLayout.BELOW, image.getId());
            lLayout.addView(textview, relativeLayout);
        }

        ((ViewPager) collection).addView(lLayout, 0);
        return lLayout;
    }

1 个答案:

答案 0 :(得分:2)

现在您从ImageView方法返回instantiateItem。如果您想在1页上有3张图像,则需要创建布局,在其上放置3张图像并将其返回。 E.g:

public Object instantiateItem(View collection, int position) {
    LinearLayour images = new LinearLayout(collection.getContext());
    for (int i = 0; i < 3; i++) {
        ImageView image = new ImageView(collection.getContext());
        image.setPadding(20, 0, 20, 0);     
        images.addView(image);
        int res = someResource depending on i and position.
        image.setImageResource(res);
    }

    ((ViewPager) collection).addView(images, 0);
    return images;
}