android實現(xiàn)底部導(dǎo)航欄
更新時間：2018年06月25日 10:02:26 作者：son_king
這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)底部導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
底部導(dǎo)航欄我選擇用FragmentTabHost+Fragment來實現(xiàn)，這個方法比較好用，代碼量也不多
首先是開始的activity_main.xml
<RelativeLayout 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="${relativePackage}.${activityClass}" >
<FrameLayout
android:id="@+id/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/main_tab"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</FrameLayout>
<view
android:id="@+id/main_tab"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
class="android.support.v4.app.FragmentTabHost" />
</RelativeLayout>
也可以直接在xml文件里面寫
<android.support.v4.view.FragmentTabHost > </android.support.v4.view.FragmentTabHost>
這xml文件就一個view加一個tab view用來顯示碎片，tab用來放置底部按鈕的數(shù)量
再來是tab_foot.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:background="#F6F6F6" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/foot_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/home1" /> <TextView android:id="@+id/foot_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:text="首頁" android:textColor="@color/tab_color" /> </LinearLayout>
這是每個底部按鈕的布局設(shè)置的xml文件
再來是MainActivity的代碼
package com.gjn.mynavigation;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
public class MainActivity extends FragmentActivity implements OnTabChangeListener {
private FragmentTabHost mTabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//初始化FragmentTabHost
initHost();
//初始化底部導(dǎo)航欄
initTab();
//默認(rèn)選中
mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);
}
private void initTab() {
String[] tabs = TabDb.getTabsTxt();
for (int i = 0; i < tabs.length; i++) {
//新建TabSpec
TabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()[i]);
//設(shè)置view
View view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, null);
((TextView) view.findViewById(R.id.foot_tv)).setText(TabDb.getTabsTxt()[i]);
((ImageView) view.findViewById(R.id.foot_iv)).setImageResource(TabDb.getTabsImg()[i]);
tabSpec.setIndicator(view);
//加入TabSpec
mTabHost.addTab(tabSpec,TabDb.getFramgent()[i],null);
}
}
/***
* 初始化Host
*/
private void initHost() {
mTabHost = (FragmentTabHost) findViewById(R.id.main_tab);
//調(diào)用setup方法 設(shè)置view
mTabHost.setup(this, getSupportFragmentManager(),R.id.main_view);
//去除分割線
mTabHost.getTabWidget().setDividerDrawable(null);
//監(jiān)聽事件
mTabHost.setOnTabChangedListener(this);
}
@Override
public void onTabChanged(String arg0) {
//從分割線中獲得多少個切換界面
TabWidget tabw = mTabHost.getTabWidget();
for (int i = 0; i < tabw.getChildCount(); i++) {
View v = tabw.getChildAt(i);
TextView tv = (TextView) v.findViewById(R.id.foot_tv);
ImageView iv = (ImageView) v.findViewById(R.id.foot_iv);
//修改當(dāng)前的界面按鈕顏色圖片
if (i == mTabHost.getCurrentTab()) {
tv.setTextColor(getResources().getColor(R.color.tab_light_color));
iv.setImageResource(TabDb.getTabsImgLight()[i]);
}else{
tv.setTextColor(getResources().getColor(R.color.tab_color));
iv.setImageResource(TabDb.getTabsImg()[i]);
}
}
}
}
其中TabDb類是用來設(shè)置導(dǎo)航欄的數(shù)據(jù)和圖片切換時候的資源
以下是TabDb類
package com.gjn.mynavigation;
public class TabDb {
/***
* 獲得底部所有項
*/
public static String[] getTabsTxt() {
String[] tabs = {"首頁","交易","地點","我的"};
return tabs;
}
/***
* 獲得所有碎片
*/
public static Class[] getFramgent(){
Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class};
return cls ;
}
/***
* 獲得所有點擊前的圖片
*/
public static int[] getTabsImg(){
int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1};
return img ;
}
/***
* 獲得所有點擊后的圖片
*/
public static int[] getTabsImgLight(){
int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2};
return img ;
}
}
到此，底部導(dǎo)航欄就算是完全實現(xiàn)了。
現(xiàn)在來實現(xiàn)頂部導(dǎo)航欄，看了許多最后使用了RadioGroup+ViewPager來實現(xiàn)
首先是為第一個碎片設(shè)計一個xml布局：fm_one.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" > <HorizontalScrollView android:id="@+id/one_hv" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" > <RadioGroup android:id="@+id/one_rg" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > </RadioGroup> </HorizontalScrollView> <view android:id="@+id/one_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" class="android.support.v4.view.ViewPager" /> </LinearLayout>
設(shè)置頂部導(dǎo)航欄和顯示view
之后是導(dǎo)航欄的每個項的布局
tab_rb.xml
<?xml version="1.0" encoding="utf-8"?> <RadioButton xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tab_rb_selector" android:button="@null" android:paddingBottom="10dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:paddingTop="10dp" android:text="今日" > </RadioButton>
其中設(shè)置selector文件來控制點擊和未點擊的狀態(tài)
tab_rb_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 點擊 --> <item android:state_checked="true"> <layer-list > <item > <shape android:shape="rectangle"> <stroke android:width="5dp" android:color="@color/tab_light_color"/> </shape> </item> <item android:bottom="5dp"> <shape android:shape="rectangle"> <solid android:color="#fff"/> </shape> </item> </layer-list> </item> <!-- 默認(rèn) --> <item > <shape > <solid android:color="#fafafa"/> </shape> </item> </selector>
設(shè)置了點擊和默認(rèn)的時候的顯示狀態(tài)
最后來實現(xiàn)OneFm類
package com.gjn.mynavigation;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.LayoutParams;
import android.widget.RadioGroup.OnCheckedChangeListener;
public class OneFm extends Fragment implements OnPageChangeListener {
private View view;
private RadioGroup rg_;
private ViewPager vp_;
private HorizontalScrollView hv_;
private List<Fragment> newsList = new ArrayList<Fragment>();
private OneFmAdapter adapter;
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (view == null) {
//初始化view
view = inflater.inflate(R.layout.fm_one, container,false);
rg_ = (RadioGroup) view.findViewById(R.id.one_rg);
vp_ = (ViewPager) view.findViewById(R.id.one_view);
hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv);
//設(shè)置RadioGroup點擊事件
rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int id) {
vp_.setCurrentItem(id);
}
}
//初始化頂部導(dǎo)航欄
initTab(inflater);
//初始化viewpager
initView();
}
/**
* 底部導(dǎo)航欄切換后 由于沒有銷毀頂部設(shè)置導(dǎo)致如果沒有重新設(shè)置view
* 導(dǎo)致底部切換后切回頂部頁面數(shù)據(jù)會消失等bug
* 以下設(shè)置每次重新創(chuàng)建view即可
*/
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null) {
parent.removeView(view);
}
return view;
}
/***
* 初始化viewpager
*/
private void initView() {
List<HTab> hTabs = HTabDb.getSelected();
for (int i = 0; i < hTabs.size(); i++) {
OneFm1 fm1 = new OneFm1();
Bundle bundle = new Bundle();
bundle.putString("name", hTabs.get(i).getName());
fm1.setArguments(bundle);
newsList.add(fm1);
}
//設(shè)置viewpager適配器
adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);
vp_.setAdapter(adapter);
//兩個viewpager切換不重新加載
vp_.setOffscreenPageLimit(2);
//設(shè)置默認(rèn)
vp_.setCurrentItem(0);
//設(shè)置viewpager監(jiān)聽事件
vp_.setOnPageChangeListener(this);
}
/***
* 初始化頭部導(dǎo)航欄
* @param inflater
*/
private void initTab(LayoutInflater inflater) {
List<HTab> hTabs = HTabDb.getSelected();
for (int i = 0; i < hTabs.size(); i++) {
//設(shè)置頭部項布局初始化數(shù)據(jù)
RadioButton rbButton = (RadioButton) inflater.inflate(R.layout.tab_rb, null);
rbButton.setId(i);
rbButton.setText(hTabs.get(i).getName());
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
//加入RadioGroup
rg_.addView(rbButton,params);
}
//默認(rèn)點擊
rg_.check(0);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int id) {
setTab(id);
}
/***
* 頁面跳轉(zhuǎn)切換頭部偏移設(shè)置
* @param id
*/
private void setTab(int id) {
RadioButton rbButton = (RadioButton) rg_.getChildAt(id);
//設(shè)置標(biāo)題被點擊
rbButton.setChecked(true);
//偏移設(shè)置
int left = rbButton.getLeft();
int width = rbButton.getMeasuredWidth();
DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
int screenWidth = metrics.widthPixels;
//移動距離= 左邊的位置 + button寬度的一半 - 屏幕寬度的一半
int len = left + width / 2 - screenWidth / 2;
//移動
hv_.smoothScrollTo(len, 0);
}
}
其中有兩個數(shù)據(jù)類和一個碎片類
數(shù)據(jù)類
HTab.java
package com.gjn.mynavigation;
/***
* 頭部Tab屬性
*
*/
public class HTab {
private String name;
public HTab(String name) {
super();
this.setName(name);
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
HTabDb.java
package com.gjn.mynavigation;
import java.util.ArrayList;
import java.util.List;
public class HTabDb {
private static final List<HTab> Selected = new ArrayList<HTab>();
static{
Selected.add(new HTab("今日"));
Selected.add(new HTab("頭條"));
Selected.add(new HTab("娛樂"));
Selected.add(new HTab("財經(jīng)"));
Selected.add(new HTab("軍事"));
Selected.add(new HTab("科技"));
Selected.add(new HTab("時尚"));
Selected.add(new HTab("體育"));
}
/***
* 獲得頭部tab的所有項
*/
public static List<HTab> getSelected() {
return Selected;
}
}
碎片類
OneFm1.java
package com.gjn.mynavigation;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class OneFm1 extends Fragment {
private String name;
@Override
public void setArguments(Bundle args) {
name = args.getString("name");
}
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment, container,false);
((TextView) view.findViewById(R.id.fm_text)).setText(name);
return view;
}
}
這樣就把頂部的導(dǎo)航欄加入到了第一個fragment里面并且實現(xiàn)了切換功能
最后把fragment.xml貼下，就是每個碎片最默認(rèn)的顯示頁面
<?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:gravity="center" android:orientation="vertical" > <TextView android:id="@+id/fm_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android實現(xiàn)底部導(dǎo)航欄功能
- Android程序開發(fā)之Fragment實現(xiàn)底部導(dǎo)航欄實例代碼
- Android實現(xiàn)底部導(dǎo)航欄功能（選項卡）
- Android中TabLayout+ViewPager 簡單實現(xiàn)app底部Tab導(dǎo)航欄
- Android design包自定義tablayout的底部導(dǎo)航欄的實現(xiàn)方法
- android中Fragment+RadioButton實現(xiàn)底部導(dǎo)航欄
- Android實現(xiàn)簡單底部導(dǎo)航欄 Android仿微信滑動切換效果
- 性能分析:指如何快速定位SQL問題
- Android用Scroller實現(xiàn)一個可向上滑動的底部導(dǎo)航欄
- 使用RadioButton+Fragment實現(xiàn)底部導(dǎo)航欄效果
相關(guān)文章
Android Studio 下 Flutter 開發(fā)環(huán)境搭建過程
這篇文章主要介紹了Android Studio 下 Flutter 開發(fā)環(huán)境搭建/Flutter / Dart 插件安裝 | Flutter SDK 安裝 | 環(huán)境變量配置 | 開發(fā)環(huán)境檢查,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了Android QQ新用戶注冊界面繪制代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Android開發(fā)之模仿微信打開網(wǎng)頁的進(jìn)度條效果(高仿)
這篇文章主要介紹了Android開發(fā)之模仿微信打開網(wǎng)頁的進(jìn)度條效果(高仿)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
本篇文章是對如何在ScrollView中嵌套ListView的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了Android如何實現(xiàn)NFC讀取卡片信息問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹Android 逆向?qū)W習(xí)，這里整理逆向?qū)W習(xí)的思路及學(xué)習(xí)要點，并附示例代碼，幫助大家學(xué)習(xí)理解，有需要的小伙伴可以參考下2016-09-09
android studio 使用adb 命令傳遞文件到android 設(shè)備的方法
這篇文章主要介紹了android studio 使用adb 命令傳遞文件到android 設(shè)備的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Android中socket通信的簡單實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要為大家詳細(xì)介紹了Android 第三方登錄、分享，分別使用sharesdk和友盟來實現(xiàn),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)斷點下載的方法，感興趣的小伙伴們可以參考一下2016-03-03