FragmentTabHost實現底部導航欄和頂部滑動導航
阿新 • • 發佈：2019-01-31
一、實現底部導航欄效果《類似於RadioGroup》
①MainActivity的xml佈局
②MainActivity的程式碼<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/rl_title" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/colorPrimary" > <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="檔案管理" android:textColor="@color/white" android:textSize="18sp" /> </RelativeLayout> <RelativeLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/tablayout" android:layout_below="@+id/rl_title" /> <android.support.v4.app.FragmentTabHost android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/light_gray"> <FrameLayout android:id="@+id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> </android.support.v4.app.FragmentTabHost> </RelativeLayout>
import android.support.v4.app.ActivityCompat; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.support.v4.content.ContextCompat; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TabHost.TabSpec; import android.widget.TextView; import com.dcg.blueocean.R; public class FileManageActivity extends FragmentActivity{ private FragmentTabHost tabLayout; private LayoutInflater layoutInflater; //導航欄需要關聯的fragment private Class fragmentArray[] = { NearestFragment.class, FileFragment.class, PhotoFragment.class }; //導航欄顯示的文字 private String[] titles = { "最近", "檔案", "照片" }; //導航欄顯示的小圖示，可用select樣式實現選中效果 private int[] icons = { R.drawable.tab_lately, R.drawable.tab_file, R.drawable.tab_picture }; //標題欄 private TextView tv_title; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_file_manager); initView(); initTab(); } private void initView() { tabLayout = (FragmentTabHost) findViewById(R.id.tablayout); layoutInflater = LayoutInflater.from(this); tv_title = (TextView) findViewById(R.id.tv_title); } private void initTab() { tabLayout.setup(this, getSupportFragmentManager(), R.id.container); for (int i = 0; i < titles.length; i++) { // 為每一個Tab按鈕設定圖示、文字和內容 TabSpec tabSpec = tabLayout.newTabSpec(titles[i]).setIndicator(getTabItemView(i)); // 將Tab按鈕新增進Tab選項卡中 tabLayout.addTab(tabSpec, fragmentArray[i], null); } } /** * 給Tab按鈕設定圖示和文字 */ private View getTabItemView(int index) { View view = layoutInflater.inflate(R.layout.tab_item, null); ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon); imageView.setImageResource(icons[index]); TextView textView = (TextView) view.findViewById(R.id.tab_name); textView.setText(titles[index]); return view; } }
③tab_item佈局
④圖片選擇器的樣式，這裡示範其中一個<?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="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/tab_icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_gravity="center_horizontal" android:src="@drawable/tab_ic_file" /> <TextView android:id="@+id/tab_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="檔案" android:textColor="@color/tab_text" android:textSize="12sp" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_ic_recent_selected" android:state_selected="true" />
<item android:drawable="@drawable/tab_ic_recent" />
</selector>import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class NearestFragment extends Fragment {
// 快取Fragment view,防止來回切換重複載入fragment，非必須寫法
private View rootView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (rootView == null) {
rootView = inflater.inflate(R.layout.fragment_nearest, container, false);
}
// 快取的viewiew需要判斷是否已經被加過parent，如果有parent需要從parent刪除，要不然會發生這個view已經有parent的錯誤。
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null) {
parent.removeView(rootView);
}
initView(rootView);
return rootView;
}
private void initView(View view) {
//初始化佈局
}
//可防止fragment重疊，如果出現來回切換導航欄多個fragment重疊可如下重寫該方法
@Override
public void setMenuVisibility(boolean menuVisible) {
super.setMenuVisibility(menuVisible);
if (this.getView() != null) {
this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
}
}
}
二、FragmentTabHost+viewpager實現頂部滑動導航
①、MainActivity的佈局xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/tab_widget_bg"/>
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
②MainActivity的程式碼
public class MainActivity extends FragmentActivity implements OnTabChangeListener,OnPageChangeListener{
private LayoutInflater myInflater;
private FragmentTabHost tabLayout;
private ViewPager vp;
private FileAdapter adapter;
private static final String[] IDS = {"frag_1", "frag_2", "frag_3", "frag_4", "frag_5"};
private List<String> ids = Arrays.asList(IDS);
private String[] titles = {"全部", "文件", "圖片", "視訊", "音樂"};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
myInflater=inflater;
View view = inflater.inflate(R.layout.fragment_file, container, false);
uid=SharePreferencesOperate.getInstance().ReadStringFromPreferences(getActivity(), "uid");
initView(view);
return view;
}
private void initView(View view) {
List<Fragment> list = new ArrayList<Fragment>(IDS.length);
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的檔案").concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的圖片").concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的視訊")));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的音樂").concat(File.separator)));
tabLayout = (FragmentTabHost) view.findViewById(android.R.id.tabhost);
tabLayout.setup(MainActivity.this, getChildFragmentManager(),android.R.id.tabcontent);
for (int i = 0; i < IDS.length; i++) {
tabLayout.addTab(tabLayout.newTabSpec(IDS[i]).setIndicator(createTabView(titles[i])),Fragment.class, null);
}
tabLayout.setOnTabChangedListener(this);
vp = (ViewPager) view.findViewById(R.id.main_viewpager);
adapter = new FileAdapter(list, getSupportFragmentManager());
vp.setAdapter(adapter);
vp.setOnPageChangeListener(this);
}
/**
* 建立tab View
*/
private View createTabView(String text) {
View tabView = myInflater.inflate(R.layout.file_tab, null);
TextView textView = (TextView) tabView.findViewById(R.id.tab_text);
textView.setText(text);
return tabView;
}
@Override
public void onTabChanged(String tabId) {
int position = ids.indexOf(tabId);
vp.setCurrentItem(position);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
tabLayout.setCurrentTab(arg0);
}
}<?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"
android:background="@drawable/state_tabs_bg" >
<TextView
android:id="@+id/tab_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="@color/tab_widget_text"/>
</LinearLayout><?xml version="1.0" encoding="utf-8"?>
<!-- tab每個標籤背景 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/tabs_selected_bg" />
<item android:drawable="@drawable/tabs_normal_bg"></item>
</selector><?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#1b58b1" />
</shape>
</item>
<item android:bottom="3dp">
<shape>
<solid android:color="#eeeeee" />
</shape>
</item>
</layer-list><?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#00000000" />
</shape>
</item>
<item android:bottom="1dp">
<shape>
<solid android:color="#eeeeee" />
</shape>
</item>
</layer-list>⑥tab_widget_text
<?xml version="1.0" encoding="utf-8"?>
<!-- 標籤頁tab 文字切換顏色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#1b58b1"/>
<item android:color="#9d9d9d"/>
</selector>package com.dcg.blueocean.ui.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by Gu on 2017/8/14.
*/
public class FileAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
public FileAdapter(List<Fragment> fragmentList, FragmentManager fm) {
super(fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList != null ? fragmentList.size() : 0;
}
}
程式碼是從專案裡面摘出來的，可能有些凌亂，諒解諒解。