安卓开发之viewpager学习（头条显示）

activity_luancher.xml代码如下：

<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"
    android:background="#FCF2E4" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_launcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" />
    </RelativeLayout>

</RelativeLayout>

android.support.v4.view.ViewPager是在xml加入一个viewpager控件。
activity_luancher_pager_item.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/tutorial_1"/>
    
    <TextView
        android:id="@+id/tv_start_headlines" 
        android:layout_gravity="bottom|center_horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginBottom="60dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:background="@drawable/start_headlines_bg"
        android:textColor="@color/launcher_item_select"
        android:textSize="16sp"
        android:visibility="invisible"
        android:text="开启我的头条"/>

</FrameLayout>

这是每个viewpager页中的内容。

viewpager的Adapter提供图片等信息：

LauncherPagerAdapter.java代码：

package com.ansen.developerheadlines.adapter;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.ansen.developerheadlines.R;
import com.ansen.developerheadlines.iview.ILauncherView;

/**
 * ViewPager适配器
 * @author ansen
 * @create time 2016-04-15
 */
public class LauncherPagerAdapter extends PagerAdapter implements OnClickListener{
    private ILauncherView launcherView;
    
    private List<View> views;
    //每页显示的图片
    private int[] images=new int[]{R.drawable.tutorial_1,R.drawable.tutorial_2,R.drawable.tutorial_3,R.drawable.tutorial_4};
    
    public LauncherPagerAdapter(Context context,ILauncherView launcherView){
        views=new ArrayList<View>();
        this.launcherView=launcherView;
        //初始化每页显示的View
        for(int i=0;i<images.length;i++){
            View item=LayoutInflater.from(context).inflate(R.layout.activity_luancher_pager_item, null);
            ImageView imageview=(ImageView) item.findViewById(R.id.imageview);
            imageview.setImageResource(images[i]);
            item.findViewById(R.id.tv_start_headlines).setOnClickListener(this);
            views.add(item);
        }
    }
    
    public List<View> getViews() {
        return views;
    }
    
    @Override
    public int getCount() {
        return views == null ? 0 : views.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0==arg1;
    }
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object){
        ((ViewPager) container).removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ((ViewPager) container).addView(views.get(position), 0);
        return views.get(position);
    }

    @Override
    public void onClick(View v) {
        launcherView.gotoMain();
    }
    
}

先将图片存入list<view>动态数组中(当然图片已经绑定在了各个view中)。

item.findViewById(R.id.tv_start_headlines).setOnClickListener(this);实现最后的页面的"开启头条"跳转，在前几个页面设置的invisible。

viewpager的adapter在切换view时，会先调用destroyitem函数，销毁显示的对象（view），然后调用instantiateItem新建一个需要显示的对象（view）.

LauncherActivity.java代码：

package com.ansen.developerheadlines.activity;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.ansen.developerheadlines.R;
import com.ansen.developerheadlines.adapter.LauncherPagerAdapter;
import com.ansen.developerheadlines.iview.ILauncherView;

/**
 * 第一次启动页面
 * 
 * @author Ansen
 * @create time 2016-04-15
 */
@SuppressLint("ResourceAsColor")
public class LauncherActivity extends FragmentActivity implements ILauncherView {
    private ViewPager viewpagerLauncher;
    private LauncherPagerAdapter adapter;

    private ImageView[] tips;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_luancher);
        
//        if(!isFirst()){
//            gotoMain();
//        }
        viewpagerLauncher = (ViewPager) findViewById(R.id.viewpager_launcher);
        adapter = new LauncherPagerAdapter(this, this);
        viewpagerLauncher.setOffscreenPageLimit(2);
        viewpagerLauncher.setCurrentItem(0);
        viewpagerLauncher.setAdapter(adapter);
        viewpagerLauncher.setOnPageChangeListener(changeListener);
        ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);// 初始化底部显示控件
        tips = new ImageView[4];
        for (int i = 0; i < tips.length; i++){
            ImageView imageView = new ImageView(this);
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
            tips[i] = imageView;
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
            layoutParams.leftMargin = 10;// 设置点点点view的左边距
            layoutParams.rightMargin = 10;// 设置点点点view的右边距
            group.addView(imageView, layoutParams);
        }
    }

    private OnPageChangeListener changeListener = new OnPageChangeListener() {
        @Override
        public void onPageScrollStateChanged(int arg0) {}
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {}
        @Override
        public void onPageSelected(int index) {
            setImageBackground(index);// 改变点点点的切换效果

            TextView tvStartHeadlines = (TextView) adapter.getViews().get(index).findViewById(R.id.tv_start_headlines);
            if (index == tips.length - 1) {// 最后一个
                tvStartHeadlines.setVisibility(View.VISIBLE);
            } else {
                tvStartHeadlines.setVisibility(View.INVISIBLE);
            }
        }
    };

    /**
     * 改变点点点的切换效果
     * @param selectItems
     */
    private void setImageBackground(int selectItems) {
        for (int i = 0; i < tips.length; i++) {
            if (i == selectItems) {
                tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
        }
    }

    @Override
    public void gotoMain() {
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }

    private boolean isFirst() {
        SharedPreferences setting = getSharedPreferences("headlines", 0);
        Boolean user_first = setting.getBoolean("FIRST", true);
        if (user_first) {// 第一次
            setting.edit().putBoolean("FIRST", false).commit();
            return true;
        } else {
            return false;
        }
    }
}

ImageView[] tips是图片下面的转动条，设置事件随图片的变动而变动。

效果图：