效果如图:
首先说下方的这几个点,这个点不是图片效果,而是Android自带的shape画的椭圆,使椭圆的宽高一样,就变成原型,然后设置颜色即可。
这2个点的代码如下:
红色点的代码
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp"/> <solid android:color="#ff00"/> </shape>
灰色点的代码
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp"/> <solid android:color="#44000000"/> </shape>
整体思路:
1、要展示viewpager,就要先把图片获取,图片是放在drawable-hdpi里的5张图片。
2、把图片放到一个list里,这个类似listview
3、利用viewpager的适配器,展示图片
4、在图片的适配器里根据位置加载每个图片资源,同时把图片下方的文字和选中的点显示
5、同时在适配器里要销毁已经隐藏的图片占用的资源
6、截止上一步,已经可以滑动图片了,但是图片滑动时,文字和点没有跟着变化,此时需要利用viewpage人的滑动监听,来处理文字变化和点的变化
7、viewpager有一个
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
监听,就new一个内部类,在内部类里通过图片滑动时的回调方法来实现。具体代码如下
MainActivity.java
package com.yuanlp.viewpager; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; private ViewPager viewpager; private TextView tv_title; private LinearLayout ll_point_group; private List<ImageView> p_w_picpathviews; //存放p_w_picpathview的集合,以便后期放入pageadapter中 //图片资源ID private final int[] p_w_picpathIDs={ R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e }; //图片标题集合 private final String[] p_w_picpathDescriptions={ "硅谷拔河比赛", "凝聚你我,放飞梦想", "抱歉,满座了", "七月热浪滔天", "加油努力学习" }; //上一次点位高亮显示的位置 private int prePosition=0; //为了使广告隔段时间自动切换下一张图片,需要在此用到Handler private Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { int item=viewpager.getCurrentItem()+1; viewpager.setCurrentItem(item); //延迟发消息 handler.sendEmptyMessageDelayed(0,4000); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewpager= (ViewPager) findViewById(R.id.viewpager); tv_title= (TextView) findViewById(R.id.tv_title); ll_point_group= (LinearLayout) findViewById(R.id.ll_point_group); p_w_picpathviews=new ArrayList<ImageView>(); MyPagerAdapter pagerAdapter=new MyPagerAdapter(); for (int i=0;i<p_w_picpathIDs.length;i++){ //在这里把p_w_picpath一个一个new出来 ImageView p_w_picpathView=new ImageView(this); //这里引用图片设置为背景而不是src,是因为src可能会导致填充不完全 p_w_picpathView.setBackgroundResource(p_w_picpathIDs[i]); //添加到集合 p_w_picpathviews.add(p_w_picpathView); //添加点 ImageView point=new ImageView(this); point.setBackgroundResource(R.drawable.selectors); LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(8,8); //2个参数是宽和高 if (i==0){ point.setEnabled(true); //默认第0个显示红色选中 }else{ point.setEnabled(false); //其他为灰色 params.leftMargin=8; //设置和左边的为8个像素的间距 } point.setLayoutParams(params); //添加到线性布局里 ll_point_group.addView(point); } viewpager.setAdapter(pagerAdapter); //设置viewpage页面滑动的监听 viewpager.addOnPageChangeListener(new MyOnPageChangeListener()); //设置中间位置,保证页面刚开始时,可以从左向右滑动 int item= Integer.MAX_VALUE/2- Integer.MAX_VALUE/2%p_w_picpathviews.size(); //保证是p_w_picpathviews的长度的整数倍 viewpager.setCurrentItem(item); //设置默认文本时第0个文本内容 tv_title.setText(p_w_picpathDescriptions[prePosition]); //延迟发消息,触发上面的handler内部类,来自动切换图片 handler.sendEmptyMessageDelayed(0,4000); } /** * 页面滑动监听类 */ class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{ /** * 页面滚动时,回调该方法 * @param position 当前的页面位置 * @param positionOffset 滑动了页面的百分之多少 * @param positionOffsetPixels //屏幕上滑动了多少个像素 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /** * 当某个页面被选中了的时候回调,即焦点图片 * @param position 焦点图片的位置 */ @Override public void onPageSelected(int position) { int realPosition=position%(p_w_picpathviews.size()); //这是因为在下方的适配器里,把数量无限大了,左右滑动时,会超出list数组的范围,报越界错误 //设置文本变化 tv_title.setText(p_w_picpathDescriptions[position]); //把上一个高亮的为灰色,把当前的设置为红色 ll_point_group.getChildAt(prePosition).setEnabled(false); ll_point_group.getChildAt(position).setEnabled(true); prePosition=position; } /** * 滑动的过程中回调,状态的变化 * 静止到滑动,滑动到静止,静止到拖拽 * @param state */ @Override public void onPageScrollStateChanged(int state) { } } class MyPagerAdapter extends PagerAdapter{ @Override /** * 得导图片总数 */ public int getCount() { return Integer.MAX_VALUE; //设置无限多,方便左右无限滑动 } /** * 相当于getview方法, * @param container 本质上是viewpage人自身 * @param position 当前实例化页面的位置 * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { int realPosition=position%(p_w_picpathviews.size()); //获取真正的位置 ImageView p_w_picpathView = p_w_picpathviews.get(position); Log.e(TAG, "instantiateItem: 当前的位置"+position+"--------"+p_w_picpathView); container.addView(p_w_picpathView); //添加到viewpager中 return p_w_picpathView; } /** * 比较view和object是否是同一个实例 * @param view 页面 * @param object 是上面的方法instantiateItem返回的结果 * @return */ @Override public boolean isViewFromObject(View view, Object object) { return view==object; } /** * 释放资源 * @param container 是viewpager * @param position 要释放的位置 * @param object 要释放的页面 */ @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); Log.e(TAG, "destroyItem: 释放资源的位置"+position+"-------object"); } } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。