学习了一个新的控件,市面上也挺常见的总结一下,效果图如下(百度的美女图)
先写布局文件:
<lativeLayout 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.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="200dip" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewpager"
android:background="#33000000"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/white"
android:textSize="18sp" />
<LinearLayout
android:id="@+id/point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
创建Drawable目录,分别创建point_nomal.xml文件和point_focused.xml文件,描绘指示点形状和颜色
point_nomal.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="5dip" android:height="5dip"/>
<solid android:color="#55000000"/>
</shape>
point_focused.xml文件(F必须大写,要不没有变化):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="5dip" android:height="5dip"/>
<solid android:color="#aaFFFFFF"/>
</shape>
在该目录下创建point_group_bg.xml指示点选择器文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/point_nomal" android:state_enabled="false"/>
<item android:drawable="@drawable/point_focused" android:state_enabled="true"/>
</selector>
主要代码如下
package com.example.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
public class MainActivity extends Activity {
private ViewPager viewpager;
private TextView tv_desc;
// 指示点布局控件
private LinearLayout point_group;
// 图片资源的list
private List<ImageView> imagelist;
// 文本描述资源
private String[] descs;
// 图片资源ID
private int[] ids;
// 上一个图片的位置索引
protected int lastPosition;
// 是否自动滑动图片
private boolean isHandlerRun = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_desc = (TextView) findViewById(R.id.tv_desc);
point_group = (LinearLayout) findViewById(R.id.point_group);
imagelist = new ArrayList<ImageView>();
ids = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.d, R.drawable.e };
descs = new String[] { "第一张图片", "第二张图片", "第三张图片", "第四张图片", "第五张图片" };
for (int i = 0; i < ids.length; i++) {
// 初始化图片资源
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(ids[i]);
imagelist.add(imageView);
// 初始化指示点布局控件资源
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_group_bg);
// 新建一个LinearLayout.LayoutParams对象,添加指示点间的距离为15像素
//(由于point要添加到LinearLayout中所有要LinearLayout.LayoutParams对象)
LinearLayout.LayoutParams params = new LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.rightMargin = 15;
point.setLayoutParams(params);
if (i == 0) {
point.setEnabled(true);
} else {
point.setEnabled(false);
}
point_group.addView(point);
}
//给viewpager设置适配器
viewpager.setAdapter(new MyAdapter());
//给vivepager设置一个资源变化的监听器
viewpager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
/**
* 页面切换后调用
* position 新的页面位置
*/
public void onPageSelected(int position) {
// TODO Auto-generated method stub
position = position % imagelist.size();
//设置文字描述内容
tv_desc.setText(descs[position]);
//改变指示点的状态
//把当前点enbale 为true
point_group.getChildAt(position).setEnabled(true);
//把上一个点设为false
point_group.getChildAt(lastPosition).setEnabled(false);
lastPosition = position;
}
@Override
/**
* 页面正在滑动的时候,不断回调
*/
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
/**
* 当页面状态发生变化的时候,回调
*/
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub
}
});
//Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imagelist.size())为了能左右都滑动,并且第一张先显示
viewpager.setCurrentItem(Integer.MAX_VALUE / 2
- (Integer.MAX_VALUE / 2 % imagelist.size()));
//发送延迟信息实现自动循环资源
handler.sendEmptyMessageDelayed(0, 2500);
}
/**
* 自动循环
*/
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
//让viewPager 滑动到下一页
viewpager.setCurrentItem(viewpager.getCurrentItem() + 1);
if (isHandlerRun) {
handler.sendEmptyMessageDelayed(0, 2500);
}
};
};
private class MyAdapter extends PagerAdapter {
@Override
/**
* 获得页面的总数
*/
public int getCount() {
// TODO Auto-generated method stub
return Integer.MAX_VALUE;
}
@Override
/**
* 获得相应位置上的view
* container view的容器,其实就是viewpager自身
* position 相应的位置
*/
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
// 给 container 添加一个view
container.addView(imagelist.get(position % imagelist.size()));
//返回一个和该view相对的object
return imagelist.get(position % imagelist.size());
}
@Override
/**
* 判断 view和object的对应关系
*/
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
if (view == object) {
return true;
} else {
return false;
}
}
@Override
/**
* 销毁对应位置上的object
*/
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView((View) object);
object = null;
}
}
@Override
protected void onDestroy() {
// TODO Auto-generated method stub
isHandlerRun = false;
super.onDestroy();
}
}