ViewPagerIndicator是一个viewpage相关的一个开源项目,包含viewpage与小圆点(实在不知道叫什么了)、viewpage与tab等
https://github.com/JakeWharton/ActionBarSherlock
package com.viewpagerindicator.sample; import java.util.Random; import com.viewpagerindicator.PageIndicator; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public abstract class BaseSampleActivity extends FragmentActivity { private static final Random RANDOM = new Random(); TestFragmentAdapter mAdapter; ViewPager mPager; PageIndicator mIndicator; @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.random: final int page = RANDOM.nextInt(mAdapter.getCount()); Toast.makeText(this, "Changing to page " + page, Toast.LENGTH_SHORT); mPager.setCurrentItem(page); return true; case R.id.add_page: if (mAdapter.getCount() < 10) { mAdapter.setCount(mAdapter.getCount() + 1); mIndicator.notifyDataSetChanged(); } return true; case R.id.remove_page: if (mAdapter.getCount() > 1) { mAdapter.setCount(mAdapter.getCount() - 1); mIndicator.notifyDataSetChanged(); } return true; } return super.onOptionsItemSelected(item); } }
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); mIndicator = (CirclePageIndicator)findViewById(R.id.indicator); mIndicator.setViewPager(mPager); } }
package com.viewpagerindicator.sample; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import com.viewpagerindicator.IconPagerAdapter; class TestFragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter { protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", }; protected static final int[] ICONS = new int[] { R.drawable.perm_group_calendar, R.drawable.perm_group_camera, R.drawable.perm_group_device_alarms, R.drawable.perm_group_location }; private int mCount = CONTENT.length; public TestFragmentAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return TestFragment.newInstance(CONTENT[position % CONTENT.length]); } @Override public int getCount() { return mCount; } @Override public CharSequence getPageTitle(int position) { return TestFragmentAdapter.CONTENT[position % CONTENT.length]; } @Override public int getIconResId(int index) { return ICONS[index % ICONS.length]; } public void setCount(int count) { if (count > 0 && count <= 10) { mCount = count; notifyDataSetChanged(); } } }
package com.viewpagerindicator.sample; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.LinearLayout.LayoutParams; import android.widget.TextView; public final class TestFragment extends Fragment { private static final String KEY_CONTENT = "TestFragment:Content"; public static TestFragment newInstance(String content) { TestFragment fragment = new TestFragment(); StringBuilder builder = new StringBuilder(); for (int i = 0; i < 20; i++) { builder.append(content).append(" "); } builder.deleteCharAt(builder.length() - 1); fragment.mContent = builder.toString(); return fragment; } private String mContent = "???"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) { mContent = savedInstanceState.getString(KEY_CONTENT); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { TextView text = new TextView(getActivity()); text.setGravity(Gravity.CENTER); text.setText(mContent); text.setTextSize(20 * getResources().getDisplayMetrics().density); text.setPadding(20, 20, 20, 20); LinearLayout layout = new LinearLayout(getActivity()); layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); layout.setGravity(Gravity.CENTER); layout.addView(text); return layout; } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putString(KEY_CONTENT, mContent); } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <com.viewpagerindicator.CirclePageIndicator android:id="@+id/indicator" android:padding="10dip" android:layout_height="wrap_content" android:layout_width="fill_parent" /> </LinearLayout>
这个代码都很简单,唯一注意的是layout里面我们用到的是
com.viewpagerindicator.CirclePageIndicator
后面这个布局文件用到的view有些会改变的
另外 TestFragmentAdapter里面的getPageTitle和getIconResId方法 都是后面的例子用到的,不用着急明白,
1、
mIndicator.setCurrentItem(mAdapter.getCount() - 1);
可以设置viewpage显示的item
2、
indicator.setSnap(true);
默认是false,就是切换的时候,下面小圆点有一个过渡的动画效果,建议默认即可
3、
xml
app:radius="10dp" app:fillColor="#FF888888" app:pageColor="#88FF0000" app:strokeColor="#FF000000" app:strokeWidth="2dp"
java
final float density = getResources().getDisplayMetrics().density; indicator.setBackgroundColor(0xFFCCCCCC); indicator.setRadius(10 * density); indicator.setPageColor(0x880000FF); indicator.setFillColor(0xFF888888); indicator.setStrokeColor(0xFF000000); indicator.setStrokeWidth(2 * density);
上面两种的效果是一样的 就是设置了小圆点的样式
radius:小圆点的半径 PageColor:小圆点的背景 FillColor:过渡的时候动画的背景 StrokeColor:小圆点边框颜色 StrokeWidth:小圆点边框宽度
4、监听
mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { Toast.makeText(SampleCirclesWithListener.this, "Changed to page " + position, Toast.LENGTH_SHORT).show(); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } });