开发者头条（一）：导航页

看了别人的博客，学着自己写出来，原文：http://blog.csdn.net/lowprofile_coding/article/details/51170252。

实现开发者头条的框架，今天先实现导航页。

逻辑：

app若不是第一次打开，则进入主页面；如是：则进入导航页。
导航页有图片，下方有指示灯，当滑到最后一页的时候显示“开启我的头像”，即进入主页面。

图：

布局：

activity_main.xml

没有添加内容

activity_guide.xml

指示灯放在了LinearLayout中，最后一页显示 是个TextView

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

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

    <LinearLayout 
        android:id="@+id/layout_indicator_guild"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">

    </LinearLayout>

    <TextView 
        android:id="@+id/tv_guild"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/layout_indicator_guild"
        android:layout_marginBottom="20dp"
        android:background="@drawable/tv_guild_shape"
        android:visibility="invisible"
        android:padding="10dp"
        android:gravity="center"
        android:textColor="#039BE5"
        android:textSize="18sp"
        android:text="开启我的头像"/>

</RelativeLayout>

其中：tv_guild_shape.xml
stroke:边框； width：边框宽度， color：边框颜色。
solid:背景； color：背景色。
corners:圆角； radius：角度。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="1dp"
        android:color="#039BE5"/>

    <solid android:color="#F5F5F5"/>

    <corners android:radius="5dp"/>
</shape>

4张效果图分别是：

代码

Step 1 :判断是不是第一次进入

根据SharePerference中存的值来判断。

//判断是不是第一次进入
SharedPreferences sp = getSharedPreferences("config", MODE_PRIVATE);
boolean isFirst = sp.getBoolean("isFirst", true);
if (!isFirst) {//进入主页面
    Intent intent = new Intent(context, MainActivity.class);
    startActivity(intent);
    GuildActivity.this.finish();
} 
//第一次进入后修改为false
sp.edit().putBoolean("isFirst", false).commit();

接下来就是第一次进入需要进行的操作，viewpager设置adapter + 指示灯 + 最后一页提示

Step2 : viewpager设置adapter

initData();
GuildPagerAdapter adapter = new GuildPagerAdapter(context, list);
viewPager.setAdapter(adapter);

viewPager.setOnPageChangeListener(this);

其中：initData（）是初始化viewpager的存放的4张图片，代码如下

private void initData() {
    list.clear();
    ImageView iv1 = new ImageView(context);
    ImageView iv2 = new ImageView(context);
    ImageView iv3 = new ImageView(context);
    ImageView iv4 = new ImageView(context);

    iv1.setImageResource(R.drawable.tutorial_1);
    iv2.setImageResource(R.drawable.tutorial_2);
    iv3.setImageResource(R.drawable.tutorial_3);
    iv4.setImageResource(R.drawable.tutorial_4);

//      iv1.setBackgroundResource(R.drawable.tutorial_1);
//      iv2.setBackgroundResource(R.drawable.tutorial_2);
//      iv3.setBackgroundResource(R.drawable.tutorial_3);
//      iv4.setBackgroundResource(R.drawable.tutorial_4);
    //居中显示，若设置setBackgroundResource（），图片会铺满背景，而图片又没那么大，有种放大的感觉
    iv1.setScaleType(ScaleType.CENTER);
    iv2.setScaleType(ScaleType.CENTER);
    iv3.setScaleType(ScaleType.CENTER);
    iv4.setScaleType(ScaleType.CENTER);

    list.add(iv1);
    list.add(iv2);
    list.add(iv3);
    list.add(iv4);
}

接着是viewpager的adapter：GuildPagerAdapter

需要重写4个方法

package com.cqc.developerheadlinecqc.adapter;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;

public  class GuildPagerAdapter extends PagerAdapter {

    private Context context;
    private List<ImageView> list;

    public GuildPagerAdapter(Context context , List<ImageView> list) {
        super();
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)object);
    }
}

接着给viewpager设置滑动监听：viewPager.setOnPageChangeListener(this);在监听中改变指示灯的背景和最后一页显示。

@Override
public void onPageScrolled(int position, float positionOffset,
        int positionOffsetPixels) {
    // TODO Auto-generated method stub

}
@Override
public void onPageSelected(int position) {
    if (position == list.size() -1) {
        tv.setVisibility(View.VISIBLE);
    } else{
        tv.setVisibility(View.INVISIBLE);
    }

    for (int i = 0; i < indicatorList.size(); i++) {
        if (i == position) {
            indicatorList.get(i).setBackgroundResource(R.drawable.page_indicator_focused);
        } else{
            indicatorList.get(i).setBackgroundResource(R.drawable.page_indicator_unfocused);
        }
    }
}
@Override
public void onPageScrollStateChanged(int state) {
    // TODO Auto-generated method stub

}

去掉标题:

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:windowNoTitle">true</item>
</style>

源码：http://download.csdn.net/detail/ss1168805219/9627342
轮播图的切换请移步：http://blog.csdn.net/ss1168805219/article/details/52282750 和http://blog.csdn.net/ss1168805219/article/details/52294657