ViewPager上的CirclePageIndicator

时间:2013-11-26 17:03:40

标签: android android-layout android-viewpager

在我的布局中,我试图让CirclePageIndicator坐在我的图像底部,并让我的图像在屏幕顶部对齐。无论我尝试什么它都行不通。以下是我希望它的样子:

enter image description here

它最终看起来像是这个

enter image description here

这是我的代码。

   <RelativeLayout android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="top">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="3dp"/>

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/pager"/>

</RelativeLayout>

因为它是一个ViewPager,我添加了滚动每个图像的功能。这是代码。

public class SectionsPagerAdapter extends FragmentPagerAdapter {        
    private int[] Images = new int[] { R.drawable.homephoneicon1, R.drawable.homephoneicon2,
            R.drawable.homephoneicon3, R.drawable.homephoneicon4, R.drawable.homephoneicon5};

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return SlideshowFragment.newInstance(Images[position]);
    }

    @Override
    public int getCount() {
        return NUM_SLIDES;
    }
}

以下是幻灯片代码

public class SlideshowFragment extends Fragment {
int imageResourceId;

public static SlideshowFragment newInstance(int i) {
    SlideshowFragment fragment = new SlideshowFragment();
    fragment.imageResourceId = i;

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    ImageView image = new ImageView(getActivity());
    image.setImageResource(imageResourceId);

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

    LinearLayout layout = new LinearLayout(getActivity());
    layout.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    layout.setGravity(Gravity.TOP);
    layout.addView(image, params);

    return layout;
}
}

感谢您的帮助!

4 个答案:

答案 0 :(得分:1)

我是这样做的

代码

public static SlideshowFragment newInstance(int i) {
    SlideshowFragment fragment = new SlideshowFragment();
    fragment.imageResourceId = i;

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    ImageView image = new ImageView(getActivity());
    image.setImageResource(imageResourceId);
    image.setScaleType(ImageView.ScaleType.FIT_XY);

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

    RelativeLayout layout = new RelativeLayout(getActivity());
    layout.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));

    layout.addView(image, params);

    return layout;
}

布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.5">

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

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

答案 1 :(得分:0)

后来者似乎是一个更好的解决方法

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp"
        android:layout_alignBottom="@+id/pager"/>

答案 2 :(得分:0)

  

activity_main.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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<RelativeLayout
    android:layout_width="fill_parent"
    android:background="#ffffff"
    android:layout_height="300dp">

    <android.support.v4.view.ViewPager

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:background="@android:color/transparent"
        android:gravity="center_horizontal"
        android:textSize="50sp" />

</RelativeLayout>

  

view_pager_item.xml: -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/pagerItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textAlignment="center" />

</RelativeLayout>
  

ViewPagerAdapter.java: -

public class ViewPagerAdapter extends PagerAdapter {
Context con;
String[] data;

public ViewPagerAdapter(Context con, String[] data) {
    this.data = data;
    this.con = con;
}

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

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

@Override
public Object instantiateItem(ViewGroup container, int position) {
    LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.view_pager_item, container, false);
    try {

        TextView textView = (TextView) view.findViewById(R.id.pagerItem);
        textView.setText(data[position]);
        ((ViewPager) container).addView(view);
    } catch (Exception ex) {
        ex.printStackTrace();
    }
    return view;
}

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

MainActivity.java: -

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    try {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String[] data = new String[]{
                "page 1",
                "page 2",
                "page 3",
                "page 4"
        };
        final ViewPagerAdapter adapter = new ViewPagerAdapter(this, data);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setOffscreenPageLimit(2);
        viewPager.setAdapter(adapter);

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

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                textView.setText("");
                for (int i = 0; i < adapter.getCount(); i++) {
                    Spannable word = new SpannableString(" " + ".");
                    if (i == position) {
                        word.setSpan(new ForegroundColorSpan(Color.RED), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    } else {
                        word.setSpan(new ForegroundColorSpan(Color.BLUE), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    textView.append(word);
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    } catch (Exception ex) {
        ex.printStackTrace();
    }

}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

答案 3 :(得分:0)

简单方法导入pagerlibrary并将此代码用于.xml文件。

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_above="@+id/twoImage"
            android:id="@+id/slideLay"
            >
            <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/offer_pager"
                />
            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/page_indicatorr"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                app:fillColor="#000000"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginBottom="10dp"
                android:padding="5dip"
                >
            </com.viewpagerindicator.CirclePageIndicator>

        </RelativeLayout>