Android Fragment + ViewPager 实现类微信 底部导航栏 和 显示消息提醒

最新推荐文章于 2021-12-22 11:31:25 发布
原创 最新推荐文章于 2021-12-22 11:31:25 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Android应用中使用Fragment和ViewPager来实现类似微信的底部导航栏功能，并展示了TextView与图片的结合使用，以及布局和适配器的设置，以达到显示消息提醒的效果。

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

！学习自菜鸟教程-移动端-Android

图片如下

                  


一、底部导航栏实现

1、TextView 图片和文字的变换，在drawable 中新建文件

图片：tav_record_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/record_normal" android:state_selected="false"/>
    <item android:drawable="@drawable/record_pressed" android:state_selected="true"/>
</selector>
文字颜色：tab_text_color_selector.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_green" android:state_selected="true"/>
    <item android:color="@android:color/darker_gray" android:state_selected="false" />
</selector>

2、消息提醒的红色圆圈

添加一个textView，将属性Layout_marginLeft 设置为负值，则小圆圈会叠在其上面

 <RelativeLayout
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:gravity="center">
           <TextView
               android:id="@+id/tab_tv_record"
               android:layout_width="wrap_content"
               android:layout_height="match_parent"
               android:layout_marginBottom="5dp"
               android:text="记录"
               android:textColor="@drawable/tab_text_color_selector"
               android:textSize="16sp"
               android:gravity="center"
               android:drawableTop="@drawable/tab_record_selector"
               android:background="@drawable/tab_background_selector"/>
           <TextView
               android:id="@+id/tab_tv_num_record"
               android:layout_width="20dp"
               android:layout_height="20dp"
               android:gravity="center"
               android:background="@drawable/red_ring"
               android:layout_toRightOf="@id/tab_tv_record"
               android:layout_marginLeft="-16dp"
               android:textColor="@android:color/white"
               android:visibility="invisible"
               />
       </RelativeLayout>

二、Fragment的布局和实现：

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/frag_content">
    <TextView
        android:id="@+id/frag_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="啦啦啦阿拉啦"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        />

    <Button
        android:id="@+id/frag_btn_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/frag_tv"
        android:layout_marginTop="15dp"
        android:text="消息提醒"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/frag_btn_hide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/frag_btn_show"
        android:layout_marginTop="15dp"
        android:text="关闭"
        android:layout_centerInParent="true"/>
</RelativeLayout>
实现： 

public class RecordFragment extends Fragment implements OnClickListener {

    private String text = "";

    private TextView mTvTitle = null;

    public TextView mTvShow  = null;

    public Button mBtnShow = null;

    public Button mBtnHide = null;

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

        mTvTitle = (TextView)getActivity().findViewById(R.id.tv_title);
        mTvShow = (TextView)contentView.findViewById(R.id.frag_tv);
        mBtnShow = (Button)contentView.findViewById(R.id.frag_btn_show);
        mBtnHide = (Button)contentView.findViewById(R.id.frag_btn_hide);

        mBtnShow.setText("record show");
        mBtnHide.setText("record hide");

        mBtnShow.setOnClickListener(this);
        mBtnHide.setOnClickListener(this);

        parserArgument();

        return contentView;
    }



    private void parserArgument(){
        text = getArguments().getString("text");
        mTvShow.setText(text);

        String title = getArguments().getString("title");<span style="white-space:pre">	</span>//fragment中获取activity创建时传递的参数
        Log.i("onResume--->",title);
        mTvTitle.setText(title);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.frag_btn_show:
                Log.i("frag_btn_show","click");
                TextView num = (TextView) getActivity().findViewById(R.id.tab_tv_num_record);<span style="white-space:pre">	</span>//fragment中获取activity中的组件，设置消息提醒小圆圈
                num.setText("11");
                num.setVisibility(View.VISIBLE);
                break;
            case R.id.frag_btn_hide:
                Log.i("frag_btn_hide","click");
                TextView num1 = (TextView) getActivity().findViewById(R.id.tab_tv_num_record);
                num1.setVisibility(View.INVISIBLE);
                break;
            default:
                break;
        }
    }
}


三、ViewPager的运用

1、ViewPager需要适配器 FragmentPagerAdapter

public class FragmentAdapter extends FragmentPagerAdapter {

   public final static int FRAGMENT_COUNT = 2;

    private RecordFragment recordFragment = null;
    private UserFragment userFragment = null;

    public FragmentAdapter(FragmentManager manager){
        super(manager);

        recordFragment = new RecordFragment();
        Bundle bundle = new Bundle();
        bundle.putString("text","这是 record Fragment");
        bundle.putString("title","record");
        recordFragment.setArguments(bundle);

        userFragment = new UserFragment();
        Bundle bundle1 = new Bundle();
        bundle1.putString("text","这是 user Fragment");
        bundle1.putString("title","user");
        userFragment.setArguments(bundle1);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position){
            case MainActivity.FRAGMENT_RECORD:
                fragment = recordFragment;
                break;
            case MainActivity.FRAGMENT_USER:
                fragment = userFragment;
                break;
            default:
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return FRAGMENT_COUNT;
    }
}

2、ViewPager 设置滑动监听 ViewPager.OnPagerChangeListener 

  @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if (state == 2){
            switch (viewPager.getCurrentItem()){
                case FRAGMENT_RECORD:
                    setNotSelected();
                    mTvRecord.setSelected(true);
                    break;
                case FRAGMENT_USER:
                    setNotSelected();
                    mTvUser.setSelected(true);
                    break;
                default:
                    break;
            }
        }


    }


四、主界面的布局和实现

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:textSize="20sp"/>
    <View
        android:id="@+id/line_gray"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/darker_gray"
        android:layout_below="@id/tv_title"/>

   <LinearLayout
       android:id="@+id/tab_layout"
       android:layout_width="match_parent"
       android:layout_height="70dp"
       android:orientation="horizontal"
       android:layout_alignParentBottom="true"
      >

       <RelativeLayout
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:gravity="center">
           <TextView
               android:id="@+id/tab_tv_record"
               android:layout_width="wrap_content"
               android:layout_height="match_parent"
               android:layout_marginBottom="5dp"
               android:text="记录"
               android:textColor="@drawable/tab_text_color_selector"
               android:textSize="16sp"
               android:gravity="center"
               android:drawableTop="@drawable/tab_record_selector"
               android:background="@drawable/tab_background_selector"/>
           <TextView
               android:id="@+id/tab_tv_num_record"
               android:layout_width="20dp"
               android:layout_height="20dp"
               android:gravity="center"
               android:background="@drawable/red_ring"
               android:layout_toRightOf="@id/tab_tv_record"
               android:layout_marginLeft="-16dp"
               android:textColor="@android:color/white"
               android:visibility="invisible"
               />
       </RelativeLayout>


       <RelativeLayout
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:gravity="center">
           <TextView
               android:id="@+id/tab_tv_user"
               android:layout_width="wrap_content"
               android:layout_height="match_parent"
               android:layout_marginBottom="5dp"
               android:text="用户"
               android:textColor="@drawable/tab_text_color_selector"
               android:textSize="16sp"
               android:gravity="center"
               android:drawableTop="@drawable/tab_user_selector"
               android:background="@drawable/tab_background_selector"/>
           <TextView
               android:id="@+id/tab_tv_num_user"
               android:layout_width="20dp"
               android:layout_height="20dp"
               android:gravity="center"
               android:background="@drawable/red_ring"
               android:layout_toRightOf="@id/tab_tv_user"
               android:layout_marginLeft="-16dp"
               android:textColor="@android:color/white"
               android:visibility="invisible"
               />
       </RelativeLayout>
   </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/line_gray"
        android:layout_above="@+id/tab_layout"/>

</RelativeLayout>

实现： 
public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{

    private TextView mTvRecord = null;

    private TextView mTvUser = null;

    private ViewPager viewPager = null;

    private FragmentManager manager;

    private RecordFragment recordFragment = null;
    private UserFragment userFragment = null;

    public final static int FRAGMENT_RECORD = 0;
    public final static int FRAGMENT_USER = 1;

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

        manager = getSupportFragmentManager();

        initViews();




    }

    private void initViews() {
        mTvRecord = (TextView)findViewById(R.id.tab_tv_record);
        mTvUser = (TextView)findViewById(R.id.tab_tv_user);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        mTvRecord.setOnClickListener(this);
        mTvRecord.performClick();   //选择效果，使界面一打开时，有选中状态

        mTvUser.setOnClickListener(this);

        FragmentAdapter adatpter = new FragmentAdapter(manager);
        viewPager.setAdapter(adatpter);
        viewPager.setCurrentItem(FRAGMENT_RECORD);
        viewPager.setOnPageChangeListener(this);
    }

    private void setNotSelected(){
        mTvRecord.setSelected(false);
        mTvUser.setSelected(false);
    }
    
    //当显示fragment时，是通过add和show时，需要先隐藏当前的，在显示新的
    private void hideAllFragment(FragmentTransaction transaction){
        if (recordFragment != null){
           transaction.hide(recordFragment);
        }
        if (userFragment != null){
            transaction.hide(userFragment);
        }
    }

    @Override
    public void onClick(View v) {

        FragmentTransaction transaction = manager.beginTransaction();       //transaction只能调用一次，每次需重新创建

        switch (v.getId()){
            case R.id.tab_tv_record:
                setNotSelected();
                mTvRecord.setSelected(true);
                viewPager.setCurrentItem(FRAGMENT_RECORD);
                break;
            case R.id.tab_tv_user:
                setNotSelected();
                mTvUser.setSelected(true);
                viewPager.setCurrentItem(FRAGMENT_USER);
                break;
            default:
                break;
        }

        transaction.commit();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if (state == 2){
            switch (viewPager.getCurrentItem()){
                case FRAGMENT_RECORD:
                    setNotSelected();
                    mTvRecord.setSelected(true);
                    break;
                case FRAGMENT_USER:
                    setNotSelected();
                    mTvUser.setSelected(true);
                    break;
                default:
                    break;
            }
        }


    }

}

项目代码   TestFragment.rar

Android：viewPage+Fragment实现模拟微信首页
Rssqzqyp的博客
09-11 587
一、前言：虽然现在很多已经不这么写了，但是这是最底层的东西，我想我还是要好好理解一下的。这篇代码是模拟微信首页底部按钮和ViewPage的联动。在drawable中新建导航底部按钮选择器。
ViewPager2 + Fragment + TabLayout 的使用实现类似微信的底部导航栏（kotlin）
weixin_45829525的博客
07-05 2207
文章目录效果实现方案ViewPager2 + Fragment 的使用TabLayout 的使用 效果 实现方案 ViewPager2 + Fragment 的使用 本文实现上述效果采用的方案为：ViewPager2 + Fragment + TabLayout，总体布局为在一个 Activity 中嵌入 ViewPager2 与 TabLayout 两个控件，再使用 ViewPager2 对 3 个 Fragment进行管理，最后对 TabLayout 中的 item 和对应的 Fragment 之间进
Android实现微信底部的带消息提示数量
04-11
Android实现微信底部的带消息提示数量
ViewPage和Fragment上 实现BadgeView消息提醒（仿旧微信）
weixin_30247781的博客
08-20 104
先上图： 这里只是使用了viewpage和 Fragment，没有用GitHob上viewpagerindicator，而是自己写了个指示器,使用了badgeView显示消息提醒。 首先，是上面的titleBar没什么好说的带过。。。 <?xml version="1.0" encoding="utf-8"?> <RelativeLayou...
使用ViewPager+RadioGroup+Fragment实现类似微信的底部导航
07-28
ViewPager+RadioGroup+Fragment实现类似微信的底部导航
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
04-01
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
android 中viewpager+fragment仿微信底部TAG完美渐变
08-30
在Android开发中，为了实现类似微信底部标签栏（TAG）的动态渐变效果，我们可以结合使用ViewPager和Fragment。这个功能让应用的用户界面更加现代化和交互性更强，为用户提供更好的体验。下面我们将详细讨论如何在...
Android实现仿微信底部导航栏
09-16
总之，通过结合使用ViewPager和RadioGroup，我们可以轻松地在Android应用中创建一个仿微信底部导航栏，提升应用的用户体验。这个设计模式不仅适用于微信，还可以广泛应用于许多其他需要多页面切换的应用中。
viewpager+tabLayout+fragment联动导航栏
12-06
在Android应用开发中，创建一个类似微信底部导航栏的功能是一项常见的需求。`viewpager+tabLayout+fragment`的组合是实现这一功能的标准方法，它能够为用户提供流畅的滑动切换和清晰的页面导航。下面我们将深入探讨...
android fragment 底部菜单栏,一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager...
weixin_34138585的博客
05-26 375
现在大多数App都会用到底部导航栏，比如常见的聊天工具QQ、微信、购物App等等，有了底部导航栏，用户可以随时切换界面，查看不同的内容。它的实现方式也很多，以前大多使用TabHost来实现，但是现在我们有很多更好的选择。常见的底部导航栏实现方式：1.使用LinearLayout + TextView实现了底部导航栏的效果2.使用RadioGroup + RadioButton实现了底部导航栏的效果...
Android底部导航栏+消息提醒
qq_36091581的博客
05-23 3044
Android底部导航栏+消息提醒 最近想在网上找一些Android底部导航栏切换并能提供消息提醒的案例，虽然有很多案例但都不是我想要的。我就开始自己瞎研究了，废话不多说了，直接上代码。 1.先创建一个layout XML文件 这个文件包含三个部分：ViewPage、RadioGroup、BadgeView的Layout。 1.1 ViewPage &lt;android.supp...
android 底部标签栏CommonTabLayout搭建项目底部菜单（带消息提醒）
m0_64604842的博客
12-22 780
} }); /** 每一个Tab的布局参数 */ LinearLayout.LayoutParams lp_tab = mTabSpaceEqual ? new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f) : new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT); if (mTabWidth > 0) { lp
Fragment和ViewPager实现底部导航栏
crazy_yyyyy的专栏
05-14 3433
前几天准备写一个小程序，一直认为fragment实现底部导航栏，是很容易的事情，可是却遇到了前所未有的问题，先给大家贴出来我出错的界面布局代码： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
安卓APP底部导航栏（有消息圆点指示器），实现fragment切换（eclipse）
举世武双的博客
07-09 2376
本项目使用了相对布局和单选按钮实现了安卓app常见的底部导航栏（带有消息圆点指示器）。
Android 仿微信底部菜单栏 + 显示未读消息数量
like_program 的博客
12-11 9890
转载请注明出处： http://blog.youkuaiyun.com/like_program/article/details/53576927 微信想必大家都很熟悉了，它的底部菜单栏和显示未读消息数量功能，被很多 app 模仿，这篇博客就来带领大家，一步一步实现底部菜单栏，并且在底部菜单栏显示未读消息数量。我们先来看下最终效果图。最终效果图1.底部菜单栏2.显示未读消息数量1.实现底部菜单栏我们先来实现底部
fragment嵌套fragment+viewpager实现顶部导航栏
csdn
06-22 6076
对于这种界面大家都很熟悉，上面的标题栏滑动或点击的时候可选择不同的界面，下面的导航栏点击可切换不同的界面，这样的效果可以在一个Acitivity里面加载最多的页面：对于这样的界面如何实现呢，其实就是Fragment的嵌套，点击下方的音乐按钮的时候会加载上面包括标题栏的Fragment界面，这个Fragment界面嵌套在ViewPager中，又包括了期刊、单曲等Fragment界面，下面我用自己的方...
Android ViewPager+Fragment实现微信底部标签渐变效果
在Android应用开发中，为了实现类似微信底部导航栏的效果，我们可以利用`ViewPager`和`Fragment`进行组合，并通过自定义控件来达到文字和图片的渐变动画。以下是对这一技术的详细说明： 1. **ViewPager**：`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值