Android實現頂部底部雙導航介面功能

最近想弄一個雙導航功能，查看了許多資料，總算是實現了功能，這邊就算是給自己幾個筆記吧！

先來看看效果

那麼就開始實現了！

底部導航欄我選擇用FragmentTabHost+Fragment來實現，這個方法我覺得挺好用的，程式碼量也不多

首先是開始的activity_main.xml

12345678910111213141516171819202122232425

android:layout_width="match_parent"android:layout_height="match_parent"tools:context="${relativePackage}.${activityClass}"

><FrameLayoutandroid: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><viewandroid: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>

其中我是直接拉的view所以是形成的FragmentTabHost

也可以直接在xml檔案裡面寫
<android.support.v4.view.FragmentTabHost >
< /android.support.v4.view.FragmentTabHost>

這xml檔案就一個view加一個tab view用來顯示碎片，tab用來放置底部按鈕的數量

再來是tab_foot.xml

1234567891011121314151617181920212223 <?xml version="1.0" encoding="utf-8"?>android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F6F6F6"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/foot_iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/home1" /><TextViewandroid: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>

這是每個底部按鈕的佈局設定的xml檔案

顯示效果。

再來是MainActivity的程式碼

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);//初始化FragmentTabHostinitHost();//初始化底部導航欄initTab();//預設選中mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);}private void initTab() {String[] tabs = TabDb.getTabsTxt();for (int i = 0; i < tabs.length; i++) {//新建TabSpecTabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()[i]);//設定viewView view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, );((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);//加入TabSpecmTabHost.addTab(tabSpec,TabDb.getFramgent()[i],);}}/**** 初始化Host*/private void initHost() {mTabHost = (FragmentTabHost) findViewById(R.id.main_tab);//呼叫setup方法設定viewmTabHost.setup(this, getSupportFragmentManager(),R.id.main_view);//去除分割線mTabHost.getTabWidget().setDividerDrawable();//監聽事件mTabHost.setOnTabChangedListener(this);}@Overridepublic 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);//修改當前的介面按鈕顏色圖片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類是用來設定導航欄的資料和圖片切換時候的資源
以下是TabDb類

1234567891011121314151617181920212223242526272829303132 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 ;}}

到此，底部導航欄就算是完全實現了。

————————————————————————————————————————–

現在來實現頂部導航欄，看了許多最後使用了RadioGroup+ViewPager來實現

首先是為第一個碎片設計一個xml佈局

fm_one.xml

12345678910111213141516171819202122232425262728 <?xml version="1.0" encoding="utf-8"?>android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><HorizontalScrollViewandroid:id="@+id/one_hv"android:layout_width="match_parent"android:layout_height="wrap_content"android:scrollbars="none" ><RadioGroupandroid:id="@+id/one_rg"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal" ></RadioGroup></HorizontalScrollView><viewandroid:id="@+id/one_view"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"class="android.support.v4.view.ViewPager" /></LinearLayout>

設定頂部導航欄和顯示view
之後吧導航欄的每個項的佈局

tab_rb.xml

123456789101112 <?xml version="1.0" encoding="utf-8"?>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>

其中設定selector檔案來控制點選和未點選的狀態

tab_rb_selector.xml

123456789101112131415161718192021222324 <?xml version="1.0" encoding="utf-8"?><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><item ><shape ><solid android:color="#fafafa"/></shape></item></selector>

設定了點選和預設的時候的顯示狀態
最後來實現OneFm類

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135

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;@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {if (view == ) {//初始化viewview = 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);//設定RadioGroup點選事件rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int id) {vp_.setCurrentItem(id);}});//初始化頂部導航欄initTab(inflater);//初始化viewpagerinitView();}/** 底部導航欄切換後由於沒有銷燬頂部設定導致如果沒有重新設定view* 導致底部切換後切回頂部頁面資料會消失等bug* 以下設定每次重新建立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);}//設定viewpager介面卡adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);vp_.setAdapter(adapter);//兩個viewpager切換不重新載入vp_.setOffscreenPageLimit(2);//設定預設vp_.setCurrentItem(0);//設定viewpager監聽事件vp_.setOnPageChangeListener(this);}/**** 初始化頭部導航欄* @param inflater*/private void initTab(LayoutInflater inflater) {List<HTab> hTabs = HTabDb.getSelected();for (int i = 0; i < hTabs.size(); i++) {//設定頭部項佈局初始化資料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);//加入RadioGrouprg_.addView(rbButton,params);}//預設點選

Android實現頂部底部雙導航介面功能

Android實現頂部底部雙導航介面功能

android介面設計筆記（二）實現頂部底部二級導航欄

android自定義底部Tab導航UI，專案整體介面框架

Android ViewPager和Fragment實現仿微信導航介面及滑動效果

android實現異網雙卡雙待識別運營商網路

Android 實現視訊聊天1對1功能

android實現頂部弧形背景

android實現炫酷水波紋介面

Android實現拍照相簿圖片上傳功能

Android實現從底部彈出Dialog(和PopWindow實現的效果一樣)

android 實現城市選擇、聯絡人等功能的易拓展 RecyclerView 庫，包含自動索引，粘性等功能

Android 實現自動更新及強制更新功能

Android 實現記住使用者名稱和密碼的功能

android-----------實現微信登入和分享功能。

Android實現從底部彈出的Dialog

android實現頂部滑動列表

【隨記】JQuery實現表格的雙擊編輯功能(自動適應表格高度和寬度)

Android實現頂部輪播圖

Android實現朋友圈全文/收起的功能

Android開發丶底部導航欄的主介面實現

Android實現頂部底部雙導航介面功能

相關推薦