Fragment实现仿微信页面切换

最新推荐文章于 2024-05-08 02:06:36 发布

Wantfly9951

最新推荐文章于 2024-05-08 02:06:36 发布

阅读量1.8k

点赞数 5

分类专栏： JAVA Tips 文章标签： android

本文链接：https://blog.csdn.net/Wantfly9951/article/details/105396472

版权

JAVA Tips 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

仿微信的页面切换的实现

实现如图1所示的微信切换页面，点击不同的按钮展示不同的fragment，主要的构思，就是建立三个fragment，作为三个按钮点击后的页面，然后利用hide（）和show（）方法，实现对fragment展示内容的切换
WeChatActivity java代码：

package com.example.fragmentapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioGroup;

public class WeChatActivity extends AppCompatActivity{
//首先绑定对应的组件并且初始化
    FrameLayout weChat;
    //考虑到三个按钮只有一个可以为选中状态的情况，选择用自定义单选框来实现
    RadioGroup options;
    //获得fragment管理类
    //注意这里用的Fragment FragmentManager FragmentTransaction 都是android.app下的，这个不可以选错，否则会报错
    FragmentManager fragmentManage;
    FragmentTransaction fragmentTransaction;
//新建对应的fragment对象
    FragmentChat fragmentChat;
    FragmentFind fragmentFind;
    FragmentMe fragmentMe;
    @Override
    //重写onCreate方法
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //绑定页面，初始化对应的组件
        setContentView(R.layout.activity_we_chat);
        weChat=findViewById(R.id.wechat_fragment);
        options=findViewById(R.id.options);

        fragmentChat=new FragmentChat();
        fragmentFind=new FragmentFind();
        fragmentMe=new FragmentMe();
//获得fragment管理类
        fragmentManage=getFragmentManager();
        //建立fragment类
        fragmentTransaction=fragmentManage.beginTransaction();
        //初始化中直接动态添加对应的三个fragment，这样可以减少资源的浪费
        //否则用replace的话，需要来回新建替换造成了资源的浪费，若在点击实践中用add更加不可行
        fragmentTransaction.add(R.id.wechat_fragment,fragmentChat);
        fragmentTransaction.add(R.id.wechat_fragment,fragmentFind);
        fragmentTransaction.add(R.id.wechat_fragment,fragmentMe);
        //设置初始状态只展示fragmentChat，将fragmentFind和fragmentMe隐藏
        fragmentTransaction.show(fragmentChat);
        fragmentTransaction.hide(fragmentFind);
        fragmentTransaction.hide(fragmentMe);
        //执行
        fragmentTransaction.commit();
        //初始状态下，chat_radio显示选中状态对应的效果
        options.check(R.id.chat_radio);



//          这种方法 浪费资源 上面的方法 其实是把东西都添加出来 然后选择展示和隐藏
//        fragmentManage=getFragmentManager();
//        fragmentTransaction=fragmentManage.beginTransaction();
//        fragmentTransaction.add(R.id.wechat_fragment,new FragmentChat());
//        fragmentTransaction.commit();
//        options.check(R.id.chat_radio);
//设置RadioGroup组件中的RadioButton的选中状态发生改变的响应事件
        options.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
            //赋值给fragmentTransaction一个新建的fragment
                fragmentTransaction=fragmentManage.beginTransaction();
                //根据选中状态按钮的的ID来进行分支
                switch (checkedId){
                //当chat_radio为选中状态时
                    case R.id.chat_radio:
                        //fragmentTransaction.replace(R.id.wechat_fragment,new FragmentChat());
					//判断fragmentChat是否为空，如果为空，则新建一个对象添加到Fragment中
                        if (fragmentChat==null){
                            fragmentChat=new FragmentChat();
                            fragmentTransaction.add(R.id.wechat_fragment,fragmentChat);
                        }
                        //设置fragmentChat显示，将fragmentFind和fragmentMe隐藏
                        fragmentTransaction.show(fragmentChat);
                        fragmentTransaction.hide(fragmentFind);
                        fragmentTransaction.hide(fragmentMe);
                        break;
                   //当find_radio为选中状态时
                    case R.id.find_radio:
                        //fragmentTransaction.replace(R.id.wechat_fragment,new FragmentFind());
                        if (fragmentFind==null){
                            fragmentFind= new FragmentFind();
                            fragmentTransaction.add(R.id.wechat_fragment,fragmentFind);
                        }
                        //设置fragmentFind显示，将fragmentChat和fragmentMe隐藏
                        fragmentTransaction.hide(fragmentChat);
                        fragmentTransaction.show(fragmentFind);
                        fragmentTransaction.hide(fragmentMe);
                        break;
                  //当me_radio为选中状态时
                    case  R.id.me_radio:
                        //fragmentTransaction.replace(R.id.wechat_fragment,new FragmentMe());
                        if (fragmentMe==null){
                            fragmentMe= new FragmentMe();
                            fragmentTransaction.add(R.id.wechat_fragment,fragmentMe);
                        }
                         //设置fragmentMe显示，将fragmentFind和fragmentChat隐藏
                        fragmentTransaction.hide(fragmentChat);
                        fragmentTransaction.hide(fragmentFind);
                        fragmentTransaction.show(fragmentMe);
                        break;
                }
                //分支判断完之后再commit（），省去在各个分支中加
                //commit的作用是提交事务，使得fragmentTransaction对象发生改变
                commit（）
                fragmentTransaction.commit();
            }
        });

    }

}

WeChatActivity 对应的xml页面布局代码代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <FrameLayout
        android:id="@+id/wechat_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9"/>
        <RadioGroup
            android:id="@+id/options"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ECE6E6"
            android:orientation="horizontal">
            <RadioButton
                android:id="@+id/chat_radio"
                style="@style/MyRadioButton"
                android:drawableTop="@drawable/chat_drawable"
                android:text="聊天"
                />
            <RadioButton
                android:id="@+id/find_radio"
                style="@style/MyRadioButton"
                android:drawableTop="@drawable/find_drawable"
                android:text="发现" />
            <RadioButton
                android:id="@+id/me_radio"
                style="@style/MyRadioButton"
                android:drawableTop="@drawable/me_drawable"
                android:text="我" />
        </RadioGroup>


</LinearLayout>

在这里，通过在drawable中创建drawable文件，利用选择器实现对于RadioButton的自定义，代码如下，另外俩个类似

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
//选中状态下 显示图片为find
    <item android:state_checked="true" android:drawable="@drawable/find"/>
//未选中状态下 显示图片为find
    <item android:state_checked="false" android:drawable="@drawable/unfind"/>
</selector>

另外同时需要对于字体进行不同状态下的颜色改变，这里需要在res中新建color资源文件
在这里插入图片描述
同样在color中建立color文件，利用选择器，控制文字在不同状态下显示不同颜色，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#817B7B" android:state_checked="false"/>
    <item android:color="#4EDD54" android:state_checked="true"/>
</selector>

按钮的自定义和文字的颜色改变文件编写好以后，在对应的组件里面设置就可以了

FragmentFind代码

package com.example.fragmentapplication;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;
//继承Fragment类
public class FragmentFind extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
    //绑定页面
        View view=inflater.inflate(R.layout.find_layout,null);
        //返回view页面
        return view;
    }
}

FragmentFind对应的XML页面代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:textSize="20dp"
        android:layout_height="wrap_content"
        android:text="发现"/>
</LinearLayout>

效果图
在这里插入图片描述

Wantfly9951

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
Fragment实现仿微信页面切换

仿微信的页面切换的实现实现如图1所示的微信切换页面，点击不同的按钮展示不同的fragment，主要的构思，就是建立三个fragment，作为三个按钮点击后的页面，然后利用hide（）和show（）方法，实现对fragment展示内容的切换WeChatActivity java代码：package com.example.fragmentapplication;import androidx...
复制链接

扫一扫