带有页面指示器的 Android 视图寻呼机

Android view pager with page indicator

提问by vuhung3990

I need to get page indicator in the view pager file with images. Here is my code.

我需要在带有图像的视图寻呼机文件中获取页面指示器。这是我的代码。

public class IndicatorActivity extends Activity {


 /** Called when the activity is first created. */
    @Override

        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            MyPagerAdapter adapter = new MyPagerAdapter();
            ViewPager myPager = (ViewPager) findViewById(R.id.pager);
            myPager.setAdapter(adapter);
            myPager.setCurrentItem(0);
            TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat);
            indicator.setViewPager( myPager );
    }
}

In this code, i got an error in TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat);as TitlePageIndicator cannot be resolved to a type. What is this error. How can I resolve it?

在这段代码中，我在TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat);as 中遇到了错误 TitlePageIndicator cannot be resolved to a type。这是什么错误。我该如何解决？

here is my xml code:

这是我的 xml 代码：

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
    <com.viewpagerindicator.TitlePageIndicator
    android:id="@+id/indicat"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" />
</LinearLayout>

What code do I need to write in the TitlePageIndicator? I want to do this without using fragments.

我需要在里面写什么代码TitlePageIndicator？ 我想在不使用 Fragments 的情况下做到这一点。

Me also created a class such as:

我还创建了一个类，例如：

class MyPagerAdapter extends PagerAdapter {

     private static Integer[] titles = new Integer[] 
                { 
        R.drawable.jk,R.drawable.lm,R.drawable.no
                };

    public int getCount() {
            return 3;
    }

    public Object instantiateItem(View collection, int position) {

            LayoutInflater inflater = (LayoutInflater) collection.getContext()
                            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view;
            ImageView iv;

            view = inflater.inflate(R.layout.first, null);

            ((ViewPager) collection).addView(view, 0);
            switch (position) {
            case 0:
                iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            case 1:
                iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            case 2:
                 iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            }
            return view;
    }

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

    }



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

    }

}

Did I want to do anything more than this class?

除了这门课，我还想做些什么吗？

Thanks in advance for help

预先感谢您的帮助

采纳答案by Benito Bertoli

Here are a few things you need to do:

以下是您需要做的一些事情：

1-Download the libraryif you haven't already done that.

1-如果您尚未下载该库，请下载该库。

2- Import into Eclipse.

2- 导入 Eclipse。

3- Set you project to use the library: Project-> Properties -> Android -> Scroll down to Library section, click Add...and select viewpagerindicator.

3- 将您的项目设置为使用库：项目-> 属性-> Android -> 向下滚动到库部分，单击添加...并选择 viewpagerindicator。

4- Now you should be able to import com.viewpagerindicator.TitlePageIndicator.

4- 现在您应该可以导入com.viewpagerindicator.TitlePageIndicator.

Now about implementing this without using fragments:

现在关于在不使用片段的情况下实现这一点：

In the sample that comes with viewpagerindicatior, you can see that the library is being used with a ViewPagerwhich has a FragmentPagerAdapter.

在viewpagerindicatior附带的示例中，您可以看到库正在与ViewPager具有FragmentPagerAdapter.

But in fact the library itself is Fragmentindependant. It just needs a ViewPager. So just use a PagerAdapterinstead of a FragmentPagerAdapterand you're good to go.

但实际上图书馆本身是Fragment独立的。它只需要一个ViewPager. 所以只需使用 aPagerAdapter而不是 aFragmentPagerAdapter就可以了。

回答by vuhung3990

UPDATE:22/03/2017

更新：22/03/2017

main fragment layout:

主要片段布局：

       <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <RadioGroup
                android:id="@+id/page_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:layout_marginBottom="@dimen/margin_help_container"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/page1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true" />

                <RadioButton
                    android:id="@+id/page2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <RadioButton
                    android:id="@+id/page3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </RadioGroup>
        </FrameLayout>

set up view and event on your fragment like this:

像这样在你的片段上设置视图和事件：

        mViewPaper = (ViewPager) view.findViewById(R.id.viewpager);
        mViewPaper.setAdapter(adapder);

        mPageGroup = (RadioGroup) view.findViewById(R.id.page_group);
        mPageGroup.setOnCheckedChangeListener(this);

        mViewPaper.addOnPageChangeListener(this);

       *************************************************
       *************************************************

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        // when current page change -> update radio button state
        int radioButtonId = mPageGroup.getChildAt(position).getId();
        mPageGroup.check(radioButtonId);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
        // when checked radio button -> update current page
        RadioButton checkedRadioButton = (RadioButton)radioGroup.findViewById(checkedId);
        // get index of checked radio button
        int index = radioGroup.indexOfChild(checkedRadioButton);

        // update current page
        mViewPaper.setCurrentItem(index), true);
    }

custom checkbox state: Custom checkbox image android

自定义复选框状态：自定义复选框图像android

Viewpager tutorial: http://architects.dzone.com/articles/android-tutorial-using

Viewpager 教程：http: //architects.dzone.com/articles/android-tutorial-using

回答by JRod

I know this has already been answered, but for anybody looking for a simple, no-frills implementation of a ViewPager indicator, I've implemented one that I've open sourced. For anyone finding Jake Wharton's version a bit complex for their needs, have a look at https://github.com/jarrodrobins/SimpleViewPagerIndicator.

我知道这已经得到了回答，但是对于任何寻找简单、简洁的 ViewPager 指标实现的人来说，我已经实现了一个我已经开源的。对于任何发现 Jake Wharton 的版本对他们的需求来说有点复杂的人，请查看 https://github.com/jarrodrobins/SimpleViewPagerIndicator。

回答by Terence

I have also used the SimpleViewPagerIndicator from @JROD. It also crashes as described by @manuelJ.

我还使用了@JROD 的 SimpleViewPagerIndicator。它也会按照@manuelJ 的描述崩溃。

According to his documentation:

根据他的文档：

SimpleViewPagerIndicator pageIndicator = (SimpleViewPagerIndicator) findViewById(R.id.page_indicator);
pageIndicator.setViewPager(pager);

Make sure you add this line as well:

确保你也添加了这一行：

pageIndicator.notifyDataSetChanged();

It crashes with an array out of bounds exception because the SimpleViewPagerIndicator is not getting instantiated properly and the items are empty. Calling the notifyDataSetChanged results in all the values being set properly or rather reset properly.

它因数组越界异常而崩溃，因为 SimpleViewPagerIndicator 未正确实例化并且项目为空。调用 notifyDataSetChanged 会导致正确设置或正确重置所有值。

回答by Andrea

Just an improvement to the nice answer given by @vuhung3990. I implemented the solution and works great but if I touch one radio button it will be selected and nothing happens.

只是对@vuhung3990 给出的好答案的改进。我实施了该解决方案并且效果很好，但是如果我触摸一个单选按钮，它将被选中并且没有任何反应。

I suggest to also change page when a radio button is tapped. To do this, simply add a listener to the radioGroup:

我建议在点击单选按钮时也更改页面。为此，只需向 radioGroup 添加一个侦听器：

mPager = (ViewPager) findViewById(R.id.pager);
final RadioGroup radioGroup = (RadioGroup)findViewById(R.id.radiogroup);    
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.radioButton :
                        mPager.setCurrentItem(0, true);
                        break;
                    case R.id.radioButton2 :
                        mPager.setCurrentItem(1, true);
                        break;
                    case R.id.radioButton3 :
                        mPager.setCurrentItem(2, true);
                        break;
                }
            }
        });

回答by gAuRaV jAiN

you have to do following:

您必须执行以下操作：

1-Download the full project from here https://github.com/JakeWharton/ViewPagerIndicatorViewPager Indicator2- Import into the Eclipse.

1-从这里下载完整的项目https://github.com/JakeWharton/ViewPagerIndicator ViewPager Indicator2- 导入 Eclipse。

After importing if you want to make following type of screen then follow below steps -

导入后，如果要制作以下类型的屏幕，请按照以下步骤操作 -

change in

在某一方面的变化

Sample circles Default

示例圆圈默认

  package com.viewpagerindicator.sample;
  import android.os.Bundle;  
  import android.support.v4.view.ViewPager;
  import com.viewpagerindicator.CirclePageIndicator;

  public class SampleCirclesDefault extends BaseSampleActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.simple_circles);

    mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

    mPager = (ViewPager)findViewById(R.id.pager);
  //  mPager.setAdapter(mAdapter);

    ImageAdapter adapter = new ImageAdapter(SampleCirclesDefault.this);
    mPager.setAdapter(adapter);


    mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
    mIndicator.setViewPager(mPager);
  }
}

ImageAdapter

图像适配器

 package com.viewpagerindicator.sample;

 import android.content.Context;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.TextView;

 public class ImageAdapter extends PagerAdapter {
 private Context mContext;

 private Integer[] mImageIds = { R.drawable.about1, R.drawable.about2,
        R.drawable.about3, R.drawable.about4, R.drawable.about5,
        R.drawable.about6, R.drawable.about7

 };

 public ImageAdapter(Context context) {
    mContext = context;
 }

 public int getCount() {
    return mImageIds.length;
 }

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

 public long getItemId(int position) {
    return position;
 }

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

    LayoutInflater inflater = (LayoutInflater) container.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View convertView = inflater.inflate(R.layout.gallery_view, null);

    ImageView view_image = (ImageView) convertView
            .findViewById(R.id.view_image);
    TextView description = (TextView) convertView
            .findViewById(R.id.description);

    view_image.setImageResource(mImageIds[position]);
    view_image.setScaleType(ImageView.ScaleType.FIT_XY);

    description.setText("The natural habitat of the Niligiri tahr,Rajamala          Rajamala is 2695 Mts above sea level"
        + "The natural habitat of the Niligiri tahr,Rajamala Rajamala is 2695 Mts above sea level"
                    + "The natural habitat of the Niligiri tahr,Rajamala Rajamala is 2695 Mts above sea level");

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

    return convertView;
 }

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

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((ViewGroup) object);
 }
}

gallery_view.xml

画廊视图.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/about_bg"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/about_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1" >

    <LinearLayout
        android:id="@+id/about_layout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".4"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/view_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:background="@drawable/about1">
     </ImageView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/about_layout2"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight=".6"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SIGNATURE LANDMARK OF MALAYSIA-SINGAPORE CAUSEWAY"
            android:textColor="#000000"
            android:gravity="center"
            android:padding="18dp"
            android:textStyle="bold"
            android:textAppearance="?android:attr/textAppearance" />


        <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:fillViewport="false"
            android:orientation="vertical"
            android:scrollbars="none"
            android:layout_marginBottom="10dp"
            android:padding="10dp" >

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColor="#000000"
                android:text="TextView" />

            </ScrollView>
    </LinearLayout>
 </LinearLayout>

回答by Rohan Bari

You Can create a Linear layout containing an array of TextView (mDots). To represent the textView as Dots provide this HTML source in your code . refer my code . I got this information from Youtube Channel TVAC Studio . here the code : `

您可以创建一个包含 TextView (mDots) 数组的线性布局。要将 textView 表示为点，请在您的代码中提供此 HTML 源代码。参考我的代码。我从 Youtube Channel TVAC Studio 得到了这些信息。这里的代码：`

    addDotsIndicator(0);
    viewPager.addOnPageChangeListener(viewListener);
}

public void addDotsIndicator(int position)
{
        mDots = new TextView[5];
        mDotLayout.removeAllViews();

        for (int i = 0; i<mDots.length ; i++)
        {
             mDots[i]=new TextView(this);
             mDots[i].setText(Html.fromHtml("&#8226;"));            //HTML for dots
             mDots[i].setTextSize(35);
             mDots[i].setTextColor(getResources().getColor(R.color.colorAccent));

             mDotLayout.addView(mDots[i]);
        }

        if(mDots.length>0)
        {
            mDots[position].setTextColor(getResources().getColor(R.color.orange));
        }
}

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

    }

    @Override
    public void onPageSelected(int position) {

        addDotsIndicator(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
};`