这里ButtomBar有3个items,分别有icon和文字,在当前fragment时,所属的icon和文字会显示不同颜色。
1. 首先要准好ICON素材,命名规范要清楚。
2. 实现这个ButtomBar用到fragment,架构是这样。
3. ButtomBar的TextView带ICON
用DrawTop在TextView上画ICON,TextColor来改变当前点选的颜色。看看代码就知道发生什麽事了。
selector_icon_frag_home
selector_bottom_text
不算太复杂,不解释。
3. 先创建Fregment吧。
public class HomeFragment extends Fragment { @Override public View onCreateView (LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { view = inflater.inflate(R.layout.fragment_home, container, false); return view; }}
别忘记要创建fragment_home。
4. 现在有了ButtonBar,有了Fragment,就可以用MainActivity调用它们来实现ButtonBar功能。
MainActivity初始化2个很重要的控件,FragmentManager和FragmentTransaction。
FragmentManager是管理Fragment,FragmentTransaction是过场效果。
这3个TextView就是ButtonBar的3个IC。
// bottom bar main private TextView tvBbMainHome; private TextView tvBbMainAcademic; private TextView tvBbMainSet; // fragment private FragmentManager fragmentManager; private FragmentTransaction transaction; // fragment private HomeFragment homeFragment; private AcademicFragment academicFragment; private SetFrgment setFragment;
初始化。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); fragmentManager = getSupportFragmentManager(); initUI(); initListener(); // per-click the home page icon of button bar tvBbMainHome.performClick(); }
看代码,不解释。
private void initUI() { // bottom bar main tvBbMainHome = (TextView)findViewById(R.id.tvBbMainHome); tvBbMainAcademic = (TextView)findViewById(R.id.tvBbMainAcademic); tvBbMainSet = (TextView)findViewById(R.id.tvBbMainSet); } private void initListener() { // bottom bar Main tvBbMainHome.setOnClickListener(this); tvBbMainAcademic.setOnClickListener(this); tvBbMainSet.setOnClickListener(this); } private void setSelectorAllFalse() { tvBbMainHome.setSelected(false); tvBbMainAcademic.setSelected(false); tvBbMainSet.setSelected(false); } private void hideAllFragment() { if (homeFragment != null) { transaction.hide(homeFragment); } if (academicFragment != null) { transaction.hide(academicFragment); } if (setFragment != null) { transaction.hide(setFragment); } }
最核心的业务层在这。TextView继承了onClickListener。假如点中了TextView,首先会调用hideAllFragment,把所有Fragment都隐藏,保证画面是初始化了完全空白。
然后调用setSelectorAllFalse,确保不会出现连点的情况。
setSelected(true)是用来调用selector_bottom_text,转变TextView的颜色。
中间的太简单不解释。
最后别忘记调用transaction.commit()
@Override public void onClick(View view) { transaction = fragmentManager.beginTransaction(); hideAllFragment(); setSelectorAllFalse(); switch (view.getId()) { case R.id.tvBbMainHome: tvBbMainHome.setSelected(true); if (homeFragment == null) { homeFragment = new HomeFragment(); transaction.add(R.id.frameLayout, homeFragment, "homeFragment"); } transaction.show(homeFragment); break; case R.id.tvBbMainAcademic: tvBbMainAcademic.setSelected(true); if (academicFragment == null) { academicFragment = new AcademicFragment(); transaction.add(R.id.frameLayout, academicFragment, "academicFragment"); } transaction.show(academicFragment); break; case R.id.tvBbMainSet: tvBbMainSet.setSelected(true); if (setFragment == null) { setFragment = new SetFrgment(); transaction.add(R.id.frameLayout, setFragment, "setFragment"); } transaction.show(setFragment); break; } transaction.commit(); }
吾系佛系青年,庚叁透叁透!