前一段时间写了一个关于微信底部导航栏的简单介绍,因为时间问题没有对代码进行封装,现在我要对项目进行封装,可以通过一个工具类很简单的实现点击底部导航栏实现界面切换,废话不多说了,基本就是这样实现的:
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下载地址:
仿微信底部导航栏