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线程实现图片轮播

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

Android ViewPager实现图片轮播效果

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

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

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

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

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

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

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

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自动播放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

RollViewPager无限轮播使用方法详解

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

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

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

微信小程序图片轮播组件gallery slider使用方法详解

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下 先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo

JS图片轮播与索引变色功能实例详解

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

全面解析多种Bootstrap图片轮播效果

分享了三种Bootstrap图片轮播效果,相信总有一款你满意的! 第一种效果:Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

Bootstrap3制作图片轮播效果

先来看看Bootstrap图片轮播效果: 上面就是为大家分享的效果,不过这是网易云音乐的首页. 这样的效果记得最先在ios7的官方控件库中出现之后安卓也在某个版本加入了这个view,设计是通用的啊..bootstrap3也支持在web中使用这样的效果. 接下来进行简单分析: 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 I

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

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

jQuery实现的淡入淡出图片轮播效果示例

本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig

使用JQuery实现图片轮播效果的实例(推荐)

[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

基于cssSlidy.js插件实现响应式手机图片轮播效果

cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap