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 相应的位置 * */@Overridepublic Object instantiateItem(ViewGroup container, int position) {//给container添加viewcontainer.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;}}}

更多相关文章

随机推荐