Android常见框架：启动页+ViewPager+Fragment+FragmentTabHost底部导航栏整合实现

## 源代码下载：http://download.csdn.net/detail/qq_26570353/9833991 ##

---

---

第二次以及之后再启动，直接由启动页，跳转到主页面。

---

本次实现的内容和知识如下，不太了解的可以去查看对应知识点：
1.程序启动页，实现延时一秒启动，知识：Handler postDelayed或者定时器实现等等均可

2.ViewPager+Fragment实现程序引导页，并设置指示器。

3.FragmentTabHost+Fragment实现底部导航栏,参考了博客：http://blog.csdn.net/yangyu20121224/article/details/9016223

4.Fragment中Button点击事件响应，由于会出现按钮不响应事件，网上也有介绍，可以去看看

5.Selector实现底部选中的图标和颜色切换，这里用Android Studio的Selector插件快速生成。

代码部分：为方便看懂，这里做大致介绍：

MainActivity.java: 程序的主体部分，

AppGuide: App的程序引导页部分

Fragment_Tab: 底部导航栏的Fragment

welcomePage: 程序每次启动都会看到的启动页实现部分

WelcomePage.java:
布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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/imgView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/guide_img1"        /></LinearLayout>

代码：

public class WelcomePage extends Activity {    //使用Handler实现延时或者定时器也可以    private Handler handler;    private boolean isFirst=true;    private Intent intent;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.welcome_page);        //将是否是第一次的状态用SharedPreferences保存和取出        final SharedPreferences sp= getSharedPreferences("FirstLaunch",MODE_PRIVATE);        isFirst=sp.getBoolean("FirstValue",true);        handler=new Handler();        handler.postDelayed(new Runnable() {                    @Override            public void run() {                if(isFirst){                    //修改状态，并跳转到引导页                    sp.edit().putBoolean("FirstValue", false).commit();                    intent=new Intent(WelcomePage.this, AppGuide.class);                    startActivity(intent);                }else{                    //不是第一次进入该APP,则跳转到MainActivity                    intent=new Intent(WelcomePage.this, MainActivity.class);                    startActivity(intent);                }                finish();            }        }, 1000);    }}

注意：需要将Manifest的启动改为welcomePage,后面再给出Manifest配置文件。

---

AppGuide.java:

public class AppGuide extends FragmentActivity implements OnClickListener,OnPageChangeListener {    private Button btnStart;    private ViewPager viewPager;    private GuideFragmentAdapter guideFragmentAdapter;    private List<Fragment> fragmentList;    private ImageView[] imageViews=new ImageView[4];    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.app_guide);        //initView        btnStart=(Button) findViewById(R.id.btnStart);        viewPager=(ViewPager) findViewById(R.id.viewPager);        fragmentList=new ArrayList<Fragment>();        //这么说吧，类似List<String> data--------这是准备数据源        fragmentList.add(new GuideFragment1());        fragmentList.add(new GuideFragment2());        fragmentList.add(new GuideFragment3());        fragmentList.add(new GuideFragment4());        //-----------------        imageViews[0]= (ImageView) findViewById(R.id.guidedot_1);        imageViews[1]= (ImageView) findViewById(R.id.guidedot_2);        imageViews[2]= (ImageView) findViewById(R.id.guidedot_3);        imageViews[3]= (ImageView) findViewById(R.id.guidedot_4);        //创建适配器        guideFragmentAdapter=new GuideFragmentAdapter(getSupportFragmentManager(), fragmentList);        //视图加载适配器        viewPager.setAdapter(guideFragmentAdapter);        //事件        viewPager.setOnPageChangeListener(this);        btnStart.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            //开始体验的按钮        case R.id.btnStart:            Intent intent=new Intent(this, MainActivity.class);            startActivity(intent);            this.finish();            break;        default:            break;        }    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    //滑动到最后一页，显示按钮    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        //如果滑动到最后一页，则把“开始体验”显示出来        if(position==fragmentList.size()-1){            btnStart.setVisibility(View.VISIBLE);        }else {            btnStart.setVisibility(View.GONE);        }        for(int i=0;i<4;i++){            if(i==position){                imageViews[i].setSelected(true);            }else {                imageViews[i].setSelected(false);            }        }    }

appguide对应布局文件：

<?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"        android:layout_width="match_parent"        android:layout_height="match_parent" >    </android.support.v4.view.ViewPager>    <!-- 指示点 -->    <LinearLayout        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="100dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true">        <ImageView            android:id="@+id/guidedot_1"            android:padding="15dip"            android:layout_gravity="center_horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/guide_dot" />        <ImageView            android:id="@+id/guidedot_2"            android:padding="15dip"            android:layout_gravity="center_horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/guide_dot" />        <ImageView            android:id="@+id/guidedot_3"            android:padding="15dip"            android:layout_gravity="center_horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/guide_dot" />        <ImageView            android:id="@+id/guidedot_4"            android:padding="15dip"            android:layout_gravity="center_horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/guide_dot" />    </LinearLayout>    <Button        android:id="@+id/btnStart"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:gravity="center_horizontal"        android:layout_marginBottom="20dp"        android:background="#00aa00"        android:text="开始体验"        android:padding="15dp"        android:textSize="30sp"        android:textColor="#FFFFFF"        android:visibility="gone" /></RelativeLayout>

---

guideFragment1.java:

public class GuideFragment1 extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater,ViewGroup container, @Nullable Bundle savedInstanceState) {        return inflater.inflate(R.layout.guide_fragment1, container, false);    }}

对应布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ImageView         android:layout_gravity="center"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/guide_img2"        /></LinearLayout>

---

GuideAdapter:适配器

public class GuideFragmentAdapter extends FragmentStatePagerAdapter {    private List<Fragment> fragmentList;    public GuideFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {        super(fm);        this.fragmentList=fragmentList;    }    @Override    public Fragment getItem(int arg0) {        return fragmentList.get(arg0);    }    @Override    public int getCount() {        return fragmentList.size();    }    //item销毁    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        super.destroyItem(container, position, object);    }    //item初始化    @Override    public Object instantiateItem(ViewGroup arg0, int arg1) {        return super.instantiateItem(arg0, arg1);    }}

---

至此，程序启动到引导页，应该是结束了的，下面是底部导航栏：
activity_main布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.a1141705068qq.class_one.com.a1141705068qq.aa.MainActivity">    <FrameLayout        android:id="@+id/home_container"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        >    </FrameLayout>    <View android:layout_width="match_parent"        android:layout_height="0.5dp"        android:alpha="0.6"        android:background="@android:color/darker_gray"        />    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="match_parent"        android:layout_marginTop="3dp"        android:layout_height="wrap_content">        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="0dp"            android:layout_height="0dp"            >        </FrameLayout>    </android.support.v4.app.FragmentTabHost></LinearLayout>

tab布局：也就是设置一个图片，底部是文字

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    android:orientation="vertical" >    <ImageView        android:id="@+id/img_tab"        android:layout_width="48dp"        android:layout_height="48dp"        android:focusable="false"        android:padding="3dp"         android:src="@drawable/home_seletor">    </ImageView>    <TextView        android:id="@+id/tv_tab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:text="首页"        android:textSize="15sp"        android:textColor="@drawable/tab_text_selecor">    </TextView></LinearLayout>

Fragment1.Java：遇到过按钮点击无响应，原因在于Fragment中的响应的写法变了一点点。其他的Fragment就是一个TextView，并且类似。这个布局只是多加了一个按钮，布局就不贴了，代码如下：

public class FragmentPage1 extends Fragment{    private View view;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        view=inflater.inflate(R.layout.tab_fragment1, null);        return view;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        //按钮事件响应的一种写法，在onActivityCreated写，也有其他写法，这里只是其一。        Button button = (Button) getActivity().findViewById(R.id.frag1_btn1);        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(getActivity(),"响应成功",Toast.LENGTH_SHORT).show();            }        });    }

MainActivity.java: 代码写了注释，应该可以看懂，需要用到上面的布局文件和内容，所以现在贴出，代码如下：

public class MainActivity extends AppCompatActivity{    //定义对象    private FragmentTabHost mTabHost;    private LayoutInflater layoutInflater;    //定义数组来存放Fragment界面\图片、文字    private Class fragmentArray[] = {FragmentPage1.class, FragmentPage2.class, FragmentPage3.class,            FragmentPage4.class};    private int mImageViewArray[] = {R.drawable.home_seletor,R.drawable.info_seletor,            R.drawable.my_selector, R.drawable.setting_selector};    private String mTextviewArray[] = {"首页", "消息", "我的", "设置"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        //实例化布局对象        layoutInflater = LayoutInflater.from(this);        //实例化TabHost对象，得到TabHost        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);        mTabHost.setup(this, getSupportFragmentManager(), R.id.home_container);        //设置取消分割线        mTabHost.getTabWidget().setDividerDrawable(null);        //得到fragment的个数        int count = fragmentArray.length;        for(int i = 0; i < count; i++){            //为每一个Tab按钮设置图标、文字和内容            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));            //将Tab按钮添加进Tab选项卡中            mTabHost.addTab(tabSpec, fragmentArray[i], null);        }    }//end of initView    /**     * 给Tab按钮设置图标和文字     */    public View getTabItemView(int index){        View view = layoutInflater.inflate(R.layout.tab_item_view, null);        ImageView imageView = (ImageView) view.findViewById(R.id.img_tab);        imageView.setImageResource(mImageViewArray[index]);        TextView textView = (TextView) view.findViewById(R.id.tv_tab);        textView.setText(mTextviewArray[index]);        return view;    }}

AndroidMainifest.xml: 注意的是将第一个activity修改成welcomPage,这样每次都是APP从这个Activity先启动，才可以看见启动页。

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.a1141705068qq.class_one">    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/Theme.AppCompat.Light.NoActionBar">        <activity android:name="com.xqliu.welcomepage.WelcomePage">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>        <activity android:name="com.a1141705068qq.main.MainActivity"></activity>        <activity android:name="com.xqliu.appguide.AppGuide"></activity>    </application></manifest>

源代码下载：http://download.csdn.net/detail/qq_26570353/9833991