android 广告栏 viewpager
activity_main.xml
<span style="font-size:18px;"><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" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="140dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#33000000"
android:orientation="vertical"
android:layout_alignBottom="@id/viewPager"
>
<TextView
android:id="@+id/msg"
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="18sp"
/>
<!-- android:gravity="center" : 居中对齐 -->
<LinearLayout
android:id="@+id/point_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
>
</LinearLayout>
</LinearLayout>
</RelativeLayout></span>
point_focusl.xml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<size android:width="5dp" android:height="5dp"/>
<solid android:color="#aaFFFFFF"/>
</shape>
</span>
point_nomal.xml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<size android:width="5dp" android:height="5dp"/>
<solid android:color="#55000000"/>
</shape>
</span>
point_bg.xml
<span style="font-size:18px;"><?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_focusl" android:state_enabled="true" />
</selector>
</span>
以上是布局代码，接下来是类和方法实现viewPager的图片展示效果
此处注意的是 广告栏的布局样式分为三个细节（图片展示）（文字描述）（圆点跟踪）
MainActivity.java
package com.guyu.advertisement;
import java.util.ArrayList;
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 viewPager;
private LinearLayout pointGroup;
private TextView imageDes;
//1.首先获取图片的资源ID <span style="font-family: Arial, Helvetica, sans-serif;">imageIds </span>
private final int[] imageIds =
{
R.drawable.cc,
R.drawable.ff,
R.drawable.pp,
R.drawable.qq,
R.drawable.vv,
R.drawable.ic_launcher
};
//2 获得文字的资源<span style="font-family: Arial, Helvetica, sans-serif;">imageDescriptions </span>
private final String[] imageDescriptions =
{
"你电脑等你一覅",
"能促进妇女军方均能的",
"你发发你的我繁荣奇偶等你菲菲姐聂风你年经济法凝聚 你的呢 ",
"衡水市你那",
"能减肥的存储",
"sdddjdfv"
};
private ArrayList<ImageView> imageList;
//上一个页面
private int lastPointPosition;
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);
imageDes = (TextView) findViewById(R.id.msg);
// 2 刚出来设置为第一条内容
imageDes.setText(imageDescriptions[0]);
imageList = new ArrayList<ImageView>();
for( int i= 0;i <imageIds.length;i++)
{
<span style="white-space:pre"> </span>//1.初始化图片资源 将图片<span style="font-family: Arial, Helvetica, sans-serif;">添加到imageList中</span>
ImageView image = new ImageView(this);
image.setBackgroundResource(imageIds[i]);
imageList.add(image);
// 3 添加指示点
ImageView point = new ImageView(this);
<span style="white-space:pre"> </span>//设置点的布局<span style="white-space:pre"> </span>LinearLayout.LayoutParams Params = new LinearLayout.LayoutParams(5,5);
<span style="white-space:pre"> </span>Params.rightMargin = 20;
point.setLayoutParams(Params);
point.setBackgroundResource(R.drawable.point_bg);
point.setEnabled(false);
if(i == 0)
{
point.setEnabled(true);
}
else {
point.setEnabled(false);
}
pointGroup.addView(point);
}
//1 设置适配器（一个位置给一个view） 这样就完成了一个简单的图片滑动展示，接//下来是完成 2图片描述
viewPager.setAdapter(new MyPagerAdapter());
// 2 添加一个事件监听 （监听页面的变化，实现文字描述也随之改变）
<span style="white-space:pre"> </span>//2 <span style="font-family: Arial, Helvetica, sans-serif;">setOnPageChangeListener() 里面有三个方法，第一个比较常用</span>
viewPager.setOnPageChangeListener(new OnPageChangeListener()
{
/* 2 页面切换后调用
* position 新的页面位置
* */
public void onPageSelected(int position)
{
// 2 设置文字描述
imageDes.setText(imageDescriptions[position]);
<span style="white-space:pre"> </span>/* 3 改变指示点状态
* 把当前点enbale 为true
* */
pointGroup.getChildAt(position).setEnabled(true);
/*把上一个点设为flase*/
pointGroup.getChildAt(lastPointPosition).setEnabled(false);
lastPointPosition = position ;
}
/*页面不断滑动的时候，回调 （不常用）
*
* */
public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels)
{
}
/*当页面状态发生改变的时候，回调 （不常用）
*
* */
public void onPageScrollStateChanged(int state)
{
}
});
}
//1.定义适配器继承<span style="font-family: Arial, Helvetica, sans-serif;">PagerAdapter</span><span style="font-family: Arial, Helvetica, sans-serif;"> 这里有四个方法需要实现</span>
private class MyPagerAdapter extends PagerAdapter
{
@Override
/*获得页面的总数
* */
public int getCount()
{
return imageList.size();
}
/*获得相应位置的view
* container view的容器，其实就是viewpager本身
* position 相应的位置
* */
@Override
public Object instantiateItem(ViewGroup container, int position)
{
//给container添加view
container.addView(imageList.get(position));
return imageList.get(position);
}
/*判断view和object的对应关系*/
public boolean isViewFromObject(View view, Object object)
{
return view ==object;
}
/**
* 销毁对应位置上的object （在滑动图片时候viewPager只会生成前后相邻的view，同时会杀死其余的view）
*/
public void destroyItem(ViewGroup container, int position, Object object) {
System.out.println("destroyItem ::"+position);
container.removeView((View) object);
object = null;
}
}
}