ViewPager+Fragment实现页面的切换

Posted 2020-08-24 丽-pc

新知识，新摘要：

效果图：framgent导入包都是v4包下，谨慎导入错误！

首先设置viewPager布局：

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

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

    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
       android:layout_alignParentBottom="true"
        android:background="@color/colorPurple"
        android:orientation="horizontal"
        >
        <TextView
            android:id="@+id/you"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="你好"
            android:textSize="20sp"
            android:gravity="center"
            />
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#FFFFFF"></View>
        <TextView
            android:id="@+id/me"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="我好"
            android:textSize="20sp"
            android:gravity="center"
            />
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#FFFFFF"></View>
        <TextView
            android:id="@+id/hei"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="大家好"
            android:textSize="20sp"
            android:gravity="center"
            />

    </LinearLayout>
</RelativeLayout>

其次设置子布局framgent：设置三个页面例如页面一

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

    <TextView
        android:id="@+id/first"
        android:layout_width="match_parent"
        android:layout_height="50dp"
         android:text="第一个页面"
        android:textSize="30sp"
        android:gravity="center"
        android:background="@color/colorPurple"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/first"
        android:src="@mipmap/cute"/>

</RelativeLayout>

然后分别设置三个页面的framgent类继承Fragment类，列如第一页面：

package com.example.administrator.test_1216.framgent;


import com.example.administrator.test_1216.R;

public class OneFramgent1221 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 添加布局
        View v=inflater.inflate(R.layout.oneframgent1221_item,null);
        return v;
    }
}
其次设置adapter继承

package com.example.administrator.test_1216.adapter;

public class FramgentPagerAdapter1221 extends FragmentPagerAdapter{

    //声明集合
  private List<Fragment> list;
    public FramgentPagerAdapter1221(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}
最后设置activity：代码思路：a、声明控件，绑定id，首先实现文字控件的颜色改变和监听；

　　　　　　　　　　　　　　b、声明viewPager控件，绑定id，声明集合，将framgent类型的页面加入到list集合中

　　　　　　　　　　　　　　c、初始化适配器，加载适配器；

　　　　　　　　　　　　　　d、为viewPager设置监听，页面滚动切换页面时候文字发生颜色发生改变；

代码如下：

package com.example.administrator.test_1216;

public class FramgentPagerActivity1221 extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
    //声明控件
    private TextView you;
    private TextView me;
    private TextView hei;
    private int currentColor;
    private  int otherColor;
    private ViewPager viewpager1221;
    private FramgentPagerAdapter1221 adapter1221;
    List<Fragment> list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.pagerviewframgent1221);
        currentColor=getResources().getColor(R.color.currentColor);
        otherColor=getResources().getColor(R.color.otherColor);
        intiview();
        andViewPager();
    }

    private void andViewPager() {
        viewpager1221= (ViewPager) findViewById(R.id.viewpager1221);
        //初始化集合
        list=new ArrayList<Fragment>();
        //添加页面到集合
        list.add(new OneFramgent1221());
        list.add(new TwoFramgent1221());
        list.add(new ThreeFramgent1221());
        //初始化适配器
        adapter1221=new FramgentPagerAdapter1221(getSupportFragmentManager(),list);
        viewpager1221.setAdapter(adapter1221);
        //设置每次启动软件时的显示页面
        viewpager1221.setCurrentItem(0);
        //设置viewpager的监听
        viewpager1221.setOnPageChangeListener(this);
    }

    private void intiview() {
        //绑定id
        you= (TextView) findViewById(R.id.you);
        me= (TextView) findViewById(R.id.me);
        hei= (TextView) findViewById(R.id.hei);
        //添加初始默认颜色
        you.setTextColor(currentColor);
        me.setTextColor(otherColor);
        hei.setTextColor(otherColor);
        //设置监听
        you.setOnClickListener(this);
        me.setOnClickListener(this);
        hei.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        //声明下标
        int index=0;
        switch (v.getId()){
            case R.id.you:
                you.setTextColor(currentColor);
                me.setTextColor(otherColor);
                hei.setTextColor(otherColor);
                index=0;
                break;
            case R.id.me:
                you.setTextColor(otherColor);
                me.setTextColor(currentColor);
                hei.setTextColor(otherColor);
                index=1;
                break;
            case R.id.hei:
                you.setTextColor(otherColor);
                me.setTextColor(otherColor);
                hei.setTextColor(currentColor);
                index=2;
                break;
        }
        // 为viewpager设置下标
        viewpager1221.setCurrentItem(index);
    }
//页面切换时候字体的颜色改变
    @Override
    public void onPageSelected(int position) {
        switch (position){
            case 0:
                you.setTextColor(currentColor);
                me.setTextColor(otherColor);
                hei.setTextColor(otherColor);
                break;
            case 1:
                you.setTextColor(otherColor);
                me.setTextColor(currentColor);
                hei.setTextColor(otherColor);
                break;
            case 2:
                you.setTextColor(otherColor);
                me.setTextColor(otherColor);
                hei.setTextColor(currentColor);
                break;
        }


    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }



    @Override
    public void onPageScrollStateChanged(int state) {

    }
}