版权声明：
本文参考“Android开发技巧——实现底部图标文字的导航栏”一文，地址为：http://blog.csdn.net/maosidiaoxian/article/details/38864679
基础知识：
1) Fragment是在Android 3.0(API 11)版本引入的，如果使用的是3.0之前的系统，需要先导入android-support-v4的jar包才能使用Fragment功能。
实现思路：
1) 先定义两个接口：
IconPagerAdapter
public interface IconPagerAdapter {
int getIconResId(int index);
int getCount();
}
PageIndicator
import android.support.v4.view.ViewPager;
public interface PageIndicator extends ViewPager.OnPageChangeListener {
void setViewPager(ViewPager view);
void setViewPager(ViewPager view, int initialPosition);
void setCurrentItem(int item);
void setOnPageChangeListener(ViewPager.OnPageChangeListener listener);
void notifyDataSetChanged();
}
2) 新建一个类IconTabPageIndicator，继承LinearLayout并实现PageIndicator接口：
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.localbuyapp.R;
import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
/**
* User: Geek_Soledad([email protected])
* Date: 2014-08-27
* Time: 09:20
* FIXME
*/
public class IconTabPageIndicator extends LinearLayout implements PageIndicator {
/**
* Title text used when no title is provided by the adapter.
*/
private static final CharSequence EMPTY_TITLE = "";
/**
* Interface for a callback when the selected tab has been reselected.
*/
public interface OnTabReselectedListener {
/**
* Callback when the selected tab has been reselected.
*
* @param position Position of the current center item.
*/
void onTabReselected(int position);
}
private Runnable mTabSelector;
private final View.OnClickListener mTabClickListener = new View.OnClickListener() {
public void onClick(View view) {
TabView tabView = (TabView) view;
final int oldSelected = mViewPager.getCurrentItem();
final int newSelected = tabView.getIndex();
mViewPager.setCurrentItem(newSelected);
if (oldSelected == newSelected && mTabReselectedListener != null) {
mTabReselectedListener.onTabReselected(newSelected);
}
}
};
private final LinearLayout mTabLayout;
private ViewPager mViewPager;
private ViewPager.OnPageChangeListener mListener;
private int mSelectedTabIndex;
private OnTabReselectedListener mTabReselectedListener;
private int mTabWidth;
public IconTabPageIndicator(Context context) {
this(context, null);
}
public IconTabPageIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setHorizontalScrollBarEnabled(false);
mTabLayout = new LinearLayout(context, null, R.attr.tabPageIndicator);
addView(mTabLayout, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
}
public void setOnTabReselectedListener(OnTabReselectedListener listener) {
mTabReselectedListener = listener;
}
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int widthMode = View.MeasureSpec.getMode(widthMeasureSpec);
final boolean lockedExpanded = widthMode == View.MeasureSpec.EXACTLY;
final int childCount = mTabLayout.getChildCount();
if (childCount > 1 && (widthMode == MeasureSpec.EXACTLY || widthMode == MeasureSpec.AT_MOST)) {
mTabWidth = MeasureSpec.getSize(widthMeasureSpec) / childCount;
} else {
mTabWidth = -1;
}
final int oldWidth = getMeasuredWidth();
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int newWidth = getMeasuredWidth();
if (lockedExpanded && oldWidth != newWidth) {
// Recenter the tab display if we‘re at a new (scrollable) size.
setCurrentItem(mSelectedTabIndex);
}
}
private void animateToTab(final int position) {
final View tabView = mTabLayout.getChildAt(position);
if (mTabSelector != null) {
removeCallbacks(mTabSelector);
}
mTabSelector = new Runnable() {
public void run() {
final int scrollPos = tabView.getLeft() - (getWidth() - tabView.getWidth()) / 2;
mTabSelector = null;
}
};
post(mTabSelector);
}
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
if (mTabSelector != null) {
// Re-post the selector we saved
post(mTabSelector);
}
}
@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mTabSelector != null) {
removeCallbacks(mTabSelector);
}
}
private void addTab(int index, CharSequence text, int iconResId) {
final TabView tabView = new TabView(getContext());
tabView.mIndex = index;
tabView.setOnClickListener(mTabClickListener);
tabView.setText(text);
if (iconResId > 0) {
tabView.setIcon(iconResId);
}
mTabLayout.addView(tabView, new LinearLayout.LayoutParams(0, MATCH_PARENT, 1));
}
@Override
public void onPageScrollStateChanged(int arg0) {
if (mListener != null) {
mListener.onPageScrollStateChanged(arg0);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
if (mListener != null) {
mListener.onPageScrolled(arg0, arg1, arg2);
}
}
@Override
public void onPageSelected(int arg0) {
setCurrentItem(arg0);
if (mListener != null) {
mListener.onPageSelected(arg0);
}
}
@Override
public void setViewPager(ViewPager view) {
if (mViewPager == view) {
return;
}
if (mViewPager != null) {
mViewPager.setOnPageChangeListener(null);
}
final PagerAdapter adapter = view.getAdapter();
if (adapter == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mViewPager = view;
view.setOnPageChangeListener(this);
notifyDataSetChanged();
}
public void notifyDataSetChanged() {
mTabLayout.removeAllViews();
PagerAdapter adapter = mViewPager.getAdapter();
IconPagerAdapter iconAdapter = null;
if (adapter instanceof IconPagerAdapter) {
iconAdapter = (IconPagerAdapter) adapter;
}
final int count = adapter.getCount();
for (int i = 0; i < count; i++) {
CharSequence title = adapter.getPageTitle(i);
if (title == null) {
title = EMPTY_TITLE;
}
int iconResId = 0;
if (iconAdapter != null) {
iconResId = iconAdapter.getIconResId(i);
}
addTab(i, title, iconResId);
}
if (mSelectedTabIndex > count) {
mSelectedTabIndex = count - 1;
}
setCurrentItem(mSelectedTabIndex);
requestLayout();
}
@Override
public void setViewPager(ViewPager view, int initialPosition) {
setViewPager(view);
setCurrentItem(initialPosition);
}
@Override
public void setCurrentItem(int item) {
if (mViewPager == null) {
throw new IllegalStateException("ViewPager has not been bound.");
}
mSelectedTabIndex = item;
mViewPager.setCurrentItem(item);
final int tabCount = mTabLayout.getChildCount();
for (int i = 0; i < tabCount; i++) {
final View child = mTabLayout.getChildAt(i);
final boolean isSelected = (i == item);
child.setSelected(isSelected);
if (isSelected) {
animateToTab(item);
}
}
}
/**
* For fragment slide
*/
@Override
public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
mListener = listener;
}
private class TabView extends LinearLayout {
private int mIndex;
private ImageView mImageView;
private TextView mTextView;
public TabView(Context context) {
super(context, null, R.attr.tabView);
View view = View.inflate(context, R.layout.tab_view, null);
mImageView = (ImageView) view.findViewById(R.id.tab_image);
mTextView = (TextView) view.findViewById(R.id.tab_text);
// this.addView(view);
this.addView(view, MATCH_PARENT, MATCH_PARENT);
}
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// Re-measure if we went beyond our maximum size.
if (mTabWidth > 0) {
super.onMeasure(MeasureSpec.makeMeasureSpec(mTabWidth, MeasureSpec.EXACTLY),
heightMeasureSpec);
}
}
public void setText(CharSequence text) {
mTextView.setText(text);
}
public void setIcon(int resId) {
if (resId > 0) {
mImageView.setImageResource(resId);
}
}
public int getIndex() {
return mIndex;
}
}
}
这里内部类TabView直接使用布局文件来实现(tab_view.xml代码这里未贴出)。
3) 在Activity中使用IconTabPageIndicator(直接包含在Activity的布局文件中)：
<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=".MyActivity">
<xxx.IconTabPageIndicator
android:id="@+id/indicator"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:layout_above="@id/indicator"
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
import android.app.ActionBar;
import android.content.Intent;
import android.os.Bundle;
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.view.ViewPager;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.ViewConfiguration;
import android.widget.SearchView;
import android.widget.SearchView.OnQueryTextListener;
import android.widget.ShareActionProvider;
import android.widget.Toast;
import com.xxx.R;
import com.viewpagerindicator.IconPagerAdapter;
import com.viewpagerindicator.IconTabPageIndicator;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends FragmentActivity{
// Debugging
private static final String TAG = "MainActivity";
private static final boolean D = true;
// Member fields
private ViewPager mViewPager;
private IconTabPageIndicator mIndicator;
private FragmentPagerAdapter mAdapter;
private List<BaseFragment> mFragments = new ArrayList<BaseFragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 隐藏ActionBar
ActionBar actionBar = getActionBar();
actionBar.hide();
// 控件初始化
initViews();
}
private void initViews() {
// 实例化ViewPager
mViewPager = (ViewPager) findViewById(R.id.view_pager);
// 实例化TabPageIndicator
mIndicator = (IconTabPageIndicator) findViewById(R.id.indicator);
// 初始化Fragments
mFragments = initFragments();
// 实例化FragmentPageAdapter
mAdapter = new FragmentAdapter(mFragments, getSupportFragmentManager());
// ViewPager的adapter，使得fragments与ViewPager关联
mViewPager.setAdapter(mAdapter);
// 设置ViewPager与TabPageIndicator关联
mIndicator.setViewPager(mViewPager);
}
private List<BaseFragment> initFragments() {
List<BaseFragment> fragments = new ArrayList<BaseFragment>();
// 添加Fragments到存放Fragment的List
IndexFragment indexFragment = new IndexFragment();
indexFragment.setTitle("首页");
indexFragment.setIconId(R.drawable.tab_user_selector);
fragments.add(indexFragment);
NearbyFragment nearbyFragment = new NearbyFragment();
nearbyFragment.setTitle("附近");
nearbyFragment.setIconId(R.drawable.tab_record_selector);
fragments.add(nearbyFragment);
MyinfoFragment myFragment = new MyinfoFragment();
myFragment.setTitle("我的");
myFragment.setIconId(R.drawable.tab_user_selector);
fragments.add(myFragment);
return fragments;
}
class FragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
private List<BaseFragment> mFragments;
public FragmentAdapter(List<BaseFragment> fragments, FragmentManager fm) {
super(fm);
mFragments = fragments;
}
@Override
public Fragment getItem(int i) {
return mFragments.get(i);
}
@Override
public int getIconResId(int index) {
return mFragments.get(index).getIconId();
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragments.get(position).getTitle();
}
}
}
4) 可以看到MainActivity中，与ViewPager关联的Fragment List不是Fragment类型的，而是BaseFragment(继承自Fragment)，是因为
BaseFragment需要多加两个属性title和iconId，title对应TabView的文字，iconId对应TabView的图片索引：
import com.xxx.R;
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;
/**
* User: Geek_Soledad([email protected])
* Date: 2014-08-27
* Time: 09:01
* FIXME
*/
public class BaseFragment extends Fragment {
private String title;
private int iconId;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public int getIconId() {
return iconId;
}
public void setIconId(int iconId) {
this.iconId = iconId;
}
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment, null, false);
TextView textView = (TextView) view.findViewById(R.id.text);
textView.setText(getTitle());
return view;
}
}
5) 再定义每个ViewPager对应的Fragment(继承自BaseFragment)，如：
import android.content.Intent;
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.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
/**
* User: Jay([email protected])
* Date: 2015-01-29
* Time: 11:40
* Notes: Extentable fragments: Fragment/DialogFragment/ListFragment/PreferenceFragment
* FIXME
*/
public class IndexFragment extends BaseFragment {
// Member field
private Button btn_index_test;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_index, null, false);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
Button btn_index_test = (Button) getActivity().findViewById(R.id.btn_index_test);
btn_index_test.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
TextView textView = (TextView) getActivity().findViewById(R.id.text_index_hint);
Toast.makeText(getActivity(), textView.getText(), Toast.LENGTH_LONG).show();
}
});
}
}
其对应的布局文件fragment_index.xml：
<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:gravity="center_horizontal"
android:background="#eee"
tools:context=".MainActivity">
<TextView
android:id="@+id/text_index_hint"
android:textAppearance="@android:style/TextAppearance.Large"
android:text="Index Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/btn_index_test"
android:layout_below="@id/text_index_hint"
android:layout_alignRight="@id/text_index_hint"
android:paddingTop="10dp"
android:text="index test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
时间： 2024-08-11 05:35:11