android带标题的轮播代码,Android 实现图片标题轮播

先上一下效果图，这里的标题先用图片的url显示

本文写的效果是作用于Android的广告轮播控件，实现本地或网络图片播放和循环播放，线程控制避免引起过多线程不能及时回收的问题。

目前可以支持的功能有： 开启或关闭自动轮播功能(默认开启) 设置轮播延迟时间 自由开始或结束轮播 设置指示器或标题的位置 图片点击监听 多种banner样式

效果图

一、资源文件：

首先是布局：

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="xyz.ncvt.viewpagerdemo.MainActivity">

android:layout_width="0dp"

android:layout_height="200dp" app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="match_parent" tools:layout_editor_absoluteY="0dp"

tools:layout_editor_absoluteX="8dp"/>

android:weightSum="10"

android:background="#33000000"

android:orientation="horizontal"

android:layout_gravity="bottom"

android:gravity="center_vertical"

android:layout_width="match_parent"

android:layout_height="35dip">

android:layout_weight="8"

android:id="@+id/tv_pager_title"

android:text="很长的标题。。。。。你懂我意思吧"

android:paddingLeft="8dip"

android:gravity="center_vertical"

android:textColor="@color/white"

android:layout_width="0dp" android:layout_height="35dip"/>

android:id="@+id/lineLayout_dot"

android:layout_weight="2"

android:gravity="center|right"

android:layout_marginRight="5dp"

android:paddingLeft="3dp"

android:paddingRight="3dp"

android:orientation="horizontal"

android:layout_width="0dp" android:layout_height="match_parent">

轮播小点资源(Drawable):这个是vector，(在Android中指的是Vector Drawable)大家可以自行搜索了解。

android:viewportWidth="24.0" android:width="5dp" xmlns:android="http://schemas.android.com/apk/res/android">

创建一个图片ID资源文件，用于图片点击事件：存放在values文件夹内

二、定义一个适配器，可以是内部类也可以是单独一个类

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import java.util.List;

public class ViewPagerAdapter extends PagerAdapter {

private List images;

private ViewPager viewPager;

/**

* 构造方法，传入图片列表和ViewPager实例

* @param images

* @param viewPager

*/

public ViewPagerAdapter(List images, ViewPager viewPager){

this.images = images;

this.viewPager = viewPager;

}

@Override

public int getCount() {

return Integer.MAX_VALUE;//返回一个无限大的值，可以 无限循环

}

/**

* 判断是否使用缓存, 如果返回的是true, 使用缓存. 不去调用instantiateItem方法创建一个新的对象

*/

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

/**

* 初始化一个条目

* @param container

* @param position 当前需要加载条目的索引

* @return

*/

@Override

public Object instantiateItem(ViewGroup container, int position) {

// 把position对应位置的ImageView添加到ViewPager中

ImageView iv = images.get(position % images.size());

viewPager.addView(iv);

// 把当前添加ImageView返回回去.

return iv;

}

/**

* 销毁一个条目

* position 就是当前需要被销毁的条目的索引

*/

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

// 把ImageView从ViewPager中移除掉

viewPager.removeView(images.get(position % images.size()));

}

三、编写MainActivity：

public class MainActivity extends AppCompatActivity {

private ViewPager mViewPager;

private TextView mTvPagerTitle;

private List mImageList;//轮播的图片集合

private String[] mImageTitles;//标题集合

private int previousPosition = 0;//前一个被选中的position

private List mDots;//小点

private boolean isStop = false;//线程是否停止

private static int PAGER_TIOME = 5000;//间隔时间

// 在values文件假下创建了pager_image_ids.xml文件，并定义了4张轮播图对应的id，用于点击事件

private int[] imgae_ids = new int[]{R.id.pager_image1,R.id.pager_image2,R.id.pager_image3,R.id.pager_image4};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

init();

}

/**

* 第一步、初始化控件

*/

public void init() {

mViewPager = (ViewPager) findViewById(R.id.viewPager);

mTvPagerTitle = (TextView) findViewById(R.id.tv_pager_title);

initData();//初始化数据

initView();//初始化View，设置适配器

autoPlayView();//开启线程，自动播放

}

/**

* 第二步、初始化数据(图片、标题、点击事件)

*/

public void initData() {

//初始化标题列表和图片

mImageTitles = new String[]{"这是一个好看的标题1","这是一个优美的标题2","这是一个快乐的标题3","这是一个开心的标题4"};

int[] imageRess = new int[]{R.drawable.ncvt_wifi_head,R.drawable.img1,R.drawable.img2,R.drawable.img3};

//添加图片到图片列表里

mImageList = new ArrayList<>();

ImageView iv;

for (int i = 0; i < mImageList.size(); i++) {

iv = new ImageView(this);

iv.setBackgroundResource(imageRess[i]);//设置图片

iv.setId(imgae_ids[i]);//顺便给图片设置id

iv.setOnClickListener(new pagerImageOnClick());//设置图片点击事件

mImageList.add(iv);

}

//添加轮播点

LinearLayout linearLayoutDots = (LinearLayout) findViewById(R.id.lineLayout_dot);

mDots = addDots(linearLayoutDots,fromResToDrawable(this,R.drawable.ic_dot_normal),mImageList.size());//其中fromResToDrawable()方法是我自定义的，目的是将资源文件转成Drawable

}

//图片点击事件

private class pagerImageOnClick implements View.OnClickListener{

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.pager_image1:

Toast.makeText(MainActivity.this, "图片1被点击", Toast.LENGTH_SHORT).show();

break;

case R.id.pager_image2:

Toast.makeText(MainActivity.this, "图片2被点击", Toast.LENGTH_SHORT).show();

break;

case R.id.pager_image3:

Toast.makeText(MainActivity.this, "图片3被点击", Toast.LENGTH_SHORT).show();

break;

case R.id.pager_image4:

Toast.makeText(MainActivity.this, "图片4被点击", Toast.LENGTH_SHORT).show();

break;

}

}

}

/**

* 第三步、给PagerViw设置适配器，并实现自动轮播功能

*/

public void initView(){

ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(mImageList, mViewPager);

mViewPager.setAdapter(viewPagerAdapter);

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

//伪无限循环，滑到最后一张图片又从新进入第一张图片

int newPosition = position % mImageList.size();

// 把当前选中的点给切换了, 还有描述信息也切换

mTvPagerTitle.setText(mImageTitles[newPosition]);//图片下面设置显示文本

//设置轮播点

LinearLayout.LayoutParams newDotParams = (LinearLayout.LayoutParams) mDots.get(newPosition).getLayoutParams();

newDotParams.width = 24;

newDotParams.height = 24;

LinearLayout.LayoutParams oldDotParams = (LinearLayout.LayoutParams) mDots.get(previousPosition).getLayoutParams();

oldDotParams.width = 16;

oldDotParams.height = 16;

// 把当前的索引赋值给前一个索引变量, 方便下一次再切换.

previousPosition = newPosition;

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

setFirstLocation();

}

/**

* 第四步：设置刚打开app时显示的图片和文字

*/

private void setFirstLocation() {

mTvPagerTitle.setText(mImageTitles[previousPosition]);

// 把ViewPager设置为默认选中Integer.MAX_VALUE / t2，从十几亿次开始轮播图片，达到无限循环目的;

int m = (Integer.MAX_VALUE / 2) % mImageList.size();

int currentPosition = Integer.MAX_VALUE / 2 - m;

mViewPager.setCurrentItem(currentPosition);

}

/**

* 第五步: 设置自动播放,每隔PAGER_TIOME秒换一张图片

*/

private void autoPlayView() {

//自动播放图片

new Thread(new Runnable() {

@Override

public void run() {

while (!isStop){

runOnUiThread(new Runnable() {

@Override

public void run() {

mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);

}

});

SystemClock.sleep(PAGER_TIOME);

}

}

}).start();

}

/**

* 资源图片转Drawable

* @param context

* @param resId

* @return

*/

public Drawable fromResToDrawable(Context context, int resId) {

return context.getResources().getDrawable(resId);

}

/**

* 动态添加一个点

* @param linearLayout 添加到LinearLayout布局

* @param backgount 设置

* @return

*/

public int addDot(final LinearLayout linearLayout, Drawable backgount) {

final View dot = new View(this);

LinearLayout.LayoutParams dotParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

dotParams.width = 16;

dotParams.height = 16;

dotParams.setMargins(4,0,4,0);

dot.setLayoutParams(dotParams);

dot.setBackground(backgount);

dot.setId(View.generateViewId());

linearLayout.addView(dot);

return dot.getId();

}

/**

* 添加多个轮播小点到横向线性布局

* @param linearLayout

* @param backgount

* @param number

* @return

*/

public List addDots(final LinearLayout linearLayout, Drawable backgount, int number){

List dots = new ArrayList<>();

for (int i = 0; i < number; i++) {

int dotId = addDot(linearLayout,backgount);

dots.add(findViewById(dotId));

}

return dots;

}

以上 代码供大家学习参考，我优化一下代码，再上demo吧，，不懂的可以留言给我。