Android ViewPager+Fragment(碎片)实现页面滑动

来源：互联网发布：qq飞车暗夜幽灵数据编辑：程序博客网时间：2024/05/16 05:57

效果图：

既可以实现滑动使单选按钮改变颜色，也可以通过点击单选按钮实现页面跳转，类似于微信

xml代码(布局文件)：

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:orientation="vertical"    android:layout_height="match_parent" tools:context="com.example.test0615.MainActivity">    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:id="@+id/vp_main_viewpager"        ></android.support.v4.view.ViewPager>    <RadioGroup        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:id="@+id/rg_main_radio"        >        <!--layout_weight属性：设置权重，每个单选按钮占屏幕宽度的四分之一；button属性：设置单选按钮不可见-->        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:text="微信"            android:id="@+id/rb_mian_one"            android:layout_weight="1"            android:background="@drawable/selector_radiobutton"            />        <!--background属性：设置单选按钮的选择器-->        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:text="通讯录"            android:id="@+id/rb_mian_two"            android:layout_weight="1"            android:background="@drawable/selector_radiobutton"            />        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:text="发现"            android:id="@+id/rb_mian_three"            android:layout_weight="1"            android:background="@drawable/selector_radiobutton"            />        <RadioButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:button="@null"            android:text="我"            android:id="@+id/rb_mian_four"            android:layout_weight="1"            android:background="@drawable/selector_radiobutton"            />    </RadioGroup></LinearLayout>

选择器代码:

selcctor_radiobutton:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true" android:drawable="@color/colorPrimary"></item>//单选按钮被选中，背景颜色为蓝色    <item android:state_checked="false" android:drawable="@color/colorAccent"></item>//为被选中，背景颜色为粉色</selector>

页面代码：

fragment_weixin.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">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="这是微信页面"        android:textSize="40sp"        /></LinearLayout>

fragment_contacts.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">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="这是通讯录页面"        android:textSize="40sp"        /></LinearLayout>

同样的页面，我们在写两个，在这里我就不再写了

接下来我们就是将页面转为Fragment了

WeiXinFragment.java

package com.example.test0615;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;/** * Created by Administrator on 2017/6/15 0015. */public class WeiXinFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_weixin,null);//方法的第一个参数为我们需要转化的页面    }}

ContactsFragment.java

package com.example.test0615;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;/** * Created by Administrator on 2017/6/15 0015. */public class ContactsFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_contacts,null);    }}

再建两个Java页面，将剩下的两个个页面转为Fragment

接下来就是代码的重中之重：

package com.example.test0615;import android.support.annotation.IdRes;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.RadioButton;import android.widget.RadioGroup;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private ViewPager vp_main_viewpager;    private RadioGroup rg_main_radio;    //定义一个用来放Fragment的集合    private List<Fragment> fragments=new ArrayList<>();    //用来放View的集合    private List<View> buttons;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        vp_main_viewpager = (ViewPager) findViewById(R.id.vp_main_viewpager);        rg_main_radio = (RadioGroup) findViewById(R.id.rg_main_radio);        WeiXinFragment weiXinFragment=new WeiXinFragment();        ContactsFragment contactsFragment=new ContactsFragment();        FindFragment findFragment=new FindFragment();        MyFragment myFragment=new MyFragment();                //将Fragment放入集合        fragments.add(weiXinFragment);        fragments.add(contactsFragment);        fragments.add(findFragment);        fragments.add(myFragment);        //设置适配器        vp_main_viewpager.setAdapter(new MyAdapter(getSupportFragmentManager()));        //得到单选组的所有单选按钮        buttons=rg_main_radio.getTouchables();        //给页面设置一个监听事件        vp_main_viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            //页面滑动事件            @Override            public void onPageSelected(int position) {                //根据页面的位置拿到每个页面对应的单选按钮                RadioButton radioButton= (RadioButton) buttons.get(position);                //将该单选按钮设置为选中状态                radioButton.setChecked(true);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });                //给单选组设置点击事件监听        rg_main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {                //如果当前单选按钮的ID为自己设置的ID                if(checkedId==R.id.rb_mian_one){                    //设置当前展示的页面                    vp_main_viewpager.setCurrentItem(0);                }else if(checkedId==R.id.rb_mian_two){                    vp_main_viewpager.setCurrentItem(1);                }else if(checkedId==R.id.rb_mian_three){                    vp_main_viewpager.setCurrentItem(2);                }else if(checkedId==R.id.rb_mian_four){                    vp_main_viewpager.setCurrentItem(3);                }            }        });    }    class MyAdapter extends FragmentPagerAdapter{        public MyAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return fragments.get(position);        }        @Override        public int getCount() {            return fragments.size();        }    }}

阅读全文

0 0