AS怎么用Fragment做一个微信界面

最新推荐文章于 2022-09-29 23:53:31 发布
最新推荐文章于 2022-09-29 23:53:31 发布
阅读量940 收藏 7
点赞数 1
分类专栏： Fragment 文章标签： android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43568314/article/details/104823111
版权

先上效果图
在这里插入图片描述
我的目录文件
在这里插入图片描述
导入图片到drawable：
链接：https://pan.baidu.com/s/1vZRBVALF6hIlIDgMC2Pd3A
提取码：3m4k
下载好后把文件夹里的图片全部导入到res-drawable目录下

MainActivity.java代码：

package com.example.demo06;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Blank1Fragment f1;
    private Blank2Fragment f2;
    private Blank3Fragment f3;
    private Blank4Fragment f4;

    private LinearLayout foot1;
    private LinearLayout foot2;
    private LinearLayout foot3;
    private LinearLayout foot4;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

    @SuppressLint("WrongViewCast")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.mylayout);

        foot1 = (LinearLayout) findViewById(R.id.weixin);
        foot2 = (LinearLayout) findViewById(R.id.frd);
        foot3 = (LinearLayout) findViewById(R.id.contacts);
        foot4 = (LinearLayout) findViewById(R.id.settings);
        mImgWeixin = (ImageButton)findViewById(R.id.imageButton_weixin);
        mImgFrd = (ImageButton)findViewById(R.id.imageButton_frd);
        mImgAddress = (ImageButton)findViewById(R.id.imageButton_contacts);
        mImgSettings = (ImageButton)findViewById(R.id.imageButton_settings);

        foot1.setOnClickListener(this);
        foot2.setOnClickListener(this);
        foot3.setOnClickListener(this);
        foot4.setOnClickListener(this);

        initFragment1();
    }

    private void initFragment1(){
        //开启事务，fragment的控制是由事务来实现的
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        //方式（add），初始化fragment并添加到事务中，如果为null就new一个
        if(f1 == null){
           f1 = new Blank1Fragment();
            transaction.add(R.id.main_frame_layout,f1);
        }
        mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
        //隐藏所有fragment
        hideFragment(transaction);
        //显示需要显示的fragment
        transaction.show(f1);
        //提交事务
        transaction.commit();
    }
    private void initFragment2(){
        //开启事务，fragment的控制是由事务来实现的
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        //第一种方式（add），初始化fragment并添加到事务中，如果为null就new一个
        if(f2 == null){
            f2 = new Blank2Fragment();
            transaction.add(R.id.main_frame_layout, f2);
        }
        mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
        //隐藏所有fragment
        hideFragment(transaction);
        //显示需要显示的fragment
        transaction.show(f2);

        transaction.commit();
    }
    private void initFragment3(){
        //开启事务，fragment的控制是由事务来实现的
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        //第一种方式（add），初始化fragment并添加到事务中，如果为null就new一个
        if(f3 == null){
            f3 = new Blank3Fragment();
            transaction.add(R.id.main_frame_layout, f3);
        }
        mImgAddress.setImageResource(R.drawable.tab_address_pressed);
        //隐藏所有fragment
        hideFragment(transaction);
        //显示需要显示的fragment
        transaction.show(f3);
        //提交事务
        transaction.commit();
    }
    private void initFragment4(){
        //开启事务，fragment的控制是由事务来实现的
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        //第一种方式（add），初始化fragment并添加到事务中，如果为null就new一个
        if(f4 == null){
            f4 = new Blank4Fragment();
            transaction.add(R.id.main_frame_layout, f4);
        }
        mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
        //隐藏所有fragment
        hideFragment(transaction);
        //显示需要显示的fragment
        transaction.show(f4);
        //提交事务
        transaction.commit();
    }
    //隐藏所有的fragment
    private void hideFragment(FragmentTransaction transaction){
        if(f1 != null){
            transaction.hide(f1);
        }
        if(f2 != null){
            transaction.hide(f2);
        }
        if(f3 != null){
            transaction.hide(f3);
        }
        if(f4 != null){
            transaction.hide(f4);
        }
    }

    @Override
    public void onClick(View v) {
        resetimg();
        if(v == foot1){
            initFragment1();
        }else if(v == foot2){
            initFragment2();
        }else if(v == foot3){
            initFragment3();
        }else if(v == foot4){
            initFragment4();
        }
    }

    public void resetimg(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAddress.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }
}

mylayout.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical">

    <include
        layout="@layout/top" />

    <FrameLayout
        android:id="@+id/main_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        tools:ignore="InvalidId">

    </FrameLayout>

    <include
        layout="@layout/bottom"/>

</LinearLayout>

top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:layout_gravity="center_horizontal"
    android:background="#dddddd"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"

        android:background="#dddddd"
        android:text="WeChat"
        android:textSize="30sp" />
</LinearLayout>

bottom.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:id="@+id/bottom"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@drawable/bottom_bar"
    android:baselineAligned="false"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton_weixin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="#000000"
            android:clickable="false"
            app:srcCompat="@drawable/tab_weixin_pressed"
            android:contentDescription="TODO" />

        <TextView
            android:id="@+id/textView_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:text="微信"
            android:background="#000000"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp"
            android:visibility="visible"
            tools:visibility="visible" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton_frd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="@string/todo"
            app:srcCompat="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:clickable="false"
            android:background="#000000"
            android:text="朋友"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/contacts"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton_contacts"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="TODO"
            app:srcCompat="@drawable/tab_address_normal" />

        <TextView
            android:id="@+id/textView_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:clickable="false"
            android:text="通讯录"
            android:background="#000000"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/settings"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton_settings"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="TODO"
            app:srcCompat="@drawable/tab_settings_normal" />

        <TextView
            android:id="@+id/textView_4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:clickable="false"
            android:text="设置"
            android:background="#000000"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

</LinearLayout>

Blank1Fragment.java

package com.example.demo06;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import static com.example.demo06.R.id.textView1;

public class Blank1Fragment extends Fragment {

    public Blank1Fragment(){

    }

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

fragment_blank1.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frag1"
    android:layout_width="match_parent"

    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".Blank1Fragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="这是我的微信"
        android:textSize="100px" />

</FrameLayout>

Blank2Fragment.java,Blank3Fragment.java,Blank4Fragment.java代码跟Blank2Fragment.java一样
fragment_blank2.xml,fragment_blank3.xml,fragment_blank4.xml代码跟fragment_blank2.xml一样

ok，完成了！

附上整个项目代码地址：https://gitee.com/zhangjianhui1010/as_wechat_interface

TCL程序猿
关注
专栏目录
Android—— Fragment使用浅析（一）
zhewen的博客
05-14 621
1. 基本概述 Fragment是一种可以嵌入在活动中的UI片段，能够让程序更加合理和充分地利用大屏幕的空间，出现的初衷是为了适应大屏幕的平板电脑，可以将其看成一个小型Activity，又称作Activity片段。 使用Fragment可以把屏幕划分成几块，然后进行分组，进行一个模块化管理。Fragment不能够单独使用，需要嵌套在Activity中使用，其生命周期也受到宿主Activity的生...
AS 类微信界面设计
qq_52343193的博客
10-07 536
成果： 界面设计： 界面布局方面主要由顶部的top和下面的bottom和中间的main组成。 bottom： bottom里面是一个大的LinearLayout里面包含四个小的LinearLayout，每个LinearLayout里面放一个图片imageview和一个textview，分别对应着聊天，看点，联系人和设置四个的图标和文本。 每个设置下颜色，大小，位置等等。 <?xml version="1.0" encoding="utf-8"?> <LinearLa...
AS中类微信界面设计
m0_45858714的博客
10-09 278
首先编写xml文件 分析要做一个类似微信的界面，由三部分组成，上面的顶部文件，中间部分的文件和底部的文件 1.顶部文件的编写 创造一个名为top的XML文件 写入代码
AS 微信界面
qq_45966320的博客
10-09 529
一.作业要求 实现APP门户框架设计，至少包含四个tab页，能实现top页之间的点击切换。 二.分析与实现 1.分析 我们需要设计一个类微信的界面，关键还是在于UI设计。微信界面的组成大致可以分为三部分： 底部显示内容，顶部标题显示，以及中间的内容，并且底部需要可以点击交互。 底部的四个界面相互独立，互不干扰，即切换界面的效果需要使用fragment实现。 三、实现过程 bottom控件实现界面转换 顶部text控件显示WeChat 源码仓库：https://github.com/M-LI-A/LI
使用fragment实现仿微信界面
12-15
使用Fragment实现仿微信界面的实现
使用AS自制简易微信界面
qq_59349326的博客
09-29 1987
使用linearlayout布局，设置orientation为垂直，自上而下依次是头部标签，中间信息栏，底部，使用进行引用layout目录下已经写好的界面，其中中间信息栏因为要绑定片段，使用framelayout布局。此文件夹用于存放imagebutton控件对应的图片，没带有press的是未点击状态下按钮的图片，带有press的是点击后按钮的图片。三个部分：头部标签栏，中间信息栏，底部四个按钮，并且每按一个按钮信息栏就会弹出对应的样式。
Fragment+ViewPager组件(高仿微信界面)
03-18
在标题“Fragment+ViewPager组件(高仿微信界面)”中，我们关注的是如何使用这两个组件来构建一个类似于微信的应用界面。微信的主界面通常包含聊天列表、发现、我等几个主要部分，每个部分都是一个独立的页面，可以...
Android仿照微信界面开发
11-22
在Android应用开发中，"Android仿照微信界面开发"是一个常见的练习项目，旨在提升开发者对UI设计和用户体验的理解。微信是中国最流行的社交应用之一，其界面简洁、功能丰富，是学习Android界面设计的一个很好的参考...
ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）
10-28
AS写的ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）demo blog:http://blog.csdn.net/shenyuanqing/article/details/49464767
通过fragment模拟一个微信主页面
weixin_34416649的博客
01-11 268
通过fragment模拟一个微信主页面 在布局中声明UI <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.c...
Android 实现微信界面
10-24
程序总体使用TabHost实现微信界面的四个模块，在每一个tab选项布局里使用自定义的ListView，添加ImageView和TextView控件，显示通讯录列表信息。自定义ListView的列表项布局文件,将每个ListView要显示的内容构成一个由Map组成的List集合，List集合中的每一项，与ListView中的每一项相对应。创建SimpleAdapter对象,并将之与数据源、ListView列表项布局文件等进行关联。
Fragment模仿微信
12-16
Fragment 模仿微信 经典 完美
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
12-27
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
FragmentManager+Fragment实现微信界面布局
12-05
FragmentManager+Fragment实现微信界面布局
用Fragment实现类似微信效果
笑语轻柔
12-24 2954
一：实现类似微信效果 点击手机底部的标签时 切换相对应的内容界面。实现效果图： 二：代码结构： 三：实现 思路： 1、需要为每个标签设置相对应的fragment界面 编写相应的逻辑代码         2、点击标签时切花相对应的fragment界面 代码： MainActivity.java package com.example.fragmentchang
AS实现微信布局切换
Waysoning的博客
03-21 546
（一）MyWeChat项目效果展示项目环境项目步骤开始前编写所有的layout文件编写所有的Java文件创建Fragment文件写MainActivity里的代码结语 项目效果展示 实现微信的底部按钮切换 项目环境 AS3.5.2 API 21:Android 5.0 项目步骤 开始前 将模式改为非兼容 extends Activity 消除App左上角的title import a...
AndroidStudio简单微信界面
qq_40587941的博客
03-20 2206
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
学习笔记| AS入门（六） 碎片Fragment
minmin的博客
08-29 2636
安卓自3.0开始引入Fragment的概念，主要是为了能在不同分辩率屏幕上进行更为动态和灵活的UI设计，让程序更加合理和充分利用大屏幕空间。本篇将学习Fragment以下几个知识点： Fragment概要 Fragment生命周期 加载Fragment方法 静态加载 动态加载 Fragment与Activity之间通信
Fragment实例之微信界面
Codezwc
05-04 911
今天我们来看看微信界面是怎么实现的。 首先，我们先在主布局XML中实现三部分 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tool
使用ViewPager+Fragment构建微信样式界面教程
为了实现微信界面，你需要为每个功能（如“聊天”、“发现”、“我”等）创建一个单独的Fragment类。每个Fragment负责其对应的视图和逻辑。 **界面布局** 界面布局通常分为三部分：顶部标题栏、ViewPager主体和底部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值