Android仿微信底部导航

最新推荐文章于 2024-08-20 15:14:30 发布
最新推荐文章于 2024-08-20 15:14:30 发布
阅读量388 收藏 1
点赞数 1
分类专栏： android项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pengruiyu1/article/details/77833326
版权 

一丶现在很多项目都用到了仿微信底部导航，以前也用过，今天就作一个笔记，记录下来这个Demo。

1.先上效果图。

                                          


2.主页Activity.

public class MainActivity extends BaseActivity implements View.OnClickListener {

    //  4个 LinearLayout
    @InjectView(R.id.ll_btn1)
    LinearLayout linearLayout1;
    @InjectView(R.id.ll_btn2)
    LinearLayout linearLayout2;
    @InjectView(R.id.ll_btn3)
    LinearLayout linearLayout3;
    @InjectView(R.id.ll_btn4)
    LinearLayout linearLayout4;

    //  4个textView
    @InjectView(R.id.id_btn1_text)
    TextView id_btn1_text;

    @InjectView(R.id.id_btn2_text)
    TextView id_btn2_text;

    @InjectView(R.id.id_btn3_text)
    TextView id_btn3_text;

    @InjectView(R.id.id_btn4_text)
    TextView id_btn4_text;

    //    4个ImageView
    @InjectView(R.id.id_btn1_image)
    ImageView id_btn1_image;

    @InjectView(R.id.id_btn2_image)
    ImageView id_btn2_image;

    @InjectView(R.id.id_btn3_image)
    ImageView id_btn3_image;

    @InjectView(R.id.id_btn4_image)
    ImageView id_btn4_image;

    private FragmentTransaction transaction;
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private Fragment4 fragment4;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

//        初始化显示首页
        initFragment(0);
    }

    @Override
    public void initEvent() {
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }

    @Override
    public void setLayout() {
        super.setLayout();
        setContentView(R.layout.activity_main);
    }

    @Override
    public void onClick(View v) {
        // 在每次点击后将所有的底部按钮(ImageView,TextView)颜色改为灰色，然后根据点击着色
        restartBotton();
        switch (v.getId()) {

            case R.id.ll_btn1:

                id_btn1_image.setImageResource(R.drawable.ic_mutual_chat_click);
                id_btn1_text.setTextColor(context.getResources().getColor(R.color.orange));
                initFragment(0);
                break;
            case R.id.ll_btn2:

                id_btn2_image.setImageResource(R.drawable.ic_bottom2_click);
                id_btn2_text.setTextColor(context.getResources().getColor(R.color.orange));
                initFragment(1);
                break;
            case R.id.ll_btn3:

                id_btn3_image.setImageResource(R.drawable.ic_bottom1_click);
                id_btn3_text.setTextColor(context.getResources().getColor(R.color.orange));
                initFragment(2);
                break;
            case R.id.ll_btn4:

                id_btn4_image.setImageResource(R.drawable.ic_bottom4_click);
                id_btn4_text.setTextColor(context.getResources().getColor(R.color.orange));

                initFragment(3);
                break;

        }
    }


    private void initFragment(int index) {
        // 由于是引用了V4包下的Fragment，所以这里的管理器要用getSupportFragmentManager获取
        FragmentManager fragmentManager = getSupportFragmentManager();
        // 开启事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // 隐藏所有Fragment
        hideFragment(transaction);
        switch (index) {
            case 0:
                if (fragment1 == null) {
                    fragment1 = new Fragment1();
                    transaction.add(R.id.fl_content, fragment1);
                } else {
                    transaction.show(fragment1);
                }
                break;
            case 1:
                if (fragment2 == null) {
                    fragment2 = new Fragment2();
                    transaction.add(R.id.fl_content, fragment2);
                } else {
                    transaction.show(fragment2);
                }
                break;
            case 2:
                if (fragment3 == null) {
                    fragment3 = new Fragment3();
                    transaction.add(R.id.fl_content, fragment3);
                } else {
                    transaction.show(fragment3);
                }

                break;
            case 3:
                if (fragment4 == null) {
                    fragment4 = new Fragment4();
                    transaction.add(R.id.fl_content, fragment4);
                } else {
                    transaction.show(fragment4);
                }

                break;

            default:
                break;
        }

        // 提交事务
        transaction.commit();

    }

    //隐藏Fragment
    private void hideFragment(FragmentTransaction transaction) {
        if (fragment1 != null) {
            transaction.hide(fragment1);
        }
        if (fragment2 != null) {
            transaction.hide(fragment2);
        }
        if (fragment3 != null) {
            transaction.hide(fragment3);
        }
        if (fragment4 != null) {
            transaction.hide(fragment4);
        }
    }

    
    private void restartBotton() {
        // ImageView置为灰色
        id_btn1_image.setImageResource(R.drawable.ic_mutual_chat_normal);
        id_btn2_image.setImageResource(R.drawable.ic_bottom2_default);
        id_btn3_image.setImageResource(R.drawable.ic_bottom1_default);
        id_btn4_image.setImageResource(R.drawable.ic_bottom4_default);

        // TextView置为灰色
        id_btn1_text.setTextColor(context.getResources().getColor(R.color.color_666));
        id_btn2_text.setTextColor(context.getResources().getColor(R.color.color_666));
        id_btn3_text.setTextColor(context.getResources().getColor(R.color.color_666));
        id_btn4_text.setTextColor(context.getResources().getColor(R.color.color_666));
    }


}

2. 
activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <FrameLayout
       android:id="@+id/fl_content"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>


    <include
        android:id="@+id/id_include"
        layout="@layout/layout_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
</RelativeLayout>



3.
layout_menu.xml



<?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="wrap_content"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dip"
        android:src="#DBDBDB" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:src="#ffffff"
        android:orientation="horizontal"
        android:padding="4dp">

        <!-- 首页-->
        <LinearLayout
            android:id="@+id/ll_btn1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/id_btn1_image"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_gravity="center"
                android:src="@drawable/ic_mutual_chat_click" />

            <TextView
                android:id="@+id/id_btn1_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="首页"
                android:focusable="true"
                android:textColor="#666"
                android:textSize="12sp" />
        </LinearLayout>

        <!-- 交管业务-->
        <LinearLayout
            android:id="@+id/ll_btn2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="30dp"
                android:layout_height="22dp"
                android:layout_gravity="center"
                android:gravity="center">

                <ImageView
                    android:id="@+id/id_btn2_image"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_bottom2_default" />

                <TextView
                    android:id="@+id/id_btn2_text_notify"
                    android:layout_width="8dp"
                    android:layout_height="8dp"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginLeft="3dp"
                    android:src="@drawable/msgboder"
                    android:gravity="center"
                    android:textColor="#fff"
                    android:textSize="13sp"
                    android:visibility="gone" />
            </RelativeLayout>

            <TextView

                android:id="@+id/id_btn2_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="交管业务"
                android:textColor="#666"
                android:textSize="12sp" />

        </LinearLayout>

        <!-- 发现-->
        <LinearLayout
            android:id="@+id/ll_btn3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/id_btn3_image"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_gravity="center"
                android:src="@drawable/ic_bottom1_default" />

            <TextView

                android:id="@+id/id_btn3_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="发现"
                android:textColor="#666"
                android:textSize="12sp" />
        </LinearLayout>

        <!--我的-->

        <LinearLayout
            android:id="@+id/ll_btn4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="30dp"
                android:layout_height="22dp"
                android:layout_gravity="center"
                android:gravity="center">

                <ImageView
                    android:id="@+id/id_btn4_image"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_bottom4_default" />

                <TextView
                    android:id="@+id/id_btn4_text_notify"
                    android:layout_width="8dp"
                    android:layout_height="8dp"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:src="@drawable/msgboder"
                    android:gravity="center"
                    android:textColor="#fff"
                    android:textSize="13sp"
                    android:visibility="gone" />
            </RelativeLayout>

            <TextView
                android:id="@+id/id_btn4_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:text="我的"
                android:textColor="#666"
                android:textSize="12sp" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

4.BaseFragment

public class BaseFragment extends Fragment {

    private View fatherView;
    private LinearLayout ll_basefragment_father;
    private TextView textViewTitle;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        fatherView = inflater.inflate(R.layout.base_fragment_title, container,
                false);

        textViewTitle = (TextView) fatherView.findViewById(R.id.tv_basefragment_title);
        initView();
        return fatherView;
    }

    public void initView() {
    }

    public View inflater(LayoutInflater inflater, int fragment,
                         ViewGroup container, boolean attachToRoot) {
//        添加的布局 父控件
        ll_basefragment_father = (LinearLayout) fatherView.findViewById(R.id.ll_basefragment_father);
        ll_basefragment_father.addView(inflater.inflate(fragment, container, false));

        init();

        return fatherView;
    }

    public void setTitle(String str){
        textViewTitle.setText(str);
    }

    public void init() {

    }
}

5.Fragment1,Fragment2,Fragment3,Fragment4，都一样只是标题不一样 

public class Fragment1 extends BaseFragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return super.onCreateView(inflater, container, savedInstanceState);
    }
    @Override
    public void initView() {
        setTitle("首页");
    }
}



pengruiyu1
关注
专栏目录
Android进阶：手把手教你实现高仿微信底部导航栏动画，一份字节跳动面试官给你的Android技术面试指南
m0_66264324的博客
01-23 1087
android:layout_height=“40dp” android:gravity=“center_horizontal” android:orientation=“vertical”> <FrameLayout android:layout_width=“wrap_content” android:layout_height=“0dp” android:layout_weight=“1”> <ImageView android:id="@+id/tab_image" andr
Android UI—仿微信底部导航栏布局，Android学习笔记在互联网上火了
flutter001的博客
01-03 1340
android:text=“我” android:textColor="@color/tab_selector_tv_color" /> 看下新建的布局和资源文件： 其中tab_selector_tv_color.xml主要是用于控制切换的时候显示下面字体的颜色: <?xml version=``"1.0" encoding=``"utf-8"``?> <selector xmlns:android=``"http://schemas.android.com/apk/res/an
Android实现仿微信底部导航栏
09-16
使用ViewPager+RadioGroup实现仿微信底部导航栏,注释很全,了解更多请参考：http://www.cnblogs.com/Fill/p/7530655.html
免费仿微信聊天工具盒子IM
最新发布
mopmgerg54mo的博客
08-20 986
盒子IM是一个仿微信实现的网页版聊天软件，不依赖任何第三方收费组件。后端采用springboot+netty实现，web端使用vue，移动端使用uniapp，支持私聊、群聊、离线消息、发送图片、文件、语音、emoji表情、视频聊天等功能。开源地址：盒子IM: 盒子IM是一个仿微信的聊天工具。后端采用springboot+netty实现，web端使用vue，移动端使用uniapp，支持私聊、群聊、离线消息、发送图片、文件、语音、emoji表情、视频聊天等功能。
仿微信底部导航
12-24
仿微信的底部导航菜单，tab方式实现，感觉还可以的，试试看
Android仿微信底部导航栏,Viewpager动效+仿微信底部导航栏
weixin_30995967的博客
05-26 223
Viewpager动效+仿微信底部导航栏简介：本文内容适用于 想要编写 首次进入项目的欢迎引导页面、底部导航栏、以及轮播图添加动效。主要代码提示：估值器 - ArgbEvaluator(针对Color属性)设置控件属性 ViewCompat.setAlpha(控件, float类型，百分比); (渐变)viewPager.setPageTransformer(true ,PageTransform...
Android仿微信底部导航栏.zip
03-23
这个"Android仿微信底部导航栏.zip"压缩包显然包含了实现这一功能的源代码，适用于那些希望在自己的Android应用中复现类似微信底部导航栏效果的开发者。以下是基于这个项目可能涉及的一些关键知识点： 1. **Bottom...
Android仿微信页面底部导航效果代码实现
09-01
在Android应用开发中，创建一个类似微信的底部导航栏效果是一项常见的需求，它能帮助用户在多个主要功能间轻松切换。下面将详细讲解如何通过代码实现这个效果。 首先，我们需要了解基本的架构。在这个示例中，`...
仿微信底部导航栏
04-21
在本文中，我们将探讨如何创建和封装一个仿微信底部导航栏，并通过一个工具类实现界面切换。 首先，我们要理解微信底部导航栏的核心功能：响应用户的点击事件，更新选中状态，并相应地切换显示的内容。在Android...
Android仿微信之界面导航篇（1）
01-04
废话不多说，下面就开始说一下如何实现微信的第一次启动程序的用户导航，ViewPager相信大家都不陌生了，是google放出的一个安卓低版本的兼容包android-support-v4.jar，里面有很多类我们可以去使用。那这个导航就是...
android微信底部导航,Android Fragment实现微信底部导航
weixin_39946029的博客
05-26 118
packagecom.example.administrator.test57wechat;importandroid.support.v4.app.FragmentManager;importandroid.support.v4.app.FragmentTransaction;importandroid.support.v7.app.AppCompatActivity;importandroid...
仿微信界面
11-22
这是一个仿照微信的界面，可以左右滑动切换界面，利用Viewpager实现的。
仿微信界面实现
04-27
仿微信界面实现，下面的字体和图表的颜色都会随着ViewPager的滑动具有渐变的效果具有渐变的效果，点击菜单<发起群聊>。会跳到图片截取界面，也是仿微信的效果（根据自己的喜好稍稍有点调整）；
仿微信聊天界面 底部弹出菜单的实现
12-26
该代码主要实现功能类似于微信聊天界面中，点击底部+号图标，弹出文件，红包，地理位置等隐藏布局控件。详细实现效果参见博客：http://blog.csdn.net/huangzhiyuan111/article/details/50409900
Android - 实现微信的底部导航功能（第五次作业）
WeiComp
10-28 521
利用fragment和ViewPager实现类似微信的底部导航功能。上传模拟器运行截图及代码截图。
Android 实现类似微信页面底部导航效果
时代新人的博客
11-09 2539
Android 实现类似微信页面底部导航效果 参考的时候需要修改的地方做一下更改，里面有一些多余的代码没有删除。 .java里面的主要代码 public class MainActivity extends BaseActivity implements TabChangeListener { private Fragment[] fragments; private FragZaiXi
Android仿微信底部渐变Tab实现详解
在实际项目中，可以将这个自定义View添加到`TabHost`或者底部导航栏（BottomNavigationView）中，通过设置不同的`ShadeView`实例并关联相应的数据，来模拟微信底部Tab栏的功能。通过这种方法，开发者能够轻松地为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值