前言:Circle适用于应用新功能的展示页和商品的多张图片的展示功能。
1.定义布局文件:SampleCirclesDefault中添加了一个布局:simple_circles。
布局中定义一个LinearLayout垂直布局,添加一个viewpager和com.viewpagerindicatorCirclePageIndictor必须是完全限定名。
<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="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <com.viewpagerindicator.CirclePageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip" /> </LinearLayout>
2.代码中调用布局
setContentView(R.layout.simple_circles); //定义一个iewpager的adaper mAdapter = new TestFragmentAdapter(getSupportFragmentManager()); //定义个Pager,即布局中定义的那个pagerview mPager = (ViewPager) findViewById(R.id.pager); mPager.setAdapter(mAdapter); //定义一个指示变量,即布局中定义的那个 CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator); indicator.setViewPager(mPager);
完成以上的代码就可以使用了。这里面需要一个ViewPagerAdatper,关于他的资料大家可以查找http://www.cnblogs.com/qinghuaideren/p/3437898.html
3.上面是简单的使用,并没有修改指示的颜色和大小等属性,现在通过他提供的方法我们来定义自己的指示。一下是CirclePageIndicator提供的属性。
<declare-styleable name="CirclePageIndicator"> <!-- 指示标识是否居中 --> <attr name="centered" /> <!-- 当前选择指示的颜色 --> <attr name="fillColor" format="color" /> <!-- 当前未被选择指示的颜色 --> <attr name="pageColor" format="color" /> <!-- 指示的布局方式,水平还是垂直 --> <attr name="android:orientation" /> <!-- 指示的大小 --> <attr name="radius" format="dimension" /> <!-- 指示是否快速滑动 --> <attr name="snap" format="boolean" /> <!-- 描边的颜色 --> <attr name="strokeColor" format="color" /> <!-- 描边的宽度 --> <attr name="strokeWidth" /> <!-- 指示整体的背景色 --> <attr name="android:background" /> </declare-styleable>
4.改变属性:有三种方法
1.在布局中更改:其中的xmlns:app是后面那个http路径的简称,方便使用,这个结尾用的是res-auto,没见过,估计是自动查找,正常的写法是这样的
xmlns:app1="http://schemas.android.com/apk/res/com.viewpagerindicator.sample",即res/项目完全限定名。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" 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" android:background="#FFCCCCCC" app:radius="10dp" app:fillColor="#FF888888" app:pageColor="#88FF0000" app:strokeColor="#FF000000" app:strokeWidth="2dp" /> </LinearLayout>
2.代码里修改:
CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator); indicator.setViewPager(mPager); 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);
3.主题修改:
<activity android:name=".SampleCirclesStyledTheme" android:label="Circles/Styled (via theme)" android:theme="@style/CustomCirclePageIndicator" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" /> </intent-filter> </activity>
CustomCirclePageIndicator主题如下
<style name="CustomCirclePageIndicator" parent="@android:style/Theme.Light"> <item name="fillColor">#FF888888</item> <item name="strokeColor">#FF000000</item> <item name="strokeWidth">2dp</item> <item name="radius">10dp</item> <item name="centered">true</item> </style>
4.为viewpager设置监听:
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) { } });
以上就是Circle的使用方法介绍。源码地址下载:http://download.csdn.net/detail/as294985925/6796117