Android实现广告图片轮播效果_Android

本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下

首先看下一下布局文件:

<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" >

  <!-- 广告条的使用 -->

  <com.xuliugen.viewpager.MyViewPagerTransformerAnim
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="200dp" />

  <!-- 广告条下边的文字 -->

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/viewpager"
    android:background="#33000000"
    android:orientation="vertical" >

    <TextView
      android:id="@+id/image_desc"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="@string/app_name"
      android:textColor="@android:color/white"
      android:textSize="16sp" />

    <LinearLayout
      android:id="@+id/point_group"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:layout_marginBottom="5dp"
      android:orientation="horizontal" >
    </LinearLayout>
  </LinearLayout>

</RelativeLayout>

 

效果很简单,从布局文件中我们看到使用了一个自定义的ViewPager动画,代码如下:

package com.xuliugen.viewpager;

import java.util.HashMap;
import java.util.Map;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

/*
 * 自定义viewpager实现动画切换效果:
 *
 * 1、需要拿到当前切换的两个view
 *
 * 2、一个动画的梯度值
 */
public class MyViewPagerTransformerAnim extends ViewPager {

  private View mLeft;
  private View mRight;

  private float mTrans;
  private float mScale;

  private static final float MIN_SCALE = 0.6f;
  private Map<Integer, View> mChildren = new HashMap<Integer, View>();

  /*
   * 要有两个构造方法
   */
  public MyViewPagerTransformerAnim(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public MyViewPagerTransformerAnim(Context context) {
    super(context);
  }

  /*
   * 设置put的方法
   */
  public void setViewForPosition(View view, int position) {
    mChildren.put(position, view);
  }

  /*
   * remove的方法
   */
  public void removeViewFromPosition(Integer position) {
    mChildren.remove(position);
  }

  /**
   * 重写的方法
   */
  @Override
  protected void onPageScrolled(int position, float offset, int offsetPixels) {

    // Log.e("TAG", "position =" + position + ",offset = " + offset);
    mLeft = mChildren.get(position);
    mRight = mChildren.get(position + 1);

    animStack(mLeft, mRight, offset, offsetPixels);// 创建动画效果

    super.onPageScrolled(position, offset, offsetPixels);
  }

  private void animStack(View left, View right, float offset, int offsetPixels) {
    if (right != null) {

      // 从0-1页,offset:0`1
      mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;

      mTrans = -getWidth() - getPageMargin() + offsetPixels;

      ViewHelper.setScaleX(right, mScale);
      ViewHelper.setScaleY(right, mScale);

      ViewHelper.setTranslationX(right, mTrans);
    }
    if (left != null) {
      left.bringToFront();
    }
  }
}

MainActivity.java

package com.xuliugen.viewpager;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
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.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

  private ViewPager viewPager;

  private LinearLayout pointGroup;

  private TextView iamgeDesc;

  // 图片资源ID
  private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c,
      R.drawable.d, R.drawable.e };

  // 图片标题集合
  private final String[] imageDescriptions = { "巩俐不低俗,我就不能低俗",
      "扑树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" };

  private ArrayList<ImageView> imageList;

  /**
   * 上一个页面的位置
   */
  protected int lastPosition;

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

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    pointGroup = (LinearLayout) findViewById(R.id.point_group);
    iamgeDesc = (TextView) findViewById(R.id.image_desc);
    iamgeDesc.setText(imageDescriptions[0]);

    imageList = new ArrayList<ImageView>();
    for (int i = 0; i < imageIds.length; i++) {

      // 初始化图片资源
      ImageView image = new ImageView(this);
      image.setBackgroundResource(imageIds[i]);
      imageList.add(image);

      // 添加指示点
      ImageView point = new ImageView(this);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          LinearLayout.LayoutParams.WRAP_CONTENT,
          LinearLayout.LayoutParams.WRAP_CONTENT);

      params.rightMargin = 20;
      point.setLayoutParams(params);

      point.setBackgroundResource(R.drawable.point_bg);
      if (i == 0) {
        point.setEnabled(true);
      } else {
        point.setEnabled(false);
      }
      pointGroup.addView(point);
    }

    viewPager.setAdapter(new MyPagerAdapter());

    // viewPager.setCurrentItem(Integer.MAX_VALUE/2 -
    // (Integer.MAX_VALUE/2%imageList.size())) ;

    viewPager.setOnPageChangeListener(new OnPageChangeListener() {

      @Override
      /**
       * 页面切换后调用
       * position 新的页面位置
       */
      public void onPageSelected(int position) {

        position = position % imageList.size();

        // 设置文字描述内容
        iamgeDesc.setText(imageDescriptions[position]);

        // 改变指示点的状态
        // 把当前点enbale 为true
        pointGroup.getChildAt(position).setEnabled(true);
        // 把上一个点设为false
        pointGroup.getChildAt(lastPosition).setEnabled(false);
        lastPosition = position;

      }

      @Override
      /**
       * 页面正在滑动的时候,回调
       */
      public void onPageScrolled(int position, float positionOffset,
          int positionOffsetPixels) {
      }

      @Override
      /**
       * 当页面状态发生变化的时候,回调
       */
      public void onPageScrollStateChanged(int state) {

      }
    });

    /*
     * 自动循环: 1、定时器:Timer 2、开子线程 while true 循环 3、ColckManager 4、 用handler
     * 发送延时信息,实现循环
     */
    isRunning = true;
    // 设置图片的自动滑动
    handler.sendEmptyMessageDelayed(0, 3000);
  }

  /**
   * 判断是否自动滚动
   */
  private boolean isRunning = false;

  private Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {

      // 让viewPager 滑动到下一页
      viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
      if (isRunning) {
        handler.sendEmptyMessageDelayed(0, 3000);
      }
    };
  };

  protected void onDestroy() {

    isRunning = false;
  };

  private class MyPagerAdapter extends PagerAdapter {

    @Override
    /**
     * 获得页面的总数
     */
    public int getCount() {
      return Integer.MAX_VALUE; // 使得图片可以循环
    }

    @Override
    /**
     * 获得相应位置上的view
     * container view的容器,其实就是viewpager自身
     * position   相应的位置
     */
    public Object instantiateItem(ViewGroup container, int position) {

      // System.out.println("instantiateItem ::" + position);

      // 给 container 添加一个view
      container.addView(imageList.get(position % imageList.size()));
      // 返回一个和该view相对的object
      return imageList.get(position % imageList.size());
    }

    @Override
    /**
     * 判断 view和object的对应关系
     */
    public boolean isViewFromObject(View view, Object object) {
      if (view == object) {
        return true;
      } else {
        return false;
      }
    }

    @Override
    /**
     * 销毁对应位置上的object
     */
    public void destroyItem(ViewGroup container, int position, Object object) {
      // System.out.println("destroyItem ::" + position);

      container.removeView((View) object);
      object = null;
    }
  }

}

另外我们看效果图可以看出,效果图下边的几个原点是变化的,所以我们需要一个selector,如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@drawable/point_nomal" android:state_enabled="false"/>
  <item android:drawable="@drawable/point_focured" android:state_enabled="true"/>

</selector>

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索Android图片轮播
android实现广告轮播、android实现图片轮播、android轮播图实现、android实现无限轮播、android实现轮播,以便于您获取更多的相关知识。

时间: 2024-10-14 02:12:28

Android实现广告图片轮播效果_Android的相关文章

Android ViewPager实现图片轮播效果_Android

在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可.先来看看效果图吧:   就是实现这样的一个轮播广告的效果. 因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的.我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过

Android实现广告图片轮播效果

本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

Android UI实现广告Banner轮播效果_Android

本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧:   用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验?  控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验:  1. 间隔不停的切换图片,指示器也跟着变  2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoSc

Android自动播放Banner图片轮播效果_Android

先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

jQuery实现仿路边灯箱广告图片轮播效果_jquery

特效介绍 本图片幻灯就像路边灯箱广告,路边大广告牌效果,LED切换效果,并且会一直保持在页面最低端. 演示图 使用方法 1.在head区域引入style.css. 复制代码 代码如下: <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/> 2.html代码放在</body>上面: <div cla

Android实现图片轮播效果的两种方法_Android

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

Android客户端实现图片轮播控件_Android

本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分     我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成:        首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点.现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像"翻书&qu

android中的webview不能正常显示获取到的网页的图片轮播效果

问题描述 android中的webview不能正常显示获取到的网页的图片轮播效果 写了一个Android客户端软件,里边有个webview控件,获取到服务端的网页时出问题了. 网页上有个类似于HeadView的图片轮播效果,但是在客户端webview中不能正常显示. 解决方案 那你能将代码贴出来吗,这样猜不好猜的http://www.codesky.net/showhtml/26836.htm 上面的链接是一个关于webview显示获取到的网页图片轮播效果的源代码,你可以下载下来看看,然后找出自

android使用ViewPager实现轮播效果

ViewPager:一个可以实现视图左右滑动切换的控件. ViewPager的基本使用: ViewPager的视图需要通过PagerAdapter来实现显示. PagerAdapter的主要方法: ● getCount 视图的数量 ● instantiateItem 添加视图 ● destroyItem 销毁视图 ● isViewFromObject 是否由对象创建视图 ViewPager的常用方法: setAdapter 设置适配器 addOnPageChangeListener 监听页面切换