一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術|正則表達式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務器之家 - 編程語言 - Android - 使用Fragment+ViewPager實現底部導航欄

使用Fragment+ViewPager實現底部導航欄

2022-03-03 14:48crazy_yyyyy Android

這篇文章主要為大家詳細介紹了使用Fragment+ViewPager實現底部導航欄,具有一定的參考價值,感興趣的小伙伴們可以參考一下

前幾天準備寫一個小程序,一直認為fragment實現底部導航欄,是很容易的事情,可是卻遇到了前所未有的問題,先給大家貼出來我出錯的界面布局代碼:

?
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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@color/theme_color"
 android:clipToPadding="true"
 android:fitsSystemWindows="true" >
 
 <include
  android:id="@+id/actionbar_activity_main"
  layout="@layout/actionbar" />
 
 <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_below="@id/actionbar_activity_main"
  android:background="@color/white" >
 
  <RadioGroup
   android:id="@+id/rg_menu_activity_main"
   android:layout_width="fill_parent"
   android:layout_height="55dp"
   android:layout_alignParentBottom="true"
   android:background="@color/theme_color"
   android:gravity="center"
   android:orientation="horizontal"
   android:weightSum="3" >
 
   <RadioButton
    android:id="@+id/rb_main_tab_menu1"
    style="@style/rbt_bottom"
    android:checked="true"
    android:drawableTop="@drawable/radiobt_main_home"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/home_text"
    android:textColor="@color/white" />
 
   <RadioButton
    android:id="@+id/rb_main_tab_menu2"
    style="@style/rbt_bottom"
    android:checked="false"
    android:drawableTop="@drawable/radiobt_main_my"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/my_text"
    android:textColor="@color/white" />
 
   <RadioButton
    android:id="@+id/rb_main_tab_menu3"
    style="@style/rbt_bottom"
    android:checked="false"
    android:drawableTop="@drawable/radiobt_main_setting"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/setting_text"
    android:textColor="@color/white" />
  </RadioGroup>
 
  <android.support.v4.view.ViewPager
   android:id="@+id/vp_activity_main"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_above="@id/rg_menu_activity_main" />
 </RelativeLayout>
 
</RelativeLayout>

這個布局實現的效果如下:

使用Fragment+ViewPager實現底部導航欄

只看效果,大家覺得挺好的,但是重要的問題來了。

下面的radioButton點了沒反應,我檢查了一下xml文件,再檢查了一下java代碼,沒有問題啊,我開始方了,,,然后網上搜,好像沒有人遇到這個問題,,檢查好幾遍之后,問旁邊的同學,他說 既然設置了監聽,但是沒有反應,那肯定是有一個東西把這個事件消費掉了,我想起來了之前看的事件分發機制,,建議大家對事件分發機制不懂的小伙伴趕緊看看,面試和日常寫代碼都要用到,特別是面試,面試官特別喜歡問。

回歸正題,大家看我的 xml文件,我把viewpager寫在了Radiogroup的下面,并且,layout_height = "fill_parent"     這樣我的viewpager就消費掉了我的radiobutton的點擊事件,其實之后我覺得,是我的邏輯不正確,我應該順序的寫下來,而不是只實現功能,這樣我看自己的代碼可以看懂,可是給別人可能會造成誤解。

好了,開始說一下,實現底部導航的整個流程,實現的界面還如上:(在studio中寫的)

actionbar.xml  上面自定義的 actionbar  系統自帶的actionbar在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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="@dimen/actionBar_height"
 android:background="@color/theme_color"
 >
 <RelativeLayout
  android:id="@+id/rl_back_actionbar"
  android:layout_width="@dimen/actionBar_back"
  android:layout_height="fill_parent"
  android:visibility="invisible">
  <ImageView
   android:layout_width="22dp"
   android:layout_height="20dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="12dp"
   android:background="@drawable/back"
   android:contentDescription="@string/app_name"/>
 </RelativeLayout>
 <TextView
  android:id="@+id/tv_title_actionbar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="@string/TimeRobot"
  android:textColor="#ffffff"
  android:textSize="@dimen/actionBar_title_text_size"
  />
 <RelativeLayout
  android:id="@+id/rl_more_actionbar"
  android:layout_width="wrap_content"
  android:layout_height="fill_parent"
  android:layout_alignParentRight="true"
  android:visibility="invisible">
  <ImageView
   android:layout_width="25dp"
   android:layout_height="25dp"
   android:layout_centerVertical="true"
   android:layout_marginRight="12dp"
   android:background="@drawable/more"
   android:contentDescription="@string/app_name"/>
 </RelativeLayout>
 
 
</RelativeLayout>

activity_main.xml 文件 
中間的部分color資源,是我引用的自動的,大家可以自己選擇

?
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
<?xml version="1.0" encoding="utf-8"?>
<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"
 android:background="@color/theme_color"
 android:clipToPadding="true"
 tools:context=".MainActivity">
 <!-- 引入 actionbar-->
 <include
  android:id="@+id/actionbar_activity_main"
  layout= "@layout/actionbar"/>
 <android.support.v4.view.ViewPager
  android:id="@+id/vp_activity_main"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_below="@+id/actionbar_activity_main"
  android:layout_alignParentRight="true"
  android:layout_alignParentEnd="true"
  android:background="@color/white"/>
 
  <RadioGroup
   android:id="@+id/rg_main_radioGroup"
   android:layout_width="fill_parent"
   android:layout_height="58dp"
   android:layout_alignParentBottom="true"
   android:background="@color/theme_color"
   android:gravity="center"
   android:orientation="horizontal"
   android:weightSum="3">
   <RadioButton
    android:id="@+id/rb_main_tab_menu1"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="true"
    android:drawableTop="@drawable/radio_bt_plan"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:text="@string/home_text"
    android:textColor="@color/white"/>
   <RadioButton
    android:id="@+id/rb_main_tab_menu2"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="false"
    android:drawableTop="@drawable/radio_bt_time"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:text="@string/timeGroup"
    android:textColor="@color/white"/>
   <RadioButton
    android:id="@+id/rb_main_tab_menu3"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="false"
    android:drawableTop="@drawable/radio_bt_my"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:textColor="@color/white"
    android:text="@string/My"/>
  </RadioGroup>
</RelativeLayout>

注意一下,radiobutton中的一個屬性是  drawableTop屬性, 這個后面引用的drawable資源是 實現 點擊改變radiobutton狀態的布局文件,我給大家貼出來 radio_bt_plan.xml文件的代碼,其他的只要新建,copy代碼,改顯示的圖片即可。
還有,對于初次用studio的伙伴,這里要注意了,new的時候,drawable --->右鍵  ---->  new ----> new resource file (即 出來的第一個) 而不是XML

radio_bt_plan.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/planning_press"
  android:state_enabled="true"
  android:state_focused="true"
  android:state_pressed="false"/>
 <item android:drawable="@drawable/planning_press"
  android:state_enabled="true"
  android:state_pressed="true"
  />
 <item android:drawable="@drawable/planning_press"
  android:state_checked="true"
  android:state_enabled="true"
  />
 <item android:drawable="@drawable/planning"/>
 
</selector>

接下來就是  MainActivity.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
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
public class MainActivity extends FragmentActivity {
 private TextView title_text;
 private ViewPager vp_main_tab;
 private List<Fragment> fragmentList = null;
 private FragmentPagerAdapter mAdapter = null;
 
 private MyFragment myFragment;
 private TimeGroupFragment timeGroupFragment;
 private PlanningFragment planningFragment;
 
 private RadioButton rb_main_tab_menu1;
 private RadioButton rb_main_tab_menu2;
 private RadioButton rb_main_tab_menu3;
 private RadioGroup rg_main_group;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  init();
  rg_main_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
 
   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) {
    switch (checkedId) {
     case R.id.rb_main_tab_menu1:
      vp_main_tab.setCurrentItem(0);
      initActionbar(0);
      break;
     case R.id.rb_main_tab_menu2:
      vp_main_tab.setCurrentItem(1);
      initActionbar(1);
      break;
     case R.id.rb_main_tab_menu3:
      vp_main_tab.setCurrentItem(2);
      initActionbar(2);
      break;
     default:
      break;
    }
 
   }
  });
  initViewPage();
 }
 private void initActionbar(int currentPage) {
  switch (currentPage) {
   case 0:
    title_text.setText(getResources().getString(R.string.TimeRobot));
    break;
   case 1:
    title_text.setText(getResources().getString(R.string.timeGroup));
    break;
   case 2:
    title_text.setText(getResources().getString(R.string.My));
    break;
   default:
    break;
  }
 }
 private void init() {
  title_text = (TextView) findViewById(R.id.tv_title_actionbar);
  vp_main_tab = (ViewPager) findViewById(R.id.vp_activity_main);
  fragmentList = new ArrayList<Fragment>();
  rg_main_group = (RadioGroup) findViewById(R.id.rg_main_radioGroup);
  rb_main_tab_menu1 = (RadioButton) findViewById(R.id.rb_main_tab_menu1);
  rb_main_tab_menu2 = (RadioButton) findViewById(R.id.rb_main_tab_menu2);
  rb_main_tab_menu3 = (RadioButton) findViewById(R.id.rb_main_tab_menu3);
 
  myFragment = new MyFragment();
  timeGroupFragment = new TimeGroupFragment();
  planningFragment = new PlanningFragment();
 
  fragmentList.add(myFragment);
  fragmentList.add(timeGroupFragment);
  fragmentList.add(planningFragment);
 
 
 }
 
 private void initViewPage() {
  android.support.v4.app.FragmentManager fm = getSupportFragmentManager();
  mAdapter = new FragmentPagerAdapter(fm) {
 
   @Override
   public int getCount() {
    return fragmentList == null ? 0 : fragmentList.size();
   }
 
   @Override
   public android.support.v4.app.Fragment getItem(int position) {
    return fragmentList.get(position);
   }
  };
  vp_main_tab.setAdapter(mAdapter);
  vp_main_tab.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 
   @Override
   public void onPageSelected(int position) {
    initActionbar(position);
    switch (position) {
     case 0:
      rb_main_tab_menu1.setChecked(true);
      break;
     case 1:
      rb_main_tab_menu2.setChecked(true);
      break;
     case 2:
      rb_main_tab_menu3.setChecked(true);
      break;
     default:
      break;
    }
   }
 
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
   }
 
   @Override
   public void onPageScrollStateChanged(int state) {
   }
  });
 }
}

這就是整個是實現經過,如有什么不足的地方,還請多多指教;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。

原文鏈接:https://blog.csdn.net/crazy_yyyyy/article/details/51407897

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 国产一级在线观看 | 亚洲免费黄色网 | 美女精品永久福利在线 | 精品一区二区免费视频蜜桃网 | 俄罗斯美女毛茸茸bbwbbw | 人人爽人人看 | 操破苍穹全文阅读 | 日韩视频免费 | 91麻豆精品激情在线观看最新 | 欧美日韩国产超高清免费看片 | 国产精品不卡高清在线观看 | 思思91精品国产综合在线 | 日本mv精品中文字幕 | 十八女下面流水不遮免费 | 亚洲国产精品牛在线 | 国产午夜精品不卡视频 | 亚洲va久久久噜噜噜久久狠狠 | 天天干天天色综合网 | 精品久久伦理中文字幕 | 手机看片福利盒子久久 | 欧美一级片免费看 | 日韩亚洲人成在线综合 | 日产2021免费一二三四区 | 四虎影视在线观看2413 | 边摸边吃奶边做爽视频免费 | 5x社区发源地最新地址 | 日本精a在线观看 | 国产90后美女露脸在线观看 | 亚飞与亚基国语1080p在线观看 | 女人张开腿让男人做爽爽 | 九九精品视频在线免费观看 | 成年女人毛片免费观看97 | 国产特级毛片aaaaaa | 亚洲成a人不卡在线观看 | 国产短视频精品一区二区三区 | 午夜久久免影院欧洲 | 91久久福利国产成人精品 | 免费看片黄 | 91视频国产在线 | 色男人的天堂久久综合 | 成人影院在线观看视频 |