Fragment+ViewPager 实现仿微信页面（不管内容）_使用frgment和viewpager完成防微信教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Calabash_Brothers/article/details/73287679

本文介绍了如何结合Fragment和ViewPager实现类似微信应用的页面切换效果，包括所需的效果图展示和关键代码片段，涉及到UI设计及Android组件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现代码：

外形资源：

选择器：

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

背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#c4f4ee"></solid>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#fcfefc"></solid>
</shape>

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:layout_height="match_parent" tools:context="zking.com.myapplication.MainActivity"
    android:orientation="vertical"
    >

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

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rg_main_rg"
        >
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="微信"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/icon_user"
            android:gravity="center"
            android:background="@drawable/et_select"
            android:id="@+id/rb_main_rb1"
            />
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:button="@null"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_user"
            android:gravity="center"
            android:background="@drawable/et_select"
            android:id="@+id/rb_main_rb2"
            />
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="发现"
            android:button="@null"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_user"
            android:gravity="center"
            android:background="@drawable/et_select"
            android:id="@+id/rb_main_rb3"
            />
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="我的"
            android:button="@null"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_user"
            android:gravity="center"
            android:background="@drawable/et_select"
            android:id="@+id/rb_main_rb4"
            />

    </RadioGroup>

</LinearLayout>

碎片布局：

<?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="30sp"
        android:background="#660000ff"
        />

</LinearLayout>

<?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="30sp"
        android:background="#6600ff00"
        />

</LinearLayout>

<?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="30sp"
        android:background="#6600ffff"
        />

</LinearLayout>

<?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="30sp"
        android:background="#66ff0000"
        />

</LinearLayout>

java：

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);
    }
}
public class FindFragment extends Fragment{

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

public class MyFragment extends Fragment{

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

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);
    }
}

public class MainActivity extends AppCompatActivity {

    private ViewPager vp_main_page;
    private List<Fragment> fragments=new ArrayList<>();
    private int[] id={R.id.rb_main_rb1,R.id.rb_main_rb2,R.id.rb_main_rb3,R.id.rb_main_rb4};
    private RadioGroup rg_main_rg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获取控件：ViewPage
        vp_main_page = (ViewPager) findViewById(R.id.vp_main_page);
        ContactsFragment contactsFragment=new ContactsFragment();
        FindFragment findFragment=new FindFragment();
        MyFragment myFragment=new MyFragment();
        WeiXinFragment weiXinFragment=new WeiXinFragment();
        fragments.add(weiXinFragment);
        fragments.add(contactsFragment);
        fragments.add(findFragment);
        fragments.add(myFragment);
        vp_main_page.setAdapter(new MyAdpadter(getSupportFragmentManager()));
        //获取单选组
        rg_main_rg = (RadioGroup) findViewById(R.id.rg_main_rg);
        rg_main_rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
//                Toast.makeText(MainActivity.this, ""+group.getCheckedRadioButtonId(), Toast.LENGTH_SHORT).show();
//                vp_main_page.setCurrentItem(checkedId-1);
                if (checkedId==id[0]){
                    vp_main_page.setCurrentItem(0);
                }else if (checkedId==id[1]){
                    vp_main_page.setCurrentItem(1);
                }else if (checkedId==id[2]){
                    vp_main_page.setCurrentItem(2);
                }else if (checkedId==id[3]){
                    vp_main_page.setCurrentItem(3);
                }
            }
        });
        rg_main_rg.check(id[0]);
        vp_main_page.setCurrentItem(0);
        vp_main_page.getCurrentItem();

       //ViewPager控件的滑动监听
        vp_main_page.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {//此方法是在状态改变的时候调用
                //state==0  代表什么都没做
                //state==1  代表正在滑动
                //state==2  代表滑动完毕
                if (state==2){
                    rg_main_rg.check(id[vp_main_page.getCurrentItem()]);
                }
            }
        });
    }

    class MyAdpadter extends FragmentPagerAdapter{
        public MyAdpadter(FragmentManager fm) {
            super(fm);
        }

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

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

}