Android学习笔记（2）——底部导航栏、菜单的使用

前言：现在大多数App都会用到底部导航栏，比如常见的聊天工具QQ、微信，购物App等等，有了底部导航栏，用户可以随时切换界面，查看不同的内容。它的实现方式也很多，我采用的是tabhost来构造底部导航栏，和菜单。

工程目录：首先来看一下工程目录。

主要文件：

1.activity_main.xml

ps：本人小白一枚，习惯工程起源于主界面的搭建。>_<

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.zhangpei.docotoroffamily.MainActivity">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFFFF"
android:orientation="vertical">

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="fill_parent">
<fragment
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/fragment_main"
android:name="com.zhangpei.docotoroffamily.MainFragment"
/>
<fragment
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/fragment_mycenter"
android:name="com.zhangpei.docotoroffamily.MyCenterFragment"
/>
<fragment
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/fragment_search"
android:name="com.zhangpei.docotoroffamily.SearchFragment"
/>

</FrameLayout>
</FrameLayout>

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:visibility="gone"
></TabWidget>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="3dp"
android:background="@drawable/fbutton_color_emerald">
</LinearLayout>

<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/fbutton_color_turquoise"
android:gravity="center_vertical"
android:orientation="horizontal">

<RadioButton
android:id="@+id/radio_main"
style="@style/main_tab_bottom"
android:layout_weight="1"
android:background="@drawable/footer_itembg_selector"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/footer_main_selector"
android:text="首 页" />

<RadioButton
android:id="@+id/radio_search"
style="@style/main_tab_bottom"
android:layout_weight="1"
android:background="@drawable/footer_itembg_selector"
android:drawableTop="@drawable/footer_search_selector"
android:text="查 询"
/>

<RadioButton
android:id="@+id/radio_mycenter"
style="@style/main_tab_bottom"
android:layout_weight="1"
android:background="@drawable/footer_itembg_selector"
android:drawableTop="@drawable/footer_mycenter_selector"
android:text="个人中心" />
</RadioGroup>

</LinearLayout>

</TabHost>

主界面文件相应的布局一目了然，三个fragmen，三个底部按钮，通过TabHost实现转换。注意红色部分，不要太相信编译器呦!!!

2.MainActivity.java

public class MainActivity extends ActionBarActivity {

// tab用参数
private TabHost tabHost;
private RadioGroup radiogroup;
private int menuid;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

radiogroup = (RadioGroup) findViewById(R.id.radiogroup);
tabHost = (TabHost) findViewById(android.R.id.tabhost);
tabHost.setup();

tabHost.addTab(tabHost.newTabSpec("main").setIndicator("main")
.setContent(R.id.fragment_main));
tabHost.addTab(tabHost.newTabSpec("mycenter").setIndicator("mycenter")
.setContent(R.id.fragment_mycenter));
tabHost.addTab(tabHost.newTabSpec("search").setIndicator("search")
.setContent(R.id.fragment_search));

radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, @IdRes int checkedId) {

menuid = checkedId;
//int currentTab = tabHost.getCurrentTab();
switch (checkedId) {
case R.id.radio_main:
tabHost.setCurrentTabByTag("main");
//如果需要动画效果就使用
//setCurrentTabWithAnim(currentTab, 0, "main");
//getSupportActionBar().setTitle("首页");
break;
case R.id.radio_mycenter:
tabHost.setCurrentTabByTag("mycenter");
//setCurrentTabWithAnim(currentTab, 1, "mycenter");
//getSupportActionBar().setTitle("个人中心");

break;
case R.id.radio_search:
//setCurrentTabWithAnim(currentTab, 1, "search");
tabHost.setCurrentTabByTag("search");
//getSupportActionBar().setTitle("搜索");
}
// 刷新actionbar的menu
getWindow().invalidatePanelMenu(Window.FEATURE_OPTIONS_PANEL);
}

});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
switch (menuid) {
case R.id.radio_main:
getMenuInflater().inflate(R.menu.main, menu);
break;
case R.id.radio_mycenter:
menu.clear();
break;
case R.id.radio_search:
menu.clear();
break;
}
return true;
}

@Override
public boolean onOption
4000
sItemSelected(MenuItem item) {

int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

// 判断动画滑动的方向
private void setCurrentTabWithAnim(int now, int next, String tag) {
if (now > next) {
tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
tabHost.setCurrentTabByTag(tag);
tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
} else {
tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
tabHost.setCurrentTabByTag(tag);
tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
}
}
}

3.fragment_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"/>

</LinearLayout>

4.MainFragment.java

public class MainFragment extends Fragment {

@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view= inflater.inflate(R.layout.fragment_main, null);
return view;
}
}

    为节约资源，仅选其一Fragment进行展示，读者如需其他详细资源可以在文章末尾连接下载。

文末：附一张运行截图。                                                                                                                                                                                                

   
             

                  


Android学习笔记————2017.9.15   点我点我