Android ViewPager图片轮播+动态设置id+点击事件（案例教程）:
经常我们在网站上看到一些轮播图，如今在android上应用得也比较多。
那么我们来说说怎么初实现跟网站上首页的轮播图一样的效果。
先上一张效果图：
开发前准备：
1、5张轮播图片。
2、在values文件夹下新建一个xml文件（ids.xml），然后再里面写入内容（定义id的）
3、在drawable文件夹下新建两个xml文件（dot_focused.xml和dot_normal.xml）,定义背景的（点）
ids.xml内容为：
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="utf-8"?><resources> <item name="bn1" type="id" /> <item name="bn2" type="id" /> <item name="bn3" type="id" /> <item name="bn4" type="id" /> <item name="bn5" type="id" /></resources> |
dot_focused.xml内容为：
1 2 3 4 5 6 | <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"/> <solid android:color="#55000000"/></shape> |
dot_normal.xml内容为：
1 2 3 4 5 6 | <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"/> <solid android:color="#aaFFFFFF"/></shape> |
正式开发：直接上代码：
MainActivity.java的代码为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | package com.youhutong.banner;import android.os.Bundle;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Executors;import java.util.concurrent.ScheduledExecutorService;import java.util.concurrent.TimeUnit;public class MainActivity extends AppCompatActivity implements View.OnClickListener { /**************************************************************/ // 布局显示轮播图的ViewPager private ViewPager mViewPaper; // 布局中显示图片标题的TextView private TextView title; // 布局中显示点的5个点的对应View private List<View> dots; /***************************************************************/ // 用户存放动太创建出来的ImageView private List<ImageView> images; // 在values文件假下创建了ids.xml文件，并定义了5张轮播图对应的id private int[] ids = new int[]{R.id.bn1,R.id.bn2,R.id.bn3,R.id.bn4,R.id.bn5}; // 存放图片资源的数组 private int[] urls = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e}; // 存放图片的标题 private String[] titles = new String[]{"标题1","标题2","标题3","标题4","标题5"}; /**************************************************************/ // 记录当前显示的图片序号（用于自动轮播。计算得到下一张要显示图片的序号） private int currentItem = 0; // 记录上一个点的位置 （用于改变之前点的样式） private int oldPosition = 0; private ViewPagerAdapter adapter; // 线程对象 private ScheduledExecutorService scheduledExecutorService; /**************************************************************/ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 第一步：初始化控件对象 initView(); // 第二步：初始化数据（1：定义图片id数组 2：定义图片资源数组 3：创建ImageView控件） images = new ArrayList<ImageView>(); for(int i = 0; i < urls.length; i++){ ImageView imageView = new ImageView(this); imageView.setId(ids[i]); // 设置图片ID imageView.setOnClickListener(this); // 设置监听事件（点击事件） imageView.setBackgroundResource(urls[i]); // 设置图片资源 imageView.setTag("这是图片："+i+i+i+i+i+i+i+i); // 设置图片Tag images.add(imageView); } // 第三步：自定义Adapter（适配器） adapter = new ViewPagerAdapter(); // 第四步：设置显示（已经初步完成。可以手划切换图片了） mViewPaper.setAdapter(adapter); // 第五步： 给ViewPager添加监听事件， 当ViewPager中的图片发生变化时调用 mViewPaper.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override // position表式发生改变后，当前显示的序号（也就是第几张） public void onPageSelected(int position) { //设置对应的标题 title.setText(titles[position]); //也把对应的点变成当前显示 dots.get(position).setBackgroundResource(R.drawable.dot_focused); //把之前点的显示样式设回另一个样式 dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal); // 记录值 oldPosition = position; currentItem = position; } @Override public void onPageScrollStateChanged(int state) {} @Override public void onPageScrolled(int position,float positionOffset,int positionOffsetPixels){} }); // 第六步：实现自动轮播。切换图片显示（线程实现，请看下面的方法） } /** * 第一步的方法（初始化控件对象） */ private void initView() { // 获取ViewPager控件 mViewPaper = (ViewPager) findViewById(R.id.vp); // 获取TextView控件 title = (TextView) findViewById(R.id.title); // 获取显示点的view控件（在图片改变时好相应改变点的样式） dots = new ArrayList<View>(); dots.add(findViewById(R.id.dot_0)); dots.add(findViewById(R.id.dot_1)); dots.add(findViewById(R.id.dot_2)); dots.add(findViewById(R.id.dot_3)); dots.add(findViewById(R.id.dot_4)); } /** * 第三步的方法（自定义Adapter） */ private class ViewPagerAdapter extends PagerAdapter{ @Override public int getCount() { return images.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void destroyItem(ViewGroup view, int position, Object object) { view.removeView(images.get(position)); } @Override public Object instantiateItem(ViewGroup view, int position) { view.addView(images.get(position)); return images.get(position); } } /***********************************第六步的方法（实现自动轮播）********************************/ /** * 利用线程池定时执行动画轮播 */ @Override protected void onStart() { super.onStart(); scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); // 延迟2秒后开始执行，然后等显示完毕图片后，等待3秒后，再显示下一张。 scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(),2,3, TimeUnit.SECONDS); } /** * 子线程类（ViewPageTask），实现Runnable线程接口 */ private class ViewPageTask implements Runnable{ @Override public void run() { // 设置下一张要显示的图片 currentItem = (currentItem + 1) % urls.length; // 去更新UI，显示目标图片（这里不需要传值过去了所以写0） mHandler.sendEmptyMessage(0); } } /** * 接收子线程传递过来的数据，然后配合主线程更新UI */ private Handler mHandler = new Handler(){ public void handleMessage(android.os.Message msg) { // 显示指定currentItem的图片 mViewPaper.setCurrentItem(currentItem); }; }; /**********************************************************************************************/ /** * 附加点击事件（第二步中设置的） */ public void onClick(View v) { // 获取当前点击对象的Tag值 String str = v.getTag().toString(); switch (v.getId()){ case R.id.bn1: Toast.makeText(this,str,Toast.LENGTH_SHORT).show(); break; case R.id.bn2: Toast.makeText(this,str,Toast.LENGTH_SHORT).show(); break; case R.id.bn3: Toast.makeText(this,str,Toast.LENGTH_SHORT).show(); break; case R.id.bn4: Toast.makeText(this,str,Toast.LENGTH_SHORT).show(); break; case R.id.bn5: Toast.makeText(this,str,Toast.LENGTH_SHORT).show(); break; } }} |
MainActivity.java对应的布局文件 代码为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 顶部 --> <LinearLayout android:layout_width="match_parent" android:layout_height="38dp" android:background="#2b333b" android:gravity="center" android:orientation="horizontal"> <ImageButton android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@drawable/search"/> <TextView android:layout_width="wrap_content" android:layout_weight="1" android:layout_height="30dp" android:gravity="center" android:text="小川编程" android:textColor="#ffffff" android:textSize="18sp" android:textStyle="bold"/> <ImageButton android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@drawable/email"/> </LinearLayout> <!-- 轮播图 --> <FrameLayout android:layout_width="match_parent" android:layout_height="150dip" > <!--图片--> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--标题 和 点--> <LinearLayout android:layout_width="match_parent" android:layout_height="35dip" android:layout_gravity="bottom" android:background="#33000000" android:gravity="center" android:orientation="vertical" > <!--标题--> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题1" android:textColor="@android:color/white" /> <!--点--> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dip" android:orientation="horizontal" > <View android:id="@+id/dot_0" android:layout_width="5dip" android:layout_height="5dip" android:layout_marginLeft="2dip" android:layout_marginRight="2dip" android:background="@drawable/dot_focused"/> <View android:id="@+id/dot_1" android:layout_width="5dip" android:layout_height="5dip" android:layout_marginLeft="2dip" android:layout_marginRight="2dip" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_2" android:layout_width="5dip" android:layout_height="5dip" android:layout_marginLeft="2dip" android:layout_marginRight="2dip" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_3" android:layout_width="5dip" android:layout_height="5dip" android:layout_marginLeft="2dip" android:layout_marginRight="2dip" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_4" android:layout_width="5dip" android:layout_height="5dip" android:layout_marginLeft="2dip" android:layout_marginRight="2dip" android:background="@drawable/dot_normal"/> </LinearLayout> </LinearLayout> </FrameLayout></LinearLayout> |
有需要的朋友也可以下载源码学习一下：（android studio model模块）
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/176.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
