用ViewPager+Fragment（碎片）实现滑动效果

最新推荐文章于 2018-07-04 12:55:37 发布

Android流光岁月

最新推荐文章于 2018-07-04 12:55:37 发布

阅读量1.2k

点赞数

分类专栏：原创文章标签： viewpager 布局

本文链接：https://blog.csdn.net/qq_37332274/article/details/54799817

版权

原创专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.布局文件

Activity的文件布局

<?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.zking.learn.MainActivity">

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

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/learn_main_radiogroup">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第一页"
            android:drawableTop="@drawable/learn_select"
            android:id="@+id/learn_main_radiobutton1"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第二页"
            android:drawableTop="@drawable/learn_select2"
            android:id="@+id/learn_main_radiobutton2"/>

    </RadioGroup>
</LinearLayout>

第一个Fragment文件的布局

<?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_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/s1"/>
</LinearLayout>

第二个Fragment文件的布局

<?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_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/s2"/>
</LinearLayout>

2.在你的java包下面键个文件夹同时把图片放到drawable文件夹里面图片选择器的文件也放里面。

绑定第一个Fragment布局文件Java代码。

package com.zking.Fagment;

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;

import com.zking.learn.R;

/**
 * Created by ASUS on 2017-01-27.
 */

public class Fagment_01 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_01,null);

        return view;
    }
}

绑定第二个Fragment布局文件Java代码。

package com.zking.Fagment;

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;

import com.zking.learn.R;

/**
 * Created by ASUS on 2017-01-27.
 */

public class Fagment_02 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_02,null);
        return view;
    }
}

第一个图片选择器的代码。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/c1" android:state_checked="true"></item>
    <item android:drawable="@drawable/c2" android:state_checked="false"></item>

</selector>

第二个文图片选择器的代码。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/c3" android:state_checked="true"></item>
    <item android:drawable="@drawable/c4" android:state_checked="false"></item>

</selector>

Activity页面的Java代码

package com.zking.learn;

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.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.zking.Fagment.Fagment_01;
import com.zking.Fagment.Fagment_02;

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

public class MainActivity extends AppCompatActivity {
    //装Fragment文件的容器（一个List集合）
    private List<Fragment> myl=new ArrayList<>();
    private ViewPager learn_main_vp;
    private RadioGroup learn_main_radiogroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获得ViewPager的id并把它设成全局变量
        learn_main_vp = (ViewPager) findViewById(R.id.learn_main_vp);
        //获得RadioGroup的id并把它设成全局变量
        learn_main_radiogroup = (RadioGroup) findViewById(R.id.learn_main_radiogroup);
        //把Fragment一个个加进集合当中
        myl.add(new Fagment_01());
        myl.add(new Fagment_02());
        //通过适配器把myl集合中的内容放进ViewPager里面
        learn_main_vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
        //设置刚进页面就选中第一个按钮并把图片选择器设置我true状态
        RadioButton radioButton= (RadioButton) learn_main_radiogroup.getChildAt(0);
        radioButton.setChecked(true);

        //给ViewPager设置监听事件
        learn_main_vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //当滑动图片时获取图片下标，然后通过图片下标来设置选中那个按钮
            @Override
            public void onPageSelected(int position) {
                RadioButton radioButton= (RadioButton) learn_main_radiogroup.getChildAt(position);
                radioButton.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //给按钮设置监听事件
        learn_main_radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //获取点击的是那个按钮
                int id=group.getCheckedRadioButtonId();
                switch (id){
                    //当选择的是第一个按钮就把图片设置为第一张
                    case R.id.learn_main_radiobutton1:
                        learn_main_vp.setCurrentItem(0);
                        break;
                    case R.id.learn_main_radiobutton2:
                        learn_main_vp.setCurrentItem(1);
                        break;
                }
            }
        });
    }

    //ViewPager的适配器
    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

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