经常我们在网站上看到一些轮播图,如今在android上应用得也比较多。
那么我们来说说怎么初实现跟网站上首页的轮播图一样的效果。
先上一张效果图:
开发前准备:
1、5张轮播图片。
2、在values文件夹下新建一个xml文件(ids.xml),然后再里面写入内容(定义id的)
3、在drawable文件夹下新建两个xml文件(dot_focused.xml和dot_normal.xml),定义背景的(点)
ids.xml内容为:
<?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内容为:
<?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内容为:
<?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的代码为:
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对应的布局文件 代码为:
<?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模块)