Android实现图片文字轮播特效

本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下

图片轮播是类似知乎日报上的一个轮播效果,如下图。

好了直接进入正题,首先是出示一下效果:

MainActivity:

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit; 

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView; 

public class MainActivity extends Activity { 

  //viewpager
  private ViewPager view_pager;
  private LinearLayout ll_dotGroup;
  private TextView newsTitle;
  private int imgResIds[] = new int[]{R.drawable.a, R.drawable.b,
      R.drawable.c, R.drawable.d, R.drawable.b};
  //存储5张图片
  private String textview[]=new String[]{"12412515125","fawfafawf"
      ,"13f1f12f211","1251f1f12","1t1f12f121"};
  //存储5个目录
  private int curIndex = 0;
  //用来记录当前滚动的位置
  PicsAdapter picsAdapter; 

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); 

    setViewPager(); 

  } 

  private void setViewPager() { 

    newsTitle=(TextView)findViewById(R.id.NewsTitle);
    view_pager = (ViewPager) findViewById(R.id.view_pager);
    ll_dotGroup = (LinearLayout) findViewById(R.id.dotgroup); 

    picsAdapter = new PicsAdapter(); // 创建适配器
    picsAdapter.setData(imgResIds);
    view_pager.setAdapter(picsAdapter); // 设置适配器 

    view_pager.setOnPageChangeListener(new MyPageChangeListener()); //设置页面切换监听器 

    initPoints(imgResIds.length); // 初始化图片小圆点
    startAutoScroll(); // 开启自动播放
  } 

  // 初始化图片轮播的小圆点和目录
  private void initPoints(int count) {
    for (int i = 0; i < count; i++) { 

      ImageView iv = new ImageView(this);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          20, 20);
      params.setMargins(0, 0, 20, 0);
      iv.setLayoutParams(params); 

      iv.setImageResource(R.drawable.dot1); 

      ll_dotGroup.addView(iv); 

    }
    ((ImageView) ll_dotGroup.getChildAt(curIndex))
        .setImageResource(R.drawable.dot2); 

    newsTitle.setText(textview[curIndex]);
  } 

  // 自动播放
  private void startAutoScroll() {
    ScheduledExecutorService scheduledExecutorService = Executors
        .newSingleThreadScheduledExecutor();
    // 每隔4秒钟切换一张图片
    scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 5,
        4, TimeUnit.SECONDS);
  } 

  // 切换图片任务
  private class ViewPagerTask implements Runnable {
    @Override
    public void run() { 

      runOnUiThread(new Runnable() {
        @Override
        public void run() {
          int count = picsAdapter.getCount();
          view_pager.setCurrentItem((curIndex + 1) % count);
        }
      });
    }
  } 

  // 定义ViewPager控件页面切换监听器
  class MyPageChangeListener implements OnPageChangeListener { 

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

    @Override
    public void onPageSelected(int position) {
      ImageView imageView1 = (ImageView) ll_dotGroup.getChildAt(position);
      ImageView imageView2 = (ImageView) ll_dotGroup.getChildAt(curIndex);
      if (imageView1 != null) {
        imageView1.setImageResource(R.drawable.dot2);
      }
      if (imageView2 != null) {
        imageView2.setImageResource(R.drawable.dot1);
      }
      curIndex = position;
      newsTitle.setText(textview[curIndex]); 

    } 

    boolean b = false; 

    @Override
    public void onPageScrollStateChanged(int state) {
      //这段代码可不加,主要功能是实现切换到末尾后返回到第一张
      switch (state) {
        case 1:// 手势滑动
          b = false;
          break;
        case 2:// 界面切换中
          b = true;
          break;
        case 0:// 滑动结束,即切换完毕或者加载完毕
          // 当前为最后一张,此时从右向左滑,则切换到第一张
          if (view_pager.getCurrentItem() == view_pager.getAdapter()
              .getCount() - 1 && !b) {
            view_pager.setCurrentItem(0);
          }
          // 当前为第一张,此时从左向右滑,则切换到最后一张
          else if (view_pager.getCurrentItem() == 0 && !b) {
            view_pager.setCurrentItem(view_pager.getAdapter()
                .getCount() - 1);
          }
          break; 

        default:
          break;
      }
    }
  } 

  // 定义ViewPager控件适配器
  class PicsAdapter extends PagerAdapter { 

    private List<ImageView> views = new ArrayList<ImageView>(); 

    @Override
    public int getCount() {
      if (views == null) {
        return 0;
      }
      return views.size();
    } 

    public void setData(int[] imgResIds) {
      for (int i = 0; i < imgResIds.length; i++) {
        ImageView iv = new ImageView(MainActivity.this);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT);
        iv.setLayoutParams(params);
        iv.setScaleType(ScaleType.FIT_XY);
        //设置ImageView的属性
        iv.setImageResource(imgResIds[i]);
        views.add(iv);
      }
    } 

    public Object getItem(int position) {
      if (position < getCount())
        return views.get(position);
      return null;
    } 

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
      return arg0 == arg1;
    } 

    @Override
    public void destroyItem(View container, int position, Object object) { 

      if (position < views.size())
        ((ViewPager) container).removeView(views.get(position));
    } 

    @Override
    public int getItemPosition(Object object) {
      return views.indexOf(object);
    } 

    @Override
    public Object instantiateItem(View container, int position) {
      if (position < views.size()) {
        final ImageView imageView = views.get(position);
        ((ViewPager) container).addView(imageView);
        return views.get(position);
      }
      return null;
    } 

  } 

}

activity_main:

<RelativeLayout 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"
  tools:context=".MainActivity" > 

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginBottom="5dp"
    android:orientation="vertical" > 

    <android.support.v4.view.ViewPager
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center" >
    </android.support.v4.view.ViewPager> 

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:background="@drawable/focus_bg"
      >
      <TextView
        android:id="@+id/NewsTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我校交换生演讲比赛夺冠 美国华盛本大学万里发来贺电"
        android:paddingTop="10dp"
        android:paddingBottom="8dp"
        android:paddingLeft="10dp"
        android:paddingRight="100dp"
        android:textSize="15sp"
        android:textColor="#fff"/>
    <LinearLayout
      android:id="@+id/dotgroup"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:paddingTop="23dp"
      android:paddingRight="10dp"
      android:gravity="center"
      android:layout_marginBottom="15dp"
      android:orientation="horizontal" >
    </LinearLayout>
  </RelativeLayout>
  </RelativeLayout> 

</RelativeLayout>

以上就是关于Android实现图片文字轮播特效讲解,希望对大家的学习有所帮助。

(0)

相关推荐

  • 安卓(Android)ListView 显示图片文字

    一.代码实现 1.  "Activity_11\src\yan\activity_11\MainActivity.java" package yan.activity_11; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import a

  • Android自定义实现图片加文字功能

    Android自定义实现图片加文字功能 分四步来写: 1,组合控件的xml; 2,自定义组合控件的属性; 3,自定义继承组合布局的class类,实现带两参数的构造器; 4,在xml中展示组合控件. 具体实现过程: 一.组合控件的xml 我接触的有两种方式,一种是普通的Activity的xml:一种是父节点为merge的xml.我项目中用的是第一种,但个人感觉第二种好,因为第一种多了相对或者绝对布局层. 我写的 custom_pictext.xml <?xml version="1.0&qu

  • Android实现图片文字轮播特效

    本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下 图片轮播是类似知乎日报上的一个轮播效果,如下图. 好了直接进入正题,首先是出示一下效果: MainActivity: import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService;

  • Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

    1. 问题/坑点 1.1 item宽高不生效问题 需要注意的是,AdapterViewFlipper 在布局时,宽高一定要用 match_parent 或者 具体dp值. 如果宽.高中使用了 wrap_content 时,会导致 AdapterViewFlipper 容器的宽高,最终变成第一个item的宽高.即使后续item的宽高超过第一个item,也不会生效,内容显示只会被限定在第一个的宽高范围内. 原理也很好理解,后续item没有绘制出来时, wrap_content 计算出来的结果,就是第

  • 详解android 视频图片混合轮播实现

    循环添加视频view  图片view for (int i = 0 ;i<beansArrayList.size();i++){ if (beansArrayList.get(i).getType()==1){ videoPlayer = new NiceVideoPlayer(this); controller = new TxVideoPlayerController(this); videoPlayer.setController(controller); videoPlayer.setU

  • jQuery文字轮播特效

    闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌.连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结. 项目背景: 这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播,预计访问量达到亿级,并发做到2000+/s,且有不少的容错预案,我这次主要负责前端首页方面的展示效果. 功能点: 文字无缝轮播(不要在意为什么在移动端还会有这样的需求) 当一说到文字无缝滚动时,大家最先想到的

  • 基于javascript实现样式清新图片轮播特效

    本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g

  • 很棒的一组js图片轮播特效

    大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50

  • js图片轮播特效代码分享

    本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

  • 原生js实现图片轮播特效

    本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

  • 轻松实现javascript图片轮播特效

    本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

  • jQuery实现图片轮播特效代码分享

    本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script sr

随机推荐