Android开发之滑动图片轮播标题焦点

先给大家这是下效果图:

谷歌提供的v4包,ViewPager

在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域

在布局文件中,布置标题描述部分

线性布局,竖向排列,背景色黑色半透明,这个布局和上面的ViewPager底部对齐layout_alignBottom=”@id/xxx”

<TextView/>居中显示,

小点部分,先放过空的LinearLayout,id是ll_points在代码中对其进行填充

获取ViewPager对象

调用ViewPager对象的setAdapter()方法,参数:PagerAdapter对象

因为PagerAdapter是抽象类,定义一个MyPagerAdapter继承PagerAdapter,实现以下方法

重写getCount()方法,返回轮播的个数

重写isViewFromObject()方法,返回布尔值,

重写instantiateItem()方法,将当前view对象添加到ViewGroup对象,返回当前对象

重写destroyItem()方法,从当前container中删除指定位置(position)的View

切换描述标题字符串

定义一个String[]数组,保存标题

调用ViewPager对象的setOnPagerChangeListener()方法,参数:OnPagerChangeListener对象

匿名内部类实现,重写以下方法

onPageSelected()方法,页面切换后调用,传递进参数,int索引

onPageScrolled()方法,当页面正在滚动的时候

onPageScrollStateChanged()方法,当页面滚动状态改变的时候

小图标部分

新建两个shape文件,使用xml画两个原点

添加节点<shape>,设置形状为原型android:shape=”oval”

添加尺寸节点<size> ,设置宽度,高度,android:width=”” android:height=””

添加颜色节点<solid>,设置颜色 android:color=””

正常情况下,灰色点,焦点的时候,白色的点,两个xm文件的颜色不一样

point.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size
android:height="4dp"
android:width="4dp" />
<solid android:color="#aaffffff"/>
</shape> 

point_write.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size
android:height="4dp"
android:width="4dp" />
<solid android:color="#ffffffff"/>
</shape> 

新建一个selector文件,当图片enable的时候白色的点,不可用的时候灰色的点,不同的状态不同的图片

添加<selector>节点

添加<item>节点,设置图片属性android:drawable=”” 设置状态android:enabled=”true|false”

point_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/point" android:state_enabled="false"></item>
<item android:drawable="@drawable/point_write" android:state_enabled="true"></item>
</selector> 

循环大图片的个数,创建ImageView对象,

调用ImageView对象setImageResource()方法,设置资源,参数:selector文件

调用ImageView对象的setLayoutParams()方法,给小图标ImageView对象添加一些margin值,参数:LayoutParams对象,获取LinearLayout.LayoutParams对象,调用LayoutParams对象的rightMargin()方法,设置margin值

调用ImageView对象的setEnabled()方法,设置是否可用,参数:布尔值

获取LinearLayout对象,调用LinearLayout对象的addView()方法,把小图标的视图填进去,参数:ImageView对象

默认第一个是焦点,随着图片滑动,焦点跟着改变

package com.tsh.myviewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v.view.PagerAdapter;
import android.support.v.view.ViewPager;
import android.support.v.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 vp_banner;
private LinearLayout ll_points;
private TextView tv_title;
private List<View> banners;
private String[] titles=new String[]{
"新闻标题",
"新闻标题",
"新闻标题"
};
private List<ImageView> points=new ArrayList<ImageView>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化
vp_banner = (ViewPager) findViewById(R.id.vp_banner);
ll_points = (LinearLayout) findViewById(R.id.ll_points);
tv_title = (TextView) findViewById(R.id.tv_title);
// banner部分
banners = new ArrayList<>();
ImageView img = new ImageView(this);
img.setImageResource(R.drawable.a);
banners.add(img);
ImageView img = new ImageView(this);
img.setImageResource(R.drawable.b);
banners.add(img);
ImageView img = new ImageView(this);
img.setImageResource(R.drawable.c);
banners.add(img);
//小图标
ll_points=(LinearLayout) findViewById(R.id.ll_points);
for(int i=;i<banners.size();i++){
ImageView image=new ImageView(this);
image.setImageResource(R.drawable.point_selector);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(, );
params.rightMargin=;
image.setLayoutParams(params);
ll_points.addView(image);
if(i==){
image.setEnabled(true);
}else{
image.setEnabled(false);
}
points.add(image);
}
// 设置适配器
vp_banner.setAdapter(new MyPagerAdapter());
vp_banner.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg) {
tv_title.setText(titles[arg]);
//小图标处理
for(ImageView point:points){
point.setEnabled(false);
}
points.get(arg).setEnabled(true);
}
@Override
public void onPageScrolled(int arg, float arg, int arg) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg) {
// TODO Auto-generated method stub
}
});
}
private class MyPagerAdapter extends PagerAdapter {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(banners.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(banners.get(position));
return banners.get(position);
}
@Override
public int getCount() {
return banners.size();
}
@Override
public boolean isViewFromObject(View arg, Object arg) {
return arg == arg;
}
}
}

以上所述是小编给大家介绍的Android开发之滑动图片轮播标题焦点的相关知识,希望对大家有所帮助!

时间: 2016-05-01

Android使用开源框架ANDROID-IMAGE-INDICATOR实现图片轮播部署

之前的博文中有介绍关于图片轮播的实现方式,分别为(含超链接): 1.<Android中使用ViewFlipper实现屏幕切换> 2.<Android中使用ViewPager实现屏幕页面切换和页面轮播效果> 3.<Android中使用ImageViewSwitcher实现图片切换轮播导航效果> 今天通过使用GitHub中的开源项目android-image-indicator来简单实现APP自带图片的轮播以及加载网络图片进行轮播. 一.从GitHub上下载项目 GitHu

Android ViewPager实现图片轮播效果

在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实现图片轮播效果的两种方法

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

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

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

RollViewPager图片轮播效果开源框架使用方法详解

RollViewPager是一个自动轮播的Viewpager,支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可以变. 附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager 使用Android Studio开发在gradle添加依赖: compile 'com.jude:rollviewpager:1.4.5' 在布局文件当中使用: <

RollViewPager无限轮播使用方法详解

支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可以变.. 主要操作过程: 1.在gradle中导入包: compile 'com.jude:rollviewpager:1.2.9' 2.设置播放时间间隔.透明度.指示器(指示器可以是默认原点,数字,也可以自定义图片) 3.设置适配器,本demo中是StaticPagerAdapter,这个比较简单,用的比较多,有其他需要的可以看github源码. 主要需要设置

Android线程实现图片轮播

一.实现效果 本篇文章实现了简单的图片轮播,初始化3张资源图片,初始化3秒更换一次图片背景,轮换播放. 二.知识点 Thread线程start() .sleep();handler机制;Android 控件imageView.setBackgroundResource(id); 还算是较为简单的,涉及的基本都是基础知识. 三.基本思路 1.初始化资源文件 2.创建一个实例化线程对象 new Thread() 3.handler 机制,sendMessage(msg); 来处理线程信息,以改变当前

Android实现图片轮播切换实例代码

利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

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

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

JS 实现banner图片轮播效果(鼠标事件)

一.要实现的效果 1.点击左右可切换图片 2.点击小圆点 可切换图片 二.效果图 三.代码 1.css <style type="text/css"> body,img,span,ul,li{margin: 0;padding: 0;} #div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;} img{width: 600px;height

Android实现图片轮播效果

本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

js实现图片轮播效果

本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati

用jQuery实现圆点图片轮播效果

图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : -------------------------------------------------------------------------------- 自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对

js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

js实现图片轮播效果学习笔记

本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过

Vue封装Swiper实现图片轮播效果

图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

JS实现图片轮播效果实例详解【可自动和手动】

本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换  3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g