Android实现图片轮播效果

一、新建drawable文件，在里面画两个图片圆点

1、未选中的图片圆点

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <!-- solid实心，使用color设置填充的颜色 -->    <solid android:color="#33000000" />    <!-- corners圆角，radius越大，角越圆 -->    <corners android:radius="10dip" /></shape>

2、选中的图片圆点

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <solid android:color="#aaFFFFFF" />    <corners android:radius="10dip" /></shape>

二、设置圆点显示的样式

在styles.xml里面加上以下代码片段

<!-- 图片轮播小圆点的样式 -->    <style name="dot_style">        <item name="android:layout_width">7dip</item>        <item name="android:layout_height">7dip</item>        <item name="android:background">@drawable/dot_normal</item>        <item name="android:layout_marginLeft">6dip</item>        <item name="android:layout_marginRight">6dip</item>    </style>

三、布局文件

activity_main.xml

<LinearLayout 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:background="#D9D9D9"    android:orientation="vertical" >    <!-- 图片轮播 -->    <FrameLayout        android:layout_width="fill_parent"        android:layout_weight="1"        android:layout_height="0dp" >        <android.support.v4.view.ViewPager            android:id="@+id/vp"            android:layout_width="fill_parent"            android:layout_height="fill_parent" />        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="20dip"            android:layout_gravity="bottom"            android:background="#33000000"            android:gravity="center"            android:orientation="vertical" >            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="3dip"                android:gravity="center" >                <View                    android:id="@+id/v_dot0"                    style="@style/dot_style" />                <View                    android:id="@+id/v_dot1"                    style="@style/dot_style" />                <View                    android:id="@+id/v_dot2"                    style="@style/dot_style" />                <View                    android:id="@+id/v_dot3"                    style="@style/dot_style" />                <View                    android:id="@+id/v_dot4"                    style="@style/dot_style" />            </LinearLayout>        </LinearLayout>    </FrameLayout></LinearLayout>

四、实现轮播的java代码

Test.java

public class Test extends Activity{private ViewPager viewPager; // android-support-v4中的滑动组件private List<ImageView> imageViews; // 滑动的图片集合private int[] imageResId;private List<View> dots;private int currentItem = 0; // 当前图片的索引号private long mExitTime;private ScheduledExecutorService scheduledExecutorService;// 定时执行某项任务private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {// 切换当前显示的图片viewPager.setCurrentItem(currentItem);};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 图片轮播initViewPager();}// 初始化图片轮播private void initViewPager(){// 把图片资源ID放在数组中imageResId = new int[] { R.drawable.main_one, R.drawable.main_two, R.drawable.main_three, R.drawable.main_four, R.drawable.main_five };// 初始化图片资源imageViews = new ArrayList<ImageView>();for (int i = 0; i < imageResId.length; i++) {ImageView imageView = new ImageView(this);imageView.setImageResource(imageResId[i]);imageView.setScaleType(ScaleType.CENTER_CROP);imageViews.add(imageView);}dots = new ArrayList<View>();dots.add(findViewById(R.id.v_dot0));dots.add(findViewById(R.id.v_dot1));dots.add(findViewById(R.id.v_dot2));dots.add(findViewById(R.id.v_dot3));dots.add(findViewById(R.id.v_dot4));viewPager = (ViewPager) findViewById(R.id.vp);viewPager.setAdapter(new MyAdapter());// 设置一个监听器，当ViewPager中的页面改变时调用viewPager.setOnPageChangeListener(new MyPageChangeListener());}// 设置小点的事件监听private class MyPageChangeListener implements OnPageChangeListener{private int oldPosition = 0;@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubcurrentItem = position;/* tv_title.setText(titles[position]); */// 老页面的原点变成未选中状态dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);// 新页面的点变成选中状态dots.get(position).setBackgroundResource(R.drawable.dot_focused);oldPosition = position;}}// 填充ViewPager的适配器private class MyAdapter extends PagerAdapter {// 只需要实现前面的四个方法public int getCount() {return imageResId.length;}public Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(imageViews.get(arg1));return imageViews.get(arg1);}public void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView((View) arg2);}// 用于判断当前要显示的界面public boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}}// 切换图片的线程private class ScrollTask implements Runnable {public void run() {// 加锁synchronized (viewPager) {currentItem = (currentItem + 1) % imageViews.size();handler.obtainMessage().sendToTarget(); // 通过Handler切换图片}}}@Overrideprotected void onStart() {scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();// 当Activity显示出来后，每两秒钟切换一次图片显示// 该方法是个定时执行的工具，参数1：要执行的线程，参数2：初始化延时,参数3：每次执行的时间间隔,参数4：计时单位scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2, TimeUnit.SECONDS);super.onStart();}@Overrideprotected void onStop() {// 当Activity不可见的时候停止切换scheduledExecutorService.shutdown();super.onStop();}}

Android实现图片轮播

Android实现图片轮播效果

一、新建drawable文件，在里面画两个图片圆点

二、设置圆点显示的样式

三、布局文件

四、实现轮播的java代码

更多相关文章

随机推荐