[android] 轮播图-滑动图片标题焦点详解手机开发

谷歌提供的v4包，ViewPager

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

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

线性布局，竖向排列，背景色黑色半透明，这个布局和上面的ViewPager底部对齐layout_alignBottom=[email protected]/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.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 vp_banner; 

 private LinearLayout ll_points; 

 private TextView tv_title; 

 private List View banners; 

 private String[] titles=new String[]{ 

 "新闻标题1", 

 "新闻标题2", 

 "新闻标题3" 

 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 img1 = new ImageView(this); 

 img1.setImageResource(R.drawable.a); 

 banners.add(img1); 

 ImageView img2 = new ImageView(this); 

 img2.setImageResource(R.drawable.b); 

 banners.add(img2); 

 ImageView img3 = new ImageView(this); 

 img3.setImageResource(R.drawable.c); 

 banners.add(img3); 

 //小图标 

 ll_points=(LinearLayout) findViewById(R.id.ll_points); 

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

 ImageView image=new ImageView(this); 

 image.setImageResource(R.drawable.point_selector); 

 LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(5, 5); 

 params.rightMargin=4; 

 image.setLayoutParams(params); 

 ll_points.addView(image); 

 if(i==0){ 

 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 arg0) { 

 tv_title.setText(titles[arg0]); 

 //小图标处理 

 for(ImageView point:points){ 

 point.setEnabled(false); 

 points.get(arg0).setEnabled(true); 

 @Override 

 public void onPageScrolled(int arg0, float arg1, int arg2) { 

 // TODO Auto-generated method stub 

 @Override 

 public void onPageScrollStateChanged(int arg0) { 

 // 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 arg0, Object arg1) { 

 return arg0 == arg1; 

}

5404.html