将3个图像动态地横向滚动型或Viewpager [英] Insert 3 images dynamically to horizontal scrollview or Viewpager
本文介绍了将3个图像动态地横向滚动型或Viewpager的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有如下所示的我所期待的图像。目前我使用视图寻呼机放大器;圈指标。鉴于网页是只显示一个图像。
我想在一个viewpager三幅图像，如图照片。当我滑到该网页，再而三地不同的图像加载表格服务器下面的文字。如何做到这一点？任何有关这个或实现这一目标的任何其他方式的想法？
我的code如下图所示。
我添加一些XML布局在这里：homespizzaview.xml
＆LT;的LinearLayout
机器人：ID =@ + ID / linearLayoutbutton
机器人：layout_width =FILL_PARENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_marginTop =10dip＆GT;
＆LT; android.support.v4.view.ViewPager
机器人：ID =@ + ID / pagerMenu
机器人：layout_width =0dip
机器人：layout_height =100dip
机器人：layout_weight =1
机器人：layout_marginLeft =10dip
机器人：layout_marginRight =10dip＆GT;
＆LT; /android.support.v4.view.ViewPager>
＆LT; / LinearLayout中＆GT;
＆LT; RelativeLayout的
机器人：ID =@ + ID / relativeLayoutDot1
机器人：layout_width =FILL_PARENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_marginTop =5dip＆GT;
＆LT; com.viewpagerindicator.CirclePageIndicator
机器人：ID =@ + ID / indicatorMenu
机器人：layout_width =FILL_PARENT
机器人：layout_height =25dip
机器人：layout_marginLeft =10dip
机器人：layout_marginRight =10dip
机器人：填充=10dip/＆GT;
＆LT; / RelativeLayout的＆GT;
HomeView的.java
公共类HomeView延伸活动{
adaptermenu =新MenuPagerAdapter（）;
pagerMenu =（ViewPager）findViewById（R.id.pagerMenu）;
pagerMenu.setAdapter（adaptermenu）;
pagerMenu.setCurrentItem（0）;
pagerMenu.setOffscreenPageLimit（adapter.getCount（））;
pagerMenu.getAdapter（）notifyDataSetChanged（）。
pagerMenu.setPageMargin（15）;
指标=（CirclePageIndicator）findViewById（R.id.indicatorMenu）;
indicator.setViewPager（pagerMenu）;
最终浮动density1 = getResources（）getDisplayMetrics（）密度。
indicator.setRadius（5 * density1）;
indicator.setPageColor（0xFF000000）;
indicator.setFillColor（0xFF888888）;
indicator.setStrokeWidth（2 * density1）;
//我们设置这个的指标，而不是寻呼机
indicator.setOnPageChangeListener（新ViewPager.OnPageChangeListener（）{
@覆盖
公共无效onPageSelected（INT位置）{
// Toast.makeText（HomeSpizzaView.this，变更为网页+位置，Toast.LENGTH_SHORT）.show（）;
pagerMenu.setCurrentItem（位置，假）;
}
@覆盖
公共无效onPageScrolled（INT位置，浮positionOffset，诠释positionOffsetPixels）{
}
@覆盖
公共无效onPageScrollStateChanged（INT状态）{
}
}）;
indicator.setOnClickListener（新OnClickListener（）{
@覆盖
公共无效的onClick（视图v）{
pagerMenu.setCurrentItem（0）;
Log.i（，getCurrentItem+ mPager.getCurrentItem（））;
pagerMenu.getAdapter（）notifyDataSetChanged（）。
}
}）;
}
}
MenuPagerAdapter.java
公共类MenuPagerAdapter扩展PagerAdapter {
公众诠释getCount将（）{
返回3;
}
公共对象instantiateItem（查看收集，INT位置）{
ImageView的形象=新ImageView的（collection.getContext（））;
image.setPadding（20，0，20，0）;
INT渣油= 0;
开关（位置）{
情况下0：
渣油= R.drawable.promotion1;
打破;
情况1：
渣油= R.drawable.promotion2;
打破;
案例2：
渣油= R.drawable.promotion3;
打破;
}
image.setImageResource（渣油）;
（（ViewPager）集合）.addView（图像，0）;
返回形象;
}
@覆盖
公共无效destroyItem（查看为arg0，INT ARG1，ARG2对象）{
（（ViewPager）为arg0）.removeView（（查看）ARG2）;
}
@覆盖
公共布尔isViewFromObject（查看为arg0，对象ARG1）{
返回将arg0 ==（（查看）ARG1）;
}
@覆盖
公共Parcelable saveState和（）{
返回null;
}
}
下面是更新code这正显示出下面的TextView单张图像视图。我期待的动态影像和放大器;文字..是指在1查看传呼机3图像3文字。目前其显示下面的文字。我要寻找一个在单viewpager 3图像。1图像视图如果我添加线性布局也显示了3个图像。但我添加相对布局其显示单个图像..我做了什么MISTIKE任何想法。
公共对象instantiateItem（查看收集，INT位置）{
RelativeLayout的lLayout;
RelativeLayout.LayoutParams RelativeLayout的;
lLayout =新RelativeLayout的（collection.getContext（））;
RelativeLayout的=新RelativeLayout.LayoutParams（RelativeLayout.LayoutParams.FILL_PARENT，RelativeLayout.LayoutParams.FILL_PARENT）;
的for（int i = 0;我3;;我++）{
图像=新ImageView的（collection.getContext（））;
image.setPadding（20，0，20，0）;
image.setId（1）;
INT RES = 0;
开关（0）{
情况下0：
RES = R.drawable.menu_antipasti;
打破;
情况1：
RES = R.drawable.menu_combos;
打破;
案例2：
RES = R.drawable.menu_drinks;
打破;
}
image.setImageResource（RES）;
lLayout.addView（图像）;
TextView的=新的TextView（collection.getContext（））;
textview.setTextColor（Color.BLACK）;
textview.setId（2）;
textview.setText（比萨饼）;
textview.setPadding（60，0，20，0）;
relativeLayout.addRule（RelativeLayout.BELOW，image.getId（））;
lLayout.addView（TextView中，RelativeLayout的）;
}
（（ViewPager）集合）.addView（lLayout，0）;
返回lLayout;
}
解决方案
现在你回来的ImageView 从 instantiateItem 方法。如果你想对1页3图像，你需要创建布局，将3张图片上，并返回。例如：
公共对象instantiateItem（查看收集，INT位置）{
LinearLayour图像=新的LinearLayout（collection.getContext（））;
的for（int i = 0;我3;;我++）{
ImageView的形象=新ImageView的（collection.getContext（））;
image.setPadding（20，0，20，0）;
images.addView（图像）;
INT RES = someResource取决于我和位置。
image.setImageResource（RES）;
}
（（ViewPager）集合）.addView（图片，0）;
返回图像;
}
There is an image shown below for what I am looking for. Currently I am using view pager & circle indicator. In view page it is showing only a single image.
I want in one viewpager three images as shown in pic. When I slide that page, again three different images loaded form server with text below. How to do this? Any idea regarding this or any other way to achieve this?
My code is shown below.
I add some xml layout here: 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;
}
}
here is update code which is showing single image view with below textview. i am looking for dynamic image & text.. means In 1 view pager 3 images with 3 text.. currently its showing 1 image view with below text.. I am looking for 3 images in single viewpager.. if i add linear layout it shows 3 image. but i add relative layout its showing single images.. ANY IDEA WHAT I MADE MISTIKE.
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;
}
解决方案
Now you're returning ImageView from instantiateItem method. If you want to have 3 images on 1 page you need to create layout, place 3 images on it and return it. 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;
}
这篇关于将3个图像动态地横向滚动型或Viewpager的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
