【Android】Fragment+Viewpager实现底部导航栏（带小红点）

最新推荐文章于 2023-03-23 17:59:13 发布

JanSeven

最新推荐文章于 2023-03-23 17:59:13 发布

阅读量1k

点赞数

文章标签： android

本文链接：https://blog.csdn.net/weixin_38648693/article/details/77253171

版权

实现效果图

实现效果

实现

利用Viewpager+fragment能够很轻松的实现这一效果。
这个实例中，有四个fragment
因此，先实现4个fragment

示范代码：
fragment_b.xml:

<FrameLayout 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="wj.com.fragementrstu.BFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="This is B fragement" />

</FrameLayout>

BFragment.java:

public class BFragment extends Fragment {

    public BFragment() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_b, container, false);
    }
}

与ListView一样，ViewPager也需要一个适配器
新建一个FragementAdapter继承FragementPagerAdapter
重写里面的getitem（）和getcount（）方法与构造器即可
代码如下：

public class FragemntAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList;

    public FragemntAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        mFragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }
}

接着，我们在主布局里添加一个Viewpager和五个个TextView（其中一个用作小红点）
代码如下：

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="wj.com.fragementrstu.MainActivity">

    <android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
    <LinearLayout
        android:background="#eeeeee"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center">
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/A_tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="A"
                android:textSize="22dp"
                android:textColor="#0f0"
                android:layout_gravity="center"
                android:gravity="center"/>
            <TextView
                android:id="@+id/A_point"
                android:background="@drawable/redpoint"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_marginRight="10dp"
                android:layout_gravity="right|top"
                android:visibility="gone"
                android:text="0"
                android:textColor="#fff"
                android:gravity="center"
                />
        </FrameLayout>

        <TextView
            android:id="@+id/B_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="B"
            android:textSize="22dp"
            android:textColor="#808080"
            android:gravity="center"/>
        <TextView
            android:id="@+id/C_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C"
            android:textSize="22dp"
            android:textColor="#808080"
            android:gravity="center"/>
        <TextView
            android:id="@+id/D_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="D"
            android:textSize="22dp"
            android:textColor="#808080"
            android:gravity="center"/>
    </LinearLayout>

</RelativeLayout>

Activity部分

用一个list< Fragement >存储fragment
然后实例化一个FragementAdapter
给配置好viewPager.setAdapter
然后实现viewpager的滑动监听接口
代码如下

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    List<Fragment> fragmentList = new ArrayList<Fragment>();
    ViewPager viewPager;

     TextView A_tab ;
     TextView B_tab ;
     TextView C_tab ;
     TextView D_tab ;
     TextView a_point;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //A 小红点
        a_point = (TextView)findViewById(R.id.A_point);


        viewPager = (ViewPager)findViewById(R.id.viewPager);
        A_tab = (TextView)findViewById(R.id.A_tab);
        B_tab = (TextView)findViewById(R.id.B_tab);
        C_tab = (TextView)findViewById(R.id.C_tab);
        D_tab = (TextView)findViewById(R.id.D_tab);

        A_tab.setOnClickListener(this);
        B_tab.setOnClickListener(this);
        C_tab.setOnClickListener(this);
        D_tab.setOnClickListener(this);

        fragmentList.add(new AFragment());
        fragmentList.add(new BFragment());
        fragmentList.add(new CFragment());
        fragmentList.add(new DFragment());
        FragemntAdapter fragemntAdapter = new FragemntAdapter(getSupportFragmentManager(),fragmentList);
        viewPager.setAdapter(fragemntAdapter);
        //viewpager滑动监听
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //当页面被选择时，先将导航栏所有字体颜色设置为灰色
                A_tab.setTextColor(Color.rgb(80,80,80));
                B_tab.setTextColor(Color.rgb(80,80,80));
                C_tab.setTextColor(Color.rgb(80,80,80));
                D_tab.setTextColor(Color.rgb(80,80,80));
                //被选中页面字体颜色设置为绿色
                switch (position){
                    case 0:
                        A_tab.setTextColor(Color.GREEN);
                        break;
                    case 1:
                        B_tab.setTextColor(Color.GREEN);
                        break;
                    case 2:
                        C_tab.setTextColor(Color.GREEN);
                        break;
                    case 3:
                        D_tab.setTextColor(Color.GREEN);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        switch (id){
            case R.id.A_tab:
                viewPager.setCurrentItem(0,false);
                break;
            case R.id.B_tab:
                viewPager.setCurrentItem(1,false);
                break;
            case R.id.C_tab:
                viewPager.setCurrentItem(2,false);
                break;
            case R.id.D_tab:
                viewPager.setCurrentItem(3,false);
                break;

        }
    }
    //A小红点
    public void addpoint(){
        int num = Integer.parseInt(a_point.getText().toString());
        if (num==0){
         a_point.setVisibility(View.VISIBLE);
        }
        num++;
        a_point.setText(String.valueOf(num));
    }
}

小红点的实现
在Activity写一个公共的方法addpoint（）代码在上面
然后在对应的Fragement加上一个按钮
把其中的onCreateview（）改成：

  @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a, container, false);
        Button button = (Button)view.findViewById(R.id.A_button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //通过实例化活动来调用活动中的方法
                MainActivity mainActivity = (MainActivity)getActivity();
                mainActivity.addpoint();
            }
        });
        return view;
    }