使用ViewPager

时间:2017-05-21 21:14:47

标签: java android android-viewpager

嘿,我对Java比较陌生。到目前为止,我有一个活动,图像可以滑动,捏缩放,并使页面点与图像同步移动。我想添加一个TextView,它与图像下面的每个特定图像一起使用,以便它们彼此同步滑动。要清楚;我希望每个幻灯片的图像都有不同的文本视图。我怎样才能做到这一点?

编辑:找到解决方案 - 请查看下面的答案!

这是我正在使用的主要课程:

public class Location2Images extends AppCompatActivity {

ViewPager viewPager;
LinearLayout sliderDotspanel;
private int dotscount;
private ImageView[] dots;

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


    viewPager = (ViewPager) findViewById(R.id.viewPager);

    sliderDotspanel = (LinearLayout) findViewById(R.id.SliderDots);

    ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);

    viewPager.setAdapter(viewPagerAdapter);

    dotscount = viewPagerAdapter.getCount();
    dots = new ImageView[dotscount];

    for (int i = 0; i < dotscount; i++) {

        dots[i] = new ImageView(this);
        dots[i].setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.nonactive_dot));

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

        params.setMargins(8, 0, 8, 0);

        sliderDotspanel.addView(dots[i], params);

    }

    dots[0].setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.active_dot));

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

            for (int i = 0; i < dotscount; i++) {
                dots[i].setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.nonactive_dot));
            }

            dots[position].setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.active_dot));

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}

}

这是我为PagerAdapter创建一个类的地方:

public class ViewPagerAdapter extends PagerAdapter {

private Context context;
private LayoutInflater layoutInflater;
private Integer[] images = {R.drawable.image2a,R.drawable.image2b,R.drawable.image3a};

public ViewPagerAdapter(Context context) {
    this.context = context;
}

@Override
public int getCount() {
    return images.length;
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, final int position) {

    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = layoutInflater.inflate(R.layout.custom_layout, null);
    PhotoView imageView = (PhotoView) view.findViewById(R.id.imageView);
    imageView.setImageResource(images[position]);

    ViewPager vp = (ViewPager) container;
    vp.addView(view, 0);
    return view;

}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {

    ViewPager vp = (ViewPager) container;
    View view = (View) object;
    vp.removeView(view);

}
}

这是我的主要xml布局:

    <LinearLayout
    android:id="@+id/SliderDots"
    android:layout_width="125dp"
    android:layout_height="28dp"
    android:layout_below="@+id/viewPager"
    android:layout_marginTop="206dp"
    android:gravity="center_vertical|center_horizontal"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_bias="0.502"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="2dp"
    app:layout_constraintVertical_bias="0.37"></LinearLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="349dp"
    android:layout_height="296dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.545"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.023" />

最后我的图像自定义xml布局(使用PhotoView库进行缩放):

    <com.github.chrisbanes.photoview.PhotoView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imageView" />

正如我所说,我是Java新手所以任何代码编辑都会有所帮助。提前谢谢!

2 个答案:

答案 0 :(得分:0)

转到“自定义xml布局”并添加线性/相对布局作为父级。将“PhotoView”代码放在该布局中,并在该布局中添加文本视图。

您的自定义XML布局如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.appslume.currencyconverter.MainActivity">

<com.github.chrisbanes.photoview.PhotoView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView" />

<TextView
    android:id="@+id/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:textSize="50sp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"/>
</RelativeLayout>

现在使用它的id访问适配器中的textview并使用它,但是要使用它。

答案 1 :(得分:0)

@ cricket_007帮助了我。这比我做的更容易。对于任何想要知道的人都可以参考我的代码...只需添加以下内容即可获得带有图片幻灯片的文字:

我的图像数组下的字符串数组:

private String[] texts = {"text1", "text2", "text3"}

定义文本的id(来自自定义xml布局):

TextView textView = (TextView) view.findViewById(R.id.textView);

最后在我的图片位置下设置位置:

textView.setText(texts[position]);

另外显然要记住在自定义xml布局中添加textview