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

实现效果图

实现

利用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 FragmentPag
4000
erAdapter {
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 V
8d0e
iew 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;
}

这样，我们就实现了简单的底部导航栏效果。

我已将这个小DEMO上传至我的GitHub，供大家学习交流

GitHub：https://github.com/wj453245456/FragementRstu