Fragment浅用——导航栏、指示器、ViewPager滑动切换、PopupWindow悬浮框

最新推荐文章于 2024-04-27 11:23:57 发布
最新推荐文章于 2024-04-27 11:23:57 发布
阅读量1k 收藏 6
点赞数 3
分类专栏： fragment ViewPager PopupWindow 文章标签： android java webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNHAY/article/details/125229483
版权

功能：

1、顶部导航栏，ViewPager滑动切换页面也可以点击导航栏切换，点击页面上的按钮可跳转activity
2、底部指示器，根据页面的切换进行联动变换
3、左上角菜单栏，PopupWindow悬浮框，可实现微信右上角“+”的功能

为了避免浪费时间，首先看一下效果图是否满足需求。

接下来看项目的主要组成部分：

代码部分：

activity_main主要代码：

<RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_below="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/bg_white"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_channel"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_channel"
            android:text="@string/tab_menu_alert" />

        <RadioButton
            android:id="@+id/rb_message"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_message"
            android:text="@string/tab_menu_profile" />

        <RadioButton
            android:id="@+id/rb_better"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_better"
            android:text="@string/tab_menu_pay" />

        <RadioButton
            android:id="@+id/rb_setting"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_setting"
            android:text="@string/tab_menu_setting" />

    </RadioGroup>

<androidx.viewpager.widget.ViewPager
        android:id="@+id/vpager"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/div_tab_bar" />

    <LinearLayout
        android:id="@+id/point_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

    </LinearLayout>
DevicePopWindow完整代码：
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.PopupWindow;
import android.widget.TextView;

public class DevicePopWindow extends PopupWindow implements View.OnClickListener {
    private Context context;
    public DevicePopWindow(Context context){
        super(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        this.context=context;
        //这里要注意设置setOutsideTouchable之前要设置 setBackgroundDrawable()
        //否则点击外部无法关闭pop
        setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        setOutsideTouchable(true);
        //获取焦点设置为true 这样再次点击菜单时 就隐藏菜单
        setFocusable(true);
        View inflate = LayoutInflater.from(context).inflate(R.layout.menu, null);
        TextView tv_1=inflate.findViewById(R.id.tv_1);
        TextView tv_2=inflate.findViewById(R.id.tv_2);
        TextView tv_3=inflate.findViewById(R.id.tv_3);
        TextView tv_4=inflate.findViewById(R.id.tv_4);
        tv_1.setOnClickListener(this);
        tv_2.setOnClickListener(this);
        tv_3.setOnClickListener(this);
        tv_4.setOnClickListener(this);
        setContentView(inflate);
        //设置窗口进入和退出的动画
        setAnimationStyle(R.style.pop_add);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tv_1:
                Intent intent=new Intent(context,TwoActivity.class);
                context.startActivity(intent);
                break;
            case R.id.tv_2:
                break;
            case R.id.tv_3:
                break;
            case R.id.tv_4:
                break;
        }
    }
}

MainActivity完整代码：

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener, View.OnClickListener {
    private TextView txt_topbar;
    private RadioGroup rg_tab_bar;
    private RadioButton rb_channel;
    private RadioButton rb_message;
    private RadioButton rb_better;
    private RadioButton rb_setting;
    private ViewPager vpager;
    private MyFragmentPagerAdapter mAdapter;
    //几个代表页面的常量
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;
    private ImageView menus;
    DevicePopWindow devicePopWindow;
    private LinearLayout mPointContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        initView();
        rb_channel.setChecked(true);
        devicePopWindow=new DevicePopWindow(this);
    }

    private void initView() {
        txt_topbar = findViewById(R.id.txt_topbar);
        rg_tab_bar = findViewById(R.id.rg_tab_bar);
        rb_channel = findViewById(R.id.rb_channel);
        rb_message = findViewById(R.id.rb_message);
        rb_better =  findViewById(R.id.rb_better);
        rb_setting = findViewById(R.id.rb_setting);
        rg_tab_bar.setOnCheckedChangeListener(this);
        vpager = findViewById(R.id.vpager);
        vpager.setAdapter(mAdapter);
        vpager.setCurrentItem(0);
        vpager.addOnPageChangeListener(this);
        menus=findViewById(R.id.menus);
        menus.setOnClickListener(this) ;
        //找到放指示器的容器
        mPointContainer = (LinearLayout) findViewById(R.id.point_container);
        //根据页面个数添加指示器的个数
        insertPoint();
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.rb_channel:
                vpager.setCurrentItem(PAGE_ONE);
                break;
            case R.id.rb_message:
                vpager.setCurrentItem(PAGE_TWO);
                break;
            case R.id.rb_better:
                vpager.setCurrentItem(PAGE_THREE);
                break;
            case R.id.rb_setting:
                vpager.setCurrentItem(PAGE_FOUR);
                break;
        }
    }

    //重写ViewPager页面切换的处理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        int realPosition;
        if (4 != 0) {
            realPosition = position % 4;
        }else{
            realPosition = 0;
        }
        setSelectPoint(realPosition);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if (state == 2) {
            switch (vpager.getCurrentItem()) {
                case PAGE_ONE:
                    rb_channel.setChecked(true);
                    break;
                case PAGE_TWO:
                    rb_message.setChecked(true);
                    break;
                case PAGE_THREE:
                    rb_better.setChecked(true);
                    break;
                case PAGE_FOUR:
                    rb_setting.setChecked(true);
                    break;
            }
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.menus:
                devicePopWindow.showAsDropDown(v, -150, 10);
                break;
        }
    }

    //根据页面个数添加指示器的个数
    private void insertPoint() {
        for(int i = 0; i < 4; i++){
            View point = new View(MainActivity.this);
            //定义每个point 所在子布局的宽高属性
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
            layoutParams.leftMargin = 20;
            if (i==0){
                point.setBackground(getResources().getDrawable(R.drawable.shape_point_selected)); //将point的背景设置为事先定义好的形状
            }else {
                point.setBackground(getResources().getDrawable(R.drawable.shape_point_normal)); //将point的背景设置为事先定义好的形状
            }
            //设置POINT 的布局属性
            point.setLayoutParams(layoutParams);
            //将point加入到父布局中
            mPointContainer.addView(point);
        }
    }

    //设置指示器余页面的联动
    private void setSelectPoint(int realPostion) {
        for(int i = 0; i < mPointContainer.getChildCount(); i++){
            View point = mPointContainer.getChildAt(i);
            if (i == realPostion) {
                point.setBackgroundResource(R.drawable.shape_point_selected);
            }else{
                point.setBackgroundResource(R.drawable.shape_point_normal);
            }
        }
    }

}

MyFragment1完整代码：（MyFragment2、MyFragment3、MyFragment4近乎相同）
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;

public class MyFragment1 extends Fragment {
    TextView txt_content;

    public MyFragment1() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
         txt_content =  view.findViewById(R.id.txt_content);
         txt_content.setText("第一个页面");
         txt_content.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 Intent intent=new Intent(getActivity(),TwoActivity.class);
                 startActivity(intent);
             }
         });
        return view;
    }
}

MyFragmentPagerAdapter完整代码：
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;


public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private final int PAGER_COUNT = 4;
    private MyFragment1 myFragment1 = null;
    private MyFragment2 myFragment2 = null;
    private MyFragment3 myFragment3 = null;
    private MyFragment4 myFragment4 = null;

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        myFragment1 = new MyFragment1();
        myFragment2 = new MyFragment2();
        myFragment3 = new MyFragment3();
        myFragment4 = new MyFragment4();
    }

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

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {
        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        System.out.println("position Destory" + position);
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case MainActivity.PAGE_ONE:
                fragment = myFragment1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = myFragment2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = myFragment3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = myFragment4;
                break;
        }
        return fragment;
    }

}

fragment参考：Android基础入门教程——5.2.4 Fragment实例精讲——底部导航栏+ViewPager滑动切换页面_coder-pig的博客-CSDN博客

完整项目地址：Fragment导航栏-Android文档类资源-CSDN下载

小眼看世界.
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android程序开发之Fragment实现底部导航栏实例代码
01-20
流行的应用的导航一般分为两种，一种是底部导航，一种是侧边栏。 说明 IDE：AS，Android studio; 模拟器：genymotion; 实现的效果，见下图。 具体实现 为了讲明白这个实现过程，我们贴出来的代码多一写，这样更方便理解 [最后还会放出完整的代码实现] 。看上图的界面做的比较粗糙，但实现过程的骨架都具有了，想要更完美的设计，之后自行完善吧 ^0^。 布局 通过观察上述效果图，发现任意一个选项页面都有三部分组成： 顶部去除ActionBar后的标题栏； 中间一个FragmentLayout用来放相应的Fragment； 底部一个大的LinearLayout放着四个样式一样
Android开发：利用Android Studio自带的底部导航栏和ViewPager+TabLayout创建顶部导航栏
Night_Journey的博客
09-15 2723
可以看出在底部导航栏中官方使用的是Binding，但实际上比较常用的还是View，所以我就把首页的binding改成View，以及下面创建顶部导航栏的四个fragment也都有View。说白了就是把顶部导航栏的四个fragment嵌套到底部导航栏的一个fragment中。父fragment的消失会导致子fragment的消失。原因：底部导航的切换，会导致切换前的fragment被杀掉，也就是HomeFragment被杀掉，再切回来时，子fragment并没有被创建，所以该显示的文字没有显示出来。
Android studio页面布局实现固定顶部和底部导航栏，中间可滑动
热门推荐
hjjshua的博客
04-14 1万+
android 开发实现实现页面上下菜单栏固定 中间设置可上下滑动 android 页面布局固定顶部，底部 ，中间设置可上下滑动
【Android】Fragment实现顶部、底部导航栏
weixin_44139159的博客
12-23 5930
前言 无论是顶部还是底部导航栏，都是大多数APP的标配，网络上的相关实现教程也非常之多。最近回忆起以前写的小项目，发现对这块内容有些遗忘，不妨就再整理一遍代码逻辑，记录下来，方便日后查阅（指复制粘贴）。 ▶ 实现的方式有很多，本文采用以下方式实现： 底部导航栏：Fragment + BottomNavigationView 顶部导航栏：Fragment + ViewPager2 + TabLayout 底部导航栏 <布局文件> <?xml version="1.0" encoding=
FragmentTabHost实现底部导航栏和顶部滑动导航
顾_小白的博客
10-26 1847
使用V4包的FragmentTabHost实现底部导航栏和顶部滑动导航效果，可用于eclipse等不方便使用TabLayout的场景
Android使用ViewPager实现顶部tabbar切换界面
01-05
类似的功能可以看看： 使用RadioGroup实现底部导航栏 进入正题 效果图： 注：PagerSlidingTabStrip为自定义控件，用于切换界面，此处不便贴出代码 1.主界面xml布局中添加ViewPager控件： <android android:id=@+id/pager_view android:layout_width=match_parent android:layout_height=match_parent> 2.主界面的activity代码： FrOrderList和
【Android】TabLayout + ViewPager + Fragment 实现顶部导航条和页面切换
weixin_52137816的博客
07-25 1174
TabLayout + ViewPager + Fragment 实现顶部导航条和页面切换
Fragment+ViewPager+TabLayout实现主页的顶部页面导航
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-06 1981
首先这部分笔记是接着上一个Module写的，所以前面的那部分代码就不再赘述。 要实现Fragment+ViewPager+TabLayout实现主页的顶部页面导航 其实主页就是一个Fragment里又嵌套了ViewPager，所以我们为了区别于其他三个模块，我不再使用MyFragment，而是新建一个MyHomeFragment，在其中我联动TabLyout再嵌套ViewPager
android ViewPager + Fragment + Tablayout 实现嵌套页面导航
威威的博客
11-14 4006
android ViewPager + Fragment + Tablayout 实现嵌套页面导航详细实现过程+原码
Android中TabLayout+ViewPager+Fragment实现顶部导航栏
qq_46269365的博客
05-23 991
三个feagment布局都一样，都只有一个TextView，下面只给出一个例子。
Fragment导航栏、指示器、ViewPager滑动切换、PopupWindow悬浮框
06-10
1、顶部导航栏，ViewPager滑动切换...3、左上角菜单栏，PopupWindow悬浮框，可实现微信右上角“+”的功能 博客地址：https://blog.csdn.net/CSDNHAY/article/details/125229483 （可通过博客查看效果图是否符合需求）
Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）
01-05
ViewPagerIndicator导航栏指示器运行效果： 实现这个效果，我是看了很多大神写的博客和视频后自己敲的，欢迎指正 github地址：https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator ...
安卓：ViewPager+Fragment+RadioButton实现底部菜单栏滑动切换
01-03
ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左右滑动，从而切换不同的View，我们可以通过setPageTransformer()方法为我们的ViewPager> 设置切换时的动画效果。和ListView，...
ViewPager&Fragment实现页面切换、底部导航栏
11-27
本资源为使用ViewPager和Fragment实现页面切换和底部导航栏的效果源码，建议配合Android应用开发--底部导航栏效果的一种实现方式（ViewPager&Fragment）文章查看。
Android --- 英文单引号用&apos；替换报错：does not contain a valid string resource
梁同学与Android
04-23 249
Android --- 英文单引号用&apos;替换报错：does not contain a valid string resource
Android 14 transtion 动画流程
u012627628的博客
04-24 1026
implements Transitions.TransitionHandler 的对象都会调用到startAnimation。根据上步计算出来的sortedTargets计算要做的动画TransitionInfo。此列表在开始做动画时候会判断里面的key，value是否满足做动画的条件。将符合条件的changeInfo添加到targets 返回。计算所有的到mChanges。
Android 11 裁剪系统显示区域(适配异形屏)
最新发布
ansondroider的博客
04-27 780
在显示技术中，"OverScan"（超扫描）是一种调整显示图像边界的技术。通常情况下，OverScan 会在显示屏的边缘周围裁剪一小部分图像。这种裁剪是为了确保显示内容在屏幕上的完整可见性，尤其是在老式电视或投影仪等设备上，可能存在图像边缘出现失真或过多噪点的问题。OverScan 通过裁剪图像边缘，可以隐藏显示器边缘的任何不完美之处，例如边缘上的噪点、失真或黑边。这有助于确保图像在屏幕上的边缘部分看起来整洁且不受干扰，提供更好的观看体验。
安卓aab文件生成apk文件
ma15991375491的博客
04-24 416
比如我们在手机上经常下载的的各种APP，其实一个Android应用程序的代码想要在Android设备上运行，必须先进行编译，然后被打包成为一个被Android系统所能识别的文件才可以被运行，而这种能被Android系统识别并运行的文件格式便是“APK”。一个APK文件内包含被编译的代码文件(.dex 文件)，文件资源（resources）， 原生资源文件（assets），证书（certificates），和清单文件（manifest file）严格来说，两者没有什么区别，后者是前者的一种升级版格式文件。
如何使用PHP进行图片处理？
Xs_layla的博客
04-26 462
如何使用PHP进行图片处理？使用PHP进行图片处理是一项强大的功能，它可以让你在服务器端对图像进行各种操作，如裁剪、缩放、添加水印、调整颜色等。这通常通过使用GD库或Imagick扩展来实现。下面将详细介绍如何使用PHP和这两个工具进行图片处理。
Android——ViewPager多页面滑动切换以及动画效果
05-27
ViewPager是一个Android中的View容器，可以让用户在多个页面之间进行滑动切换。要实现多页面滑动切换以及动画效果，可以按照以下步骤： 1. 在XML布局文件中添加ViewPager控件，并添加对应的布局文件，例如： ``` <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在Java代码中为ViewPager设置Adapter，用于显示多个页面。例如： ``` ViewPager viewPager = findViewById(R.id.viewPager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); ``` 其中，MyPagerAdapter是自定义的PagerAdapter类，需要继承自FragmentPagerAdapter或FragmentStatePagerAdapter。 3. 在自定义的PagerAdapter类中实现getItem()方法，用于返回每个页面的Fragment实例。例如： ``` @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } ``` 其中，Fragment1、Fragment2、Fragment3是自定义的Fragment类，用于显示对应页面的内容。 4. 如果需要添加页面切换的动画效果，可以在Java代码中为ViewPager设置PageTransformer。例如： ``` viewPager.setPageTransformer(true, new DepthPageTransformer()); ``` 其中，DepthPageTransformer是自定义的PageTransformer类，用于实现页面切换时的动画效果。可以参考以下代码示例： ``` public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0f); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1f); view.setTranslationX(0f); view.setScaleX(1f); view.setScaleY(1f); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0f); } } } ``` 以上就是实现Android中ViewPager多页面滑动切换以及动画效果的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值