viewpager超简单带指示器的左右滑动
程序员文章站
2022-06-09 22:29:33
...
废话前言
以前真的是百度程序员,搬过来直接就用了,但是从没理解过。实在遗憾,也请看到这篇文章的小哥哥小姐姐沉淀下来。viewpager真的不难,主要是viewpager的初始化与事件监听。
准备工作 、一
都知道viewpager可以左右滑动,现在要做的就是把每个要滑动的页面的用xml建起来了
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/one"/>
</LinearLayout>
有几个就新建xml就可以了
准备工作、二
Activity对应布局。
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 切换卡 -->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
<!-- 点点 -->
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
需要导入v4包,viewpager主要控件,LinearLayout用来装载指示器。
开干拿下
public class ViewPagerActivity extends Activity{
private ViewPager viewPager;
private PagerAdapter adapter;
private List<View> viewPages = new ArrayList<>();
//包裹点点的LinearLayout
private ViewGroup group;
private ImageView imageView;
//定义一个ImageVIew数组,来存放生成的小园点
private ImageView[] imageViews;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_viewpager);
initView();
initPageAdapter();
initPointer();
}
private void initPageAdapter() {
/**
* 对于这几个想要动态载入的page页面,使用LayoutInflater.inflate()来找到其布局文件,并实例化为View对象
*/
LayoutInflater inflater = LayoutInflater.from(this);
View page1 = inflater.inflate(R.layout.viewpager_one, null);
View page2 = inflater.inflate(R.layout.viewpager_two, null);
View page3 = inflater.inflate(R.layout.viewpager_three, null);
//添加到集合中
viewPages.add(page1);
viewPages.add(page2);
viewPages.add(page3);
adapter = new PagerAdapter() {
//获取当前界面个数
@Override
public int getCount() {
return viewPages.size();
}
//判断是否由对象生成页面
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//移除一个view
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewPages.get(position));
}
//返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = viewPages.get(position);
container.addView(view);
return view;
}
};
viewPager.setAdapter(adapter);
}
//绑定控件
private void initView() {
viewPager = findViewById(R.id.viewPager);
group = findViewById(R.id.viewGroup);
//设置监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//页面滑动是执行
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//页面滑动完成后执行
@Override
public void onPageSelected(int position) {
//判断当前是在那个page,就把对应下标的ImageView原点设置为选中状态的图片
for (int i = 0; i < imageViews.length; i++) {
imageViews[position].setBackgroundResource(R.mipmap.selected);
if (position != i) {
imageViews[i].setBackgroundResource(R.mipmap.unselect);
}
}
}
//监听页面的状态,0--静止 1--滑动 2--滑动完成
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//根据页面的个数动态添加圆点指示器
private void initPointer() {
//有多少个界面就new多长的数组
imageViews = new ImageView[viewPages.size()];
for (int i = 0; i < imageViews.length; i++) {
//new新的ImageView控件
imageView = new ImageView(this);
//设置控件的宽高
imageView.setLayoutParams(new ViewGroup.LayoutParams(25, 25));
//设置控件的padding属性
imageView.setPadding(20, 0, 20, 0);
imageViews[i] = imageView;
//初始化第一个page页面的图片的原点为选中状态
if (i == 0) {
//表示当前图片
imageViews[i].setBackgroundResource(R.mipmap.selected);
/**
* 在java代码中动态生成ImageView的时候
* 要设置其BackgroundResource属性才有效
* 设置ImageResource属性无效
*/
} else {
imageViews[i].setBackgroundResource(R.mipmap.unselect);
}
//把new出来的ImageView控件添加到线性布局中
group.addView(imageViews[i]);
}
}
解释都在代码里了,对于程序员还是代码比较直观,可直接复制使用。
参考:http://www.cnblogs.com/RabbitLx/archive/2016/08/07/5745857.html
下一篇: 常见浏览器兼容性问题与解决方案