Activity和ViewPager的结合使用

小天一如既往给大家带来最简单最实用的编程技巧和编程知识，这一次给大家带来的是Activity和ViewPager的结合使用，关于Activity和Fragment的结合使用在之前的文章里面也已经讲解过了，不懂的可以查看http://blog.csdn.net/u012600997/article/details/50685535

首先看一下效果图，如果是你想要的就请继续往下看吧，如果不是你想要的也不需要浪费时间了

如果你想做的效果是这样的那么你首先需要做一个底部的选择页面，有三个按钮，具体的可以看代码：include_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="50dp">
    <LinearLayout
        android:id="@+id/include_main_linear_one"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/include_main_text_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorPrimary"
            android:text="第一页"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_linear_two"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/include_main_text_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorAccent"
            android:text="第二页"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/include_main_linear_three"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/include_main_text_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorAccent"
            android:text="第三页"/>
    </LinearLayout>
</LinearLayout>

有了这个页面之后那我们就需要定义一个含有ViewPager空间的页面，也就是我们的主页面或者是你们需要使用的页面，因为是单独的Demo，所以我这里就以主页面为主了，具体的可以查看代码：activity_main.xml

<?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">
    <android.support.v4.view.ViewPager
        android:id="@+id/main_mypager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <include layout="@layout/include_main"/>
</LinearLayout>

那么我们的使用页面已经有了，呢我们是不是要写主页面的逻辑代码了呢？小天的建议是：No。

因为你现在还需要三个Fragment，只有把你需要的片段定义好了之后再在主页面里面写主要的逻辑代码这样就是水到渠成的事情了，所以我们接下来要定义三个Fragment和它们分别对应的.xml文件，这里我就不做多余的解释了，直接贴代码

fragment_one.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="我是第一个页面"/>
</LinearLayout>

fragment_two.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="我是第二个页面"/>
</LinearLayout>

fragment_three.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="我是第三个页面"/>
</LinearLayout>

页面定义好了之后就是Fragmeng对页面的引用了
FragmentOne：

package com.cloudy.myviewpager;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 创建人：   洋大阔天
 * 创建时间： 2017/2/17
 * 内容描叙：
 * 修改人：
 * 修改时间：
 * 修改描叙：
 */

public class FragmentOne extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return LayoutInflater.from(getContext()).inflate(R.layout.fragment_one,null);
    }
}

FragmentTwo：

package com.cloudy.myviewpager;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 创建人：  洋大阔天
  
  

   
     *  创建时间： 2017/2/17
  
  
 * 内容描叙：
 * 修改人：
 * 修改时间：
 * 修改描叙：
 */

public class FragmentTwo extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return LayoutInflater.from(getContext()).inflate(R.layout.fragment_two,null);
    }
}

FragmentThree：

package com.cloudy.myviewpager;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 创建人：   汪云
 * 创建时间： 2017/2/17
 * 内容描叙：
 * 修改人：
 * 修改时间：
 * 修改描叙：
 */

public class FragmentThree extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return LayoutInflater.from(getContext()).inflate(R.layout.fragment_three,null);
    }
}

写完了这些之后我们就可以很顺利的写MainActivity里面的主要的逻辑代码了MainActivity：

package com.cloudy.myviewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager MyPager;
    private List<Fragment> fragmentList;
    private LinearLayout LinearOne,LinearTwo,LinearThree;
    private TextView TextOne,TextTwo,TextThree;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化页面控件
        fragmentList = new ArrayList<>();
        fragmentList.add(new FragmentOne());
        fragmentList.add(new FragmentTwo());
        fragmentList.add(new FragmentThree());

        MyPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList));
        MyPager.setCurrentItem(0);
        MyPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                setTextColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    public class MyViewPagerAdapter extends FragmentPagerAdapter {
        List<Fragment> list;
        public MyViewPagerAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.list = list;
        }



        @Override
        public int getCount() {
            return list.size();
        }
        @Override
        public Fragment getItem(int arg0) {
            return list.get(arg0);
        }
    }

    private void initView(){
        MyPager = (ViewPager) findViewById(R.id.main_mypager);
        LinearOne = (LinearLayout) findViewById(R.id.include_main_linear_one);
        LinearOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MyPager.setCurrentItem(0);
            }
        });
        LinearTwo = (LinearLayout) findViewById(R.id.include_main_linear_two);
        LinearTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MyPager.setCurrentItem(1);
            }
        });
        LinearThree = (LinearLayout) findViewById(R.id.include_main_linear_three);
        LinearThree.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MyPager.setCurrentItem(2);
            }
        });
        TextOne = (TextView) findViewById(R.id.include_main_text_one);
        TextTwo = (TextView) findViewById(R.id.include_main_text_two);
        TextThree = (TextView) findViewById(R.id.include_main_text_three);
    }
    private void setTextColor(int position){
        TextOne.setTextColor(getResources().getColor(R.color.colorAccent));
        TextTwo.setTextColor(getResources().getColor(R.color.colorAccent));
        TextThree.setTextColor(getResources().getColor(R.color.colorAccent));
        switch (position){
            case 0:
                TextOne.setTextColor(getResources().getColor(R.color.colorPrimary));
                break;
            case 1:
                TextTwo.setTextColor(getResources().getColor(R.color.colorPrimary));
                break;
            case 2:
                TextThree.setTextColor(getResources().getColor(R.color.colorPrimary));
                break;
        }
    }
}

到这里我们想要的功能就实现了，如果代码这样还看不懂，那小天还为大家准备了Demo的下载 点击打开链接，只不过需要1积分，所以大家还是努力看代码吧！
如果觉得小天写的帮助了你，记得点个赞哟！