第一节已经简单实现了ViewPager,但是实际应用中常常需要在图片资源底部添加一些图片描述信息,还有一些指示点。
效果如下:
指示点可以用shape生成一个简单的原点,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="5dp" android:height="5dp"/>
<solid android:color="#aaFFFFFF"/>
</shape>
这是选中时白色指示点的代码,未选中灰色的只是color不同。
然后再在res/drawable下建立一个point.xml文件,用于处理不同状态下显示的指示点样式:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- android:state_enabled 与 ImageView.setEnabled 相关联 -->
<item android:drawable="@drawable/point_nomal" android:state_enabled="false" />
<item android:drawable="@drawable/point_choose" android:state_enabled="true"/>
</selector>
建立好指示点资源文件后就可以创建:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
point_group = (LinearLayout) findViewById(R.id.point_group);
image_desc = (TextView) findViewById(R.id.image_desc);
imageList = new ArrayList<ImageView>();
for (int i = 0; i < imageIds.length; i++) {
//初始化图片资源
ImageView im = new ImageView(this);
im.setBackgroundResource(imageIds[i]);
imageList.add(im);
//添加指示点
ImageView point = new ImageView(this);
//配置参数信息
<span style="color:#ff6600;">LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.rightMargin = 20;
//指示点添加参数
point.setLayoutParams(params)</span>;
//设置指示点图片
point.setBackgroundResource(R.drawable.point_bg);
//设定第一个为白色,其他为灰色
if(i == 0){
point.setEnabled(false);
}else{
point.setEnabled(true);
}
point_group.addView(point);
}
一定要记得当前View(此时是pointGroup)所在的parent是LinearLayout,所以在设置参数时要调用LineayLayout.LayoutParams。记住:与父ViewGroup相关联。
设置好指示点后,如何控制动态更新呢?就是切换到第二个页面,第二个的指示点变白,第一个从白变成灰色?
ViewPager有个setOnPageChangeListener方法,在ViewPager切换时调用,我们在这个方法中实现描述信息和指示点状态的动态改变:
/**
* ViewPager滑动时调用
*/
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
/**
* 页面滑动时调用
*/
@Override
public void onPageSelected(int position) {
//position求余,为了循环滑动
position = position%imageList.size();
//设置文字描述内容
image_desc.setText(descrip[position]);
//改变指示点状态,让当前为false,改变上一个为true
point_group.getChildAt(position).setEnabled(false);
point_group.getChildAt(lastposition).setEnabled(true);
lastposition = position;
}
/**
* 页面正在滑动时回调,比较少用
*/
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO 自动生成的方法存根
}
/**
* 页面状态发生改变时回调,也比较少用
*/
@Override
public void onPageScrollStateChanged(int state) {
// TODO 自动生成的方法存根
}
});
这样就实现了ViewPager的图片描述以及指示点状态动态改变。
效果如下: