底部導(dǎo)航欄我選擇用FragmentTabHost+Fragment來(lái)實(shí)現(xiàn)，這個(gè)方法比較好用，代碼量也不多
首先是開(kāi)始的activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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文件里面寫(xiě)
|
1
2
|
<android.support.v4.view.FragmentTabHost > </android.support.v4.view.FragmentTabHost> |
這xml文件就一個(gè)view加一個(gè)tab view用來(lái)顯示碎片，tab用來(lái)放置底部按鈕的數(shù)量
再來(lái)是tab_foot.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?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="首頁(yè)" android:textColor="@color/tab_color" /> </LinearLayout> |
這是每個(gè)底部按鈕的布局設(shè)置的xml文件
再來(lái)是MainActivity的代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
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)聽(tīng)事件 mTabHost.setOnTabChangedListener(this); } @Override public void onTabChanged(String arg0) { //從分割線中獲得多少個(gè)切換界面 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類是用來(lái)設(shè)置導(dǎo)航欄的數(shù)據(jù)和圖片切換時(shí)候的資源
以下是TabDb類
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
package com.gjn.mynavigation; public class TabDb { /*** * 獲得底部所有項(xiàng) */ public static String[] getTabsTxt() { String[] tabs = {"首頁(yè)","交易","地點(diǎn)","我的"}; return tabs; } /*** * 獲得所有碎片 */ public static Class[] getFramgent(){ Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class}; return cls ; } /*** * 獲得所有點(diǎn)擊前的圖片 */ public static int[] getTabsImg(){ int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1}; return img ; } /*** * 獲得所有點(diǎn)擊后的圖片 */ public static int[] getTabsImgLight(){ int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2}; return img ; } } |
到此，底部導(dǎo)航欄就算是完全實(shí)現(xiàn)了。
現(xiàn)在來(lái)實(shí)現(xiàn)頂部導(dǎo)航欄，看了許多最后使用了RadioGroup+ViewPager來(lái)實(shí)現(xiàn)
首先是為第一個(gè)碎片設(shè)計(jì)一個(gè)xml布局：fm_one.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?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)航欄的每個(gè)項(xiàng)的布局
tab_rb.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?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文件來(lái)控制點(diǎn)擊和未點(diǎn)擊的狀態(tài)
tab_rb_selector.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 點(diǎn)擊 --> <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è)置了點(diǎn)擊和默認(rèn)的時(shí)候的顯示狀態(tài)
最后來(lái)實(shí)現(xiàn)OneFm類
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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點(diǎn)擊事件 rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int id) { vp_.setCurrentItem(id); } } //初始化頂部導(dǎo)航欄 initTab(inflater); //初始化viewpager initView(); } /** * 底部導(dǎo)航欄切換后 由于沒(méi)有銷毀頂部設(shè)置導(dǎo)致如果沒(méi)有重新設(shè)置view * 導(dǎo)致底部切換后切回頂部頁(yè)面數(shù)據(jù)會(huì)消失等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); //兩個(gè)viewpager切換不重新加載 vp_.setOffscreenPageLimit(2); //設(shè)置默認(rèn) vp_.setCurrentItem(0); //設(shè)置viewpager監(jiān)聽(tīng)事件 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è)置頭部項(xiàng)布局初始化數(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)點(diǎ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); } /*** * 頁(yè)面跳轉(zhuǎn)切換頭部偏移設(shè)置 * @param id */ private void setTab(int id) { RadioButton rbButton = (RadioButton) rg_.getChildAt(id); //設(shè)置標(biāo)題被點(diǎn)擊 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; //移動(dòng)距離= 左邊的位置 + button寬度的一半 - 屏幕寬度的一半 int len = left + width / 2 - screenWidth / 2; //移動(dòng) hv_.smoothScrollTo(len, 0); } } |
其中有兩個(gè)數(shù)據(jù)類和一個(gè)碎片類
數(shù)據(jù)類
HTab.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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("娛樂(lè)")); Selected.add(new HTab("財(cái)經(jīng)")); Selected.add(new HTab("軍事")); Selected.add(new HTab("科技")); Selected.add(new HTab("時(shí)尚")); Selected.add(new HTab("體育")); } /*** * 獲得頭部tab的所有項(xiàng) */ public static List<HTab> getSelected() { return Selected; } } |
碎片類
OneFm1.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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)航欄加入到了第一個(gè)fragment里面并且實(shí)現(xiàn)了切換功能
最后把fragment.xml貼下，就是每個(gè)碎片最默認(rèn)的顯示頁(yè)面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?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> |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/son_king/article/details/80783500
