仿微信底部导航栏效果，封装成了工具类。

来源：互联网发布：淘宝百度文库财富值编辑：程序博客网时间：2024/06/06 08:40

前一段时间写了一个关于微信底部导航栏的简单介绍，因为时间问题没有对代码进行封装，现在我要对项目进行封装，可以通过一个工具类很简单的实现点击底部导航栏实现界面切换，废话不多说了，基本就是这样实现的：

1.首先写总的布局activity_main.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <FrameLayout        android:id="@+id/fragment_id"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" />    <View        android:layout_width="match_parent"        android:layout_height="0.5dp"        android:background="#eeeeee" />    <RadioGroup        android:layout_alignParentBottom="true"        android:id="@+id/main_radioGroupId"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/white"        android:orientation="horizontal">        <RadioButton            android:checked="true"            android:id="@+id/one"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawableTop="@drawable/selector_college"            android:gravity="center"            android:paddingBottom="7dp"            android:drawablePadding="3dp"            android:paddingTop="7dp"            android:text="@string/college"            android:textColor="@color/color_radiobutton"            android:textSize="12sp" />        <RadioButton            android:drawablePadding="3dp"            android:id="@+id/two"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawableTop="@drawable/selector_learn"            android:gravity="center"            android:paddingBottom="7dp"            android:paddingTop="7dp"            android:text="@string/learn"            android:textColor="@color/color_radiobutton"            android:textSize="12sp" />        <RadioButton            android:drawablePadding="3dp"            android:id="@+id/three"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawableTop="@drawable/selector_my"            android:gravity="center"            android:paddingBottom="7dp"            android:paddingTop="7dp"            android:text="@string/my"            android:textColor="@color/color_radiobutton"            android:textSize="12sp" />    </RadioGroup></LinearLayout>

2：底部导航栏的按钮，我这里用的是radiobutton来实现的，通过设置是否选中来修改图片，这里就介绍一个按钮的制作：selector_college.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/xueyuan01" android:state_checked="false"></item>    <item android:drawable="@mipmap/xueyuan01b" android:state_checked="true"></item></selector>

文字的选中颜色变化也通过color来实现首先在res下面创建一个color.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/colorPrimary" android:state_checked="true" /><!-- not selected --><item android:color="@color/colorLine" /></selector>

下面的重点代码来了，首先介绍一些界面切换的工具类：TabFragmentUtils:这里我用的是几个fragment的显示和隐藏，而不是用replace去替换：

import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.widget.RadioButton;import android.widget.RadioGroup;import java.util.List;/** * Created by lixuce on 2016/5/10 0008. * 作用：Fragment的完美切换，不会出现滑动过快而出现闪退现象 */public class TabFragmentUtils implements RadioGroup.OnCheckedChangeListener {    private List<Fragment> fragments;    private FragmentManager fragmentManager;    private int container;    //当前显示的页面    private int curShowPosition=0;    private RadioGroup radioGroup;    public TabFragmentUtils(RadioGroup radioGroup, int container, List<Fragment> fragments, FragmentManager fragmentManager) {        this.container = container;        this.fragments = fragments;        this.radioGroup = radioGroup;        this.fragmentManager = fragmentManager;        //设置radiobutton的点事件        radioGroup.setOnCheckedChangeListener(this);        //默认选择0 页面        ((RadioButton) radioGroup.getChildAt(0)).setChecked(true);    }    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {        for (int i = 0; i < group.getChildCount(); i++) {            View view = group.getChildAt(i);            if(view.getId() == checkedId) {                //隐藏当前页面                fragments.get(curShowPosition).onStop();                //显示点击页面                if (fragments.get(i).isAdded()) {                    //点击页面可见                    fragments.get(i).onStart();                } else {                    fragmentManager.beginTransaction().add(container, fragments.get(i)).commit();                }                //真正的显示fragment                showFragment(i);            }        }    }    //显示页面    private void showFragment(int index) {        for (int i = 0; i < fragments.size(); i++) {            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();            if(i == index)            {//就是要显示的页面                fragmentTransaction.show(fragments.get(i));            }            else            {                fragmentTransaction.hide(fragments.get(i));            }            fragmentTransaction.commit();        }        //当前显示的页面为 index        curShowPosition = index;    }}

这面是这个工具类的使用方法，很简单就可以实现：里面有两个小技巧

public class MainActivity extends BaseActivity {    RadioGroup mainRadioGroupId;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mainRadioGroupId = (RadioGroup) findViewById(R.id.main_radioGroupId);        FragmentManager fragmentManager = getSupportFragmentManager();        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();        NewsFragment guideFragment = NewsFragment.newInstance();        fragmentTransaction.add(R.id.fragment_id, guideFragment);        fragmentTransaction.commit();        List<Fragment> fragments = new ArrayList<>();        fragments.add(guideFragment);        fragments.add(GuideFragment.newInstance(1));        fragments.add(MineFragment.newInstance());        new TabFragmentUtils(mainRadioGroupId, R.id.fragment_id, fragments, getSupportFragmentManager());    }    @Override    protected void onSaveInstanceState(Bundle outState) {        //小技巧 重写这个方法  然后不重写父类的方法，可以避免程序闪退之后，几个fragment，会重叠！        //super.onSaveInstanceState(outState);    }    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        //小技巧   就是在首页按返回键的时候，应用不会退出，微信，QQ，支付宝，一类的都是这样做的，有点小流氓！        if (keyCode == KeyEvent.KEYCODE_BACK) {            Intent intent = new Intent(Intent.ACTION_MAIN);            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);            intent.addCategory(Intent.CATEGORY_HOME);            startActivity(intent);            return true;        }        return super.onKeyDown(keyCode, event);    }}

这样是不是很简单就可以实现了，我前一段时间写的那个只是简单的介绍，现在封装成工具类的，可以减少很多代码，而且很简单实现，稍后我会写出Demo上传资源，欢迎大家进行下载。

Demo下载地址：仿微信底部导航栏

0 0