Android使用(TabLayout+ViewPager+fragment)與(FragmentTabHost+ViewPager+Fragment)實現底部
Android開發過程當中，特別是新開的項目，底部狀態欄的切換使用的頻率很是的高，主要的實現方式有： (1)、TabLayout + Fragment (2)、FragmentTabHost + Fragment (3)、BottomNavigationView + Fragment (4)、RidioGroup + Fragmentjava
這裏我先介紹前面兩種實現方式，後面兩種後期再貼出實現方式。android
1、使用TabLayout + Fragment + ViewPager實現bash
一、實現步驟： (1)、佈局文件中定義TabLayout控件 (2)、定義切換的每一個Fragment佈局文件 (3)、定義切換的每一個Fragment的Java類 (4)、定義TabLayoutMainActivity類 (5)、效果圖演示app
二、實現過程：ide
(1)、佈局文件中定義TabLayout控件(activity_main.xml)佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.showly.bottomnavigationbardemo.TabLayoutMainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_content_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_view"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FB8081"
app:tabTextColor="#A0A0A0" />
</LinearLayout>
複製代碼
(2)、定義切換的每一個Fragment佈局文件(fragment_frist.xml)學習
這裏有四個Tab類別(首頁、娛樂、遊戲、個人)，佈局都相似，這裏只貼出其中一個ui
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="首頁"
android:textColor="#000"/>
</RelativeLayout>
複製代碼
(3)、定義切換的每一個Fragment的Java類(FristFragment.class)this
這裏的Java 類實現方式也類似，貼出其中一個spa
package com.showly.bottomnavigationbardemo.fragment;
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 com.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_frist, null);
return view;
}
}
複製代碼
(4)、定義TabLayoutMainActivity類(TabLayoutMainActivity.class)
package com.showly.bottomnavigationbardemo;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment;
import com.showly.bottomnavigationbardemo.fragment.FristFragment;
import com.showly.bottomnavigationbardemo.fragment.SecondFragment;
import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment;
public class TabLayoutMainActivity extends AppCompatActivity {
//未選中的Tab圖片
private int[] unSelectTabRes = new int[]{R.drawable.i8live_menu_home_normal
, R.drawable.i8live_menu_information_normal, R.drawable.i8live_menu_game_normal, R.drawable.i8live_menu_personl_normal};
//選中的Tab圖片
private int[] selectTabRes = new int[]{R.drawable.i8live_menu_home_press, R.drawable.i8live_menu_information_press
, R.drawable.i8live_menu_game_press, R.drawable.i8live_menu_personl_press};
//Tab標題
private String[] title = new String[]{"首頁", "娛樂", "遊戲", "個人"};
private ViewPager viewPager;
private TabLayout tabLayout;
private TabLayout.Tab tabAtOne;
private TabLayout.Tab tabAttwo;
private TabLayout.Tab tabAtthree;
private TabLayout.Tab tabAtfour;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();//隱藏掉整個ActionBar
setContentView(R.layout.activity_main);
initView();
initData();
initListener();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager_content_view);
tabLayout = (TabLayout) findViewById(R.id.tab_layout_view);
//使用適配器將ViewPager與Fragment綁定在一塊兒
viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
//將TabLayout與ViewPager綁定
tabLayout.setupWithViewPager(viewPager);
/* //設置方式一：
//獲取底部的單個Tab
tabAtOne = tabLayout.getTabAt(0);
tabAttwo = tabLayout.getTabAt(1);
tabAtthree = tabLayout.getTabAt(2);
tabAtfour = tabLayout.getTabAt(3);
//設置Tab圖片
tabAtOne.setIcon(R.drawable.i8live_menu_home_press);
tabAttwo.setIcon(R.drawable.i8live_menu_information_normal);
tabAtthree.setIcon(R.drawable.i8live_menu_game_normal);
tabAtfour.setIcon(R.drawable.i8live_menu_personl_normal);*/
//設置方式二：
for (int i = 0; i < title.length; i++) {
if (i == 0) {
tabLayout.getTabAt(0).setIcon(selectTabRes[0]);
} else {
tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]);
}
}
}
private void initData() {
}
private void initListener() {
//TabLayout切換時導航欄圖片處理
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {//選中圖片操做
for (int i = 0; i < title.length; i++) {
if (tab == tabLayout.getTabAt(i)) {
tabLayout.getTabAt(i).setIcon(selectTabRes[i]);
viewPager.setCurrentItem(i);
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {//未選中圖片操做
for (int i = 0; i < title.length; i++) {
if (tab == tabLayout.getTabAt(i)) {
tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]);
}
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
//自定義適配器
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new SecondFragment();//娛樂
} else if (position == 2) {
return new ThirtlyFragment();//遊戲
} else if (position == 3) {
return new FourthlyFragment();//個人
}
return new FristFragment();//首頁
}
@Override
public int getCount() {
return title.length;
}
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}
}
複製代碼
(5)、效果圖演示
2、使用FragmentTabHost+ Fragment + ViewPager實現
一、實現步驟： (1)、佈局文件中定義FragmentTabHost控件 (2)、定義底部菜單欄佈局 (3)、定義切換的每一個Fragment佈局文件 (4)、定義切換的每一個Fragment的Java類 (5)、切換按鈕的圖片 (6)、定義FragmentTabHostMainActivity類 (7)、效果圖演示
二、實現過程：
(1)、佈局文件中定義FragmentTabHost控件(fragment_tabhost_activity.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="#fff"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:background="#3000"
android:layout_height="65dp">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
複製代碼
(2)、定義底部菜單欄佈局(tab_content.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:padding="2dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/i8live_menu_home_normal" />
<TextView
android:id="@+id/tv_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="首頁" />
</LinearLayout>
複製代碼
(3)、定義切換的每一個Fragment佈局文件(fragment_frist.xml) 這裏有四個Tab類別(首頁、娛樂、遊戲、個人)，佈局都相似，這裏只貼出其中一個
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="首頁"
android:textColor="#000"/>
</RelativeLayout>
複製代碼
(4)、定義切換的每一個Fragment的Java類(FristFragment.class)
這裏的Java 類實現方式也類似，貼出其中一個
package com.showly.bottomnavigationbardemo.fragment;
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 com.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_frist, null);
return view;
}
}
複製代碼
(5)、切換按鈕的圖片(tab_main.xml) 這裏有四個是類似的，只貼出其中一個
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 切換選中以後的圖片-->
<item android:drawable="@drawable/i8live_menu_home_press" android:state_selected="true"/>
<!-- 未選中的圖片-->
<item android:drawable="@drawable/i8live_menu_home_normal"/>
</selector
複製代碼
(6)、定義FragmentTabHostMainActivity類（FragmentTabHostMainActivity.class）
package com.showly.bottomnavigationbardemo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment;
import com.showly.bottomnavigationbardemo.fragment.FristFragment;
import com.showly.bottomnavigationbardemo.fragment.SecondFragment;
import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment;
import java.util.ArrayList;
import java.util.List;
public class FragmentTabHostMainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, TabHost.OnTabChangeListener {
private int[] selectTabRes = new int[]{R.drawable.tab_main, R.drawable.tab_infomation
, R.drawable.tab_game, R.drawable.tab_personal};
//Tab標題
private String[] title = new String[]{"首頁", "娛樂", "遊戲", "個人"};
private Class fragmentArry[] = {FristFragment.class, SecondFragment.class, ThirtlyFragment.class, FourthlyFragment.class};
private List<Fragment> fragmentList = new ArrayList();
private ViewPager viewPager;
private FragmentTabHost tabHost;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tabhost_activity);
initView();
initData();
initListener();
}
/**
* 初始化Fragment並給ViewPager添加適配器
*/
private void initVaper() {
FristFragment fristFragment = new FristFragment();
SecondFragment secondFragment = new SecondFragment();
ThirtlyFragment thirtlyFragment = new ThirtlyFragment();
FourthlyFragment fourthlyFragment = new FourthlyFragment();
fragmentList.add(fristFragment);
fragmentList.add(secondFragment);
fragmentList.add(thirtlyFragment);
fragmentList.add(fourthlyFragment);
//ViewPager添加適配器
viewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), fragmentList));
tabHost.getTabWidget().setDividerDrawable(null);
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.vp_pager);
tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);//綁定tabhost
tabHost.setup(this, getSupportFragmentManager(), R.id.vp_pager);//TabHost綁定viewpager
//獲取item的個數
int count = title.length;
for (int i = 0; i < count; i++) {
//設置每一個TabHost佈局
TabHost.TabSpec tabSpec = tabHost.newTabSpec(title[i])
.setIndicator(getTabItemView(i));
//item與fragment關聯
tabHost.addTab(tabSpec, fragmentArry[i], null);
tabHost.setTag(i);
}
//初始化TabHost文字顏色
upDateTab(tabHost);
//給ViewPager設置適配器
initVaper();
}
/**
* 更新文字顏色。
*
* @param mTabHost
*/
private void upDateTab(FragmentTabHost mTabHost) {
for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
TextView tv = (TextView) mTabHost.getTabWidget().getChildAt(i).findViewById(R.id.tv_item);
if (mTabHost.getCurrentTab() == i) {//選中
tv.setTextColor(Color.parseColor("#FF5959"));
} else {//不選中
tv.setTextColor(Color.parseColor("#777777"));
}
}
}
/**
* 設置每一個Item佈局
*/
private View getTabItemView(int i) {
View view = LayoutInflater.from(this).inflate(R.layout.tab_content, null);
ImageView itemImg = (ImageView) view.findViewById(R.id.iv_imageview);
TextView itemText = (TextView) view.findViewById(R.id.tv_item);
itemImg.setBackgroundResource(selectTabRes[i]);
itemText.setText(title[i]);
return view;
}
private void initData() {
}
private void initListener() {
viewPager.addOnPageChangeListener(this);
tabHost.setOnTabChangedListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
TabWidget widget = tabHost.getTabWidget();
int oldFocusability = widget.getDescendantFocusability();
widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);//設置View覆蓋子類控件而直接得到焦點
tabHost.setCurrentTab(position);//根據位置Postion設置當前的Tab
widget.setDescendantFocusability(oldFocusability);//設置取消分割線
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onTabChanged(String tabId) {
int position = tabHost.getCurrentTab();
viewPager.setCurrentItem(position);//把選中的Tab的位置賦給適配器，讓它控制頁面切換
upDateTab(tabHost);//設置TabHost文字顏色
}
/**
* 適配器
* */
public class MyFragmentAdapter extends FragmentPagerAdapter {
List<Fragment> list;
public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
}
複製代碼
(7)、效果圖演示
3、總結 這兩種方式的實現已完成，實現起來相對仍是比較簡單的，後期有時間會把後面兩種的實現方式補上。 Demo代碼地址：底部公衆號回覆"底部狀態欄切換"便可獲取。
如下是我的公衆號(longxuanzhigu)，以後發佈的文章會同步到該公衆號，方便交流學習Android知識及分享我的愛好文章：
相關文章
- 1. Android用BottomNavigationBar實現底部導航欄
- 2. android 用Radio實現的底部導航
- 3. 底部導航欄：利用viewpager實現Android底部標題欄
- 4. 使用RecyclerView實現底部翻頁
- 5. Android--------使用BottomTabBar實現底部導航頁
- 6. Android使用CoordinatorLayout和BottomSheetBehavior實現滑動效果(底部抽屜)
- 7. Android Studio 使用BottomNavigationView 實現底部 tabs (一)
- 8. Android使用(TabLayout+ViewPager+fragment)與(FragmentTabHost+ViewPager+Fragment)實現底部狀態欄切換
- 9. 【Android UI設計與開發】5.底部菜單欄（二）使用Fragment實現底部菜單欄
- 10. Android 實現QQ聊天底部+號顯示底部菜單
- 更多相關文章...
- • ionic 頭部與底部 - ionic 教程
- • ionic 頭部和底部 - ionic 教程
- • Composer 安裝與使用
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android用BottomNavigationBar實現底部導航欄
- 2. android 用Radio實現的底部導航
- 3. 底部導航欄：利用viewpager實現Android底部標題欄
- 4. 使用RecyclerView實現底部翻頁
- 5. Android--------使用BottomTabBar實現底部導航頁
- 6. Android使用CoordinatorLayout和BottomSheetBehavior實現滑動效果(底部抽屜)
- 7. Android Studio 使用BottomNavigationView 實現底部 tabs (一)
- 8. Android使用(TabLayout+ViewPager+fragment)與(FragmentTabHost+ViewPager+Fragment)實現底部狀態欄切換
- 9. 【Android UI設計與開發】5.底部菜單欄（二）使用Fragment實現底部菜單欄
- 10. Android 實現QQ聊天底部+號顯示底部菜單