问题
I have 5 tabs in all. This is how I am adding them :
for (int i = 0; i < tabs.length; i++) {
if (i == 0) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.activity)
.setTabListener(this));
} else if (i == 1) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.group)
.setTabListener(this));
} else if (i == 2) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.message)
.setTabListener(this));
} else if(i == 3){
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.notification)
.setTabListener(this));
}
else
{
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.hamburger)
.setTabListener(this));
}
I tried this solution but this sets the width of the tab icon and not the tab itself.
Following are the styles I have applied :
App theme :
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarTabStyle">@style/actionBarTabBarStyle</item>
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<style name="actionBarTabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
<item name="android:paddingLeft">1dp</item>
<item name="android:paddingRight">1dp</item>
<item name="android:minWidth">10dp</item>
<item name="android:maxWidth">15dp</item>
<item name="android:showDividers">none</item>
</style>
I also tried using customView for the tab but it didn't work.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabItemLayout"
android:gravity="center"
android:layout_width="wrap_content" android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:id="@+id/imageViewTab" />
</LinearLayout>
The tabs are too wide and the tabBar is sliding. How can I make the tabs take dynamic width as per the screen width without the sliding effect. i.e. all tabs should fit in the screen width and should be of equal width.
There are 4 tabs visible here. The tabBar is scrollable so the fifth tab appears on scrolling which I don't want.
回答1:
Tab view width is based on content/yourImage size, so to make tab view width smaller, we have to control the content/Image size. You can do this by putting ImageView inside FrameLayout, for example your customView can be:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabItemLayout"
android:gravity="center"
android:layout_width="wrap_content" android:layout_height="match_parent">
<FrameLayout
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:gravity="center"
android:id="@+id/imageViewTab" />
</FrameLayout>
</RelativeLayout>
and custom style for tab:
<style name="AppTheme" parent="@style/Theme.AppCompat.Light">
... ...
<item name="actionBarTabStyle">@style/ActionBarTabStyle</item>
</style>
<style name="ActionBarTabStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
[SCREENSHOT]
For FrameLayout size with 24dp:
For FrameLayout size with 40dp
回答2:
As you're trying to achieve tabs on Actionbar which fits to width of device, one can use PagerSlidingTabStrip or SlidingTabLayout which gives you more flexibility in achieving tabs and its related Fragment with ViewPager which gives your Uix more efficient and user friendly touch.
Here I'm showing how to achieve it using PagerSlidingTabStrip
PagerSlidingTabStrip.java : Your Custom Tab View
public class PagerSlidingTabStrip extends HorizontalScrollView {
public interface IconTabProvider {
public int getPageIconResId(int position);
}
// @formatter:off
private static final int[] ATTRS = new int[] { android.R.attr.textSize,
android.R.attr.textColor };
// @formatter:on
private LinearLayout.LayoutParams defaultTabLayoutParams;
private LinearLayout.LayoutParams expandedTabLayoutParams;
private final PageListener pageListener = new PageListener();
public OnPageChangeListener delegatePageListener;
private LinearLayout tabsContainer;
private ViewPager pager;
private int tabCount;
private int currentPosition = 0;
private float currentPositionOffset = 0f;
private Paint rectPaint;
private Paint dividerPaint;
private int currentPageSelected = 0; // Fix : ICON SELECTOR
private int indicatorColor = 0xFF666666;
private int underlineColor = 0x1A000000;
private int dividerColor = 0x1A000000;
private boolean shouldExpand = false;
private boolean textAllCaps = true;
private int scrollOffset = 52;
private int indicatorHeight = 8;
private int underlineHeight = 2;
private int dividerPadding = 12;
private int tabPadding = 24;
private int dividerWidth = 1;
private int tabTextSize = 12;
private int tabTextColor = 0xFF666666;
private Typeface tabTypeface = null;
private int tabTypefaceStyle = Typeface.BOLD;
private int lastScrollX = 0;
private int tabBackgroundResId = R.drawable.background_tab;
private Locale locale;
public PagerSlidingTabStrip(Context context) {
this(context, null);
}
public PagerSlidingTabStrip(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PagerSlidingTabStrip(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
setFillViewport(true);
setWillNotDraw(false);
tabsContainer = new LinearLayout(context);
tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
tabsContainer.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
addView(tabsContainer);
DisplayMetrics dm = getResources().getDisplayMetrics();
scrollOffset = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
indicatorHeight = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
underlineHeight = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
dividerPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
tabPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
dividerWidth = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
tabTextSize = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
// get system attrs (android:textSize and android:textColor)
TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);
tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
tabTextColor = a.getColor(1, tabTextColor);
a.recycle();
// get custom attrs
a = context.obtainStyledAttributes(attrs,
R.styleable.PagerSlidingTabStrip);
indicatorColor = a.getColor(
R.styleable.PagerSlidingTabStrip_pstsIndicatorColor,
indicatorColor);
underlineColor = a.getColor(
R.styleable.PagerSlidingTabStrip_pstsUnderlineColor,
underlineColor);
dividerColor = a
.getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor,
dividerColor);
indicatorHeight = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight,
indicatorHeight);
underlineHeight = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight,
underlineHeight);
dividerPadding = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_pstsDividerPadding,
dividerPadding);
tabPadding = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight,
tabPadding);
tabBackgroundResId = a.getResourceId(
R.styleable.PagerSlidingTabStrip_pstsTabBackground,
tabBackgroundResId);
shouldExpand = a
.getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand,
shouldExpand);
scrollOffset = a
.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_pstsScrollOffset,
scrollOffset);
textAllCaps = a.getBoolean(
R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);
a.recycle();
rectPaint = new Paint();
rectPaint.setAntiAlias(true);
rectPaint.setStyle(Style.FILL);
dividerPaint = new Paint();
dividerPaint.setAntiAlias(true);
dividerPaint.setStrokeWidth(dividerWidth);
defaultTabLayoutParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
expandedTabLayoutParams = new LinearLayout.LayoutParams(0,
LayoutParams.MATCH_PARENT, 1.0f);
if (locale == null) {
locale = getResources().getConfiguration().locale;
}
}
public void setViewPager(ViewPager pager) {
this.pager = pager;
if (pager.getAdapter() == null) {
throw new IllegalStateException(
"ViewPager does not have adapter instance.");
}
pager.setOnPageChangeListener(pageListener);
notifyDataSetChanged();
}
public void setOnPageChangeListener(OnPageChangeListener listener) {
this.delegatePageListener = listener;
}
public void notifyDataSetChanged() {
tabsContainer.removeAllViews();
tabCount = pager.getAdapter().getCount();
for (int i = 0; i < tabCount; i++) {
if (pager.getAdapter() instanceof IconTabProvider) {
addIconTab(i,
((IconTabProvider) pager.getAdapter())
.getPageIconResId(i));
} else {
addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
}
}
updateTabStyles();
getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
@SuppressWarnings("deprecation")
@SuppressLint("NewApi")
@Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
getViewTreeObserver().removeGlobalOnLayoutListener(
this);
} else {
getViewTreeObserver().removeOnGlobalLayoutListener(
this);
}
currentPosition = pager.getCurrentItem();
tabsContainer.getChildAt(currentPosition).setSelected(
true);// Fix : ICON SELECTOR
scrollToChild(currentPosition, 0);
}
});
}
private void addTextTab(final int position, String title) {
TextView tab = new TextView(getContext());
tab.setText(title);
tab.setGravity(Gravity.CENTER);
tab.setSingleLine();
addTab(position, tab);
}
private void addIconTab(final int position, int resId) {
ImageButton tab = new ImageButton(getContext());
tab.setImageResource(resId);
addTab(position, tab);
}
private void addTab(final int position, View tab) {
tab.setFocusable(true);
tab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
pager.setCurrentItem(position);
}
});
tab.setPadding(tabPadding, 0, tabPadding, 0);
tabsContainer
.addView(tab, position, shouldExpand ? expandedTabLayoutParams
: defaultTabLayoutParams);
}
private void updateTabStyles() {
for (int i = 0; i < tabCount; i++) {
View v = tabsContainer.getChildAt(i);
v.setBackgroundResource(tabBackgroundResId);
if (v instanceof TextView) {
TextView tab = (TextView) v;
tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
tab.setTypeface(tabTypeface, tabTypefaceStyle);
tab.setTextColor(tabTextColor);
// setAllCaps() is only available from API 14, so the upper case
// is made manually if we are on a
// pre-ICS-build
if (textAllCaps) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
tab.setAllCaps(true);
} else {
tab.setText(tab.getText().toString()
.toUpperCase(locale));
}
}
}
}
}
private void scrollToChild(int position, int offset) {
if (tabCount == 0) {
return;
}
int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;
if (position > 0 || offset > 0) {
newScrollX -= scrollOffset;
}
if (newScrollX != lastScrollX) {
lastScrollX = newScrollX;
scrollTo(newScrollX, 0);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isInEditMode() || tabCount == 0) {
return;
}
final int height = getHeight();
// draw indicator line
rectPaint.setColor(indicatorColor);
// default: line below current tab
View currentTab = tabsContainer.getChildAt(currentPosition);
float lineLeft = currentTab.getLeft();
float lineRight = currentTab.getRight();
// if there is an offset, start interpolating left and right coordinates
// between current and next tab
if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
View nextTab = tabsContainer.getChildAt(currentPosition + 1);
final float nextTabLeft = nextTab.getLeft();
final float nextTabRight = nextTab.getRight();
lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset)
* lineLeft);
lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset)
* lineRight);
}
//SU TU002
canvas.drawRect(lineLeft, height - indicatorHeight, lineRight,height,
rectPaint);
// canvas.drawRect(lineLeft, 0, lineRight, indicatorHeight, rectPaint);
// EU TU002
// draw underline
rectPaint.setColor(underlineColor);
//SU TU002
canvas.drawRect(0, height - underlineHeight,tabsContainer.getWidth(),
height, rectPaint);
// canvas.drawRect(0, 0, tabsContainer.getWidth(), underlineHeight,
// rectPaint);
// EU TU002
// draw divider
dividerPaint.setColor(dividerColor);
for (int i = 0; i < tabCount - 1; i++) {
View tab = tabsContainer.getChildAt(i);
canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
height - dividerPadding, dividerPaint);
}
}
private class PageListener implements OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
currentPosition = position;
currentPositionOffset = positionOffset;
scrollToChild(position, (int) (positionOffset * tabsContainer
.getChildAt(position).getWidth()));
invalidate();
if (delegatePageListener != null) {
delegatePageListener.onPageScrolled(position, positionOffset,
positionOffsetPixels);
}
}
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_IDLE) {
scrollToChild(pager.getCurrentItem(), 0);
}
if (delegatePageListener != null) {
delegatePageListener.onPageScrollStateChanged(state);
}
}
@Override
public void onPageSelected(int position) {
/**
* Fix : ICON SELECTOR
*/
tabsContainer.getChildAt(currentPageSelected).setSelected(false);
currentPageSelected = position;
tabsContainer.getChildAt(position).setSelected(true);
/**
* Fix : ICON SELECTOR
*/
if (delegatePageListener != null) {
delegatePageListener.onPageSelected(position);
}
}
}
public void setIndicatorColor(int indicatorColor) {
this.indicatorColor = indicatorColor;
invalidate();
}
public void setIndicatorColorResource(int resId) {
this.indicatorColor = getResources().getColor(resId);
invalidate();
}
public int getIndicatorColor() {
return this.indicatorColor;
}
public void setIndicatorHeight(int indicatorLineHeightPx) {
this.indicatorHeight = indicatorLineHeightPx;
invalidate();
}
public int getIndicatorHeight() {
return indicatorHeight;
}
public void setUnderlineColor(int underlineColor) {
this.underlineColor = underlineColor;
invalidate();
}
public void setUnderlineColorResource(int resId) {
this.underlineColor = getResources().getColor(resId);
invalidate();
}
public int getUnderlineColor() {
return underlineColor;
}
public void setDividerColor(int dividerColor) {
this.dividerColor = dividerColor;
invalidate();
}
public void setDividerColorResource(int resId) {
this.dividerColor = getResources().getColor(resId);
invalidate();
}
public int getDividerColor() {
return dividerColor;
}
public void setUnderlineHeight(int underlineHeightPx) {
this.underlineHeight = underlineHeightPx;
invalidate();
}
public int getUnderlineHeight() {
return underlineHeight;
}
public void setDividerPadding(int dividerPaddingPx) {
this.dividerPadding = dividerPaddingPx;
invalidate();
}
public int getDividerPadding() {
return dividerPadding;
}
public void setScrollOffset(int scrollOffsetPx) {
this.scrollOffset = scrollOffsetPx;
invalidate();
}
public int getScrollOffset() {
return scrollOffset;
}
public void setShouldExpand(boolean shouldExpand) {
this.shouldExpand = shouldExpand;
requestLayout();
}
public boolean getShouldExpand() {
return shouldExpand;
}
public boolean isTextAllCaps() {
return textAllCaps;
}
public void setAllCaps(boolean textAllCaps) {
this.textAllCaps = textAllCaps;
}
public void setTextSize(int textSizePx) {
this.tabTextSize = textSizePx;
updateTabStyles();
}
public int getTextSize() {
return tabTextSize;
}
public void setTextColor(int textColor) {
this.tabTextColor = textColor;
updateTabStyles();
}
public void setTextColorResource(int resId) {
this.tabTextColor = getResources().getColor(resId);
updateTabStyles();
}
public int getTextColor() {
return tabTextColor;
}
public void setTypeface(Typeface typeface, int style) {
this.tabTypeface = typeface;
this.tabTypefaceStyle = style;
updateTabStyles();
}
public void setTabBackground(int resId) {
this.tabBackgroundResId = resId;
}
public int getTabBackground() {
return tabBackgroundResId;
}
public void setTabPaddingLeftRight(int paddingPx) {
this.tabPadding = paddingPx;
updateTabStyles();
}
public int getTabPaddingLeftRight() {
return tabPadding;
}
@Override
public void onRestoreInstanceState(Parcelable state) {
SavedState savedState = (SavedState) state;
super.onRestoreInstanceState(savedState.getSuperState());
currentPosition = savedState.currentPosition;
requestLayout();
}
@Override
public Parcelable onSaveInstanceState() {
Parcelable superState = super.onSaveInstanceState();
SavedState savedState = new SavedState(superState);
savedState.currentPosition = currentPosition;
return savedState;
}
static class SavedState extends BaseSavedState {
int currentPosition;
public SavedState(Parcelable superState) {
super(superState);
}
private SavedState(Parcel in) {
super(in);
currentPosition = in.readInt();
}
@Override
public void writeToParcel(Parcel dest, int flags) {
super.writeToParcel(dest, flags);
dest.writeInt(currentPosition);
}
public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
@Override
public SavedState createFromParcel(Parcel in) {
return new SavedState(in);
}
@Override
public SavedState[] newArray(int size) {
return new SavedState[size];
}
};
}
}
Your Activity Layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.application.ui.view.PagerSlidingTabStrip
android:id="@+id/pager_sliding_tab_strip"
android:layout_width="fill_parent"
android:layout_height="48dip"
android:layout_alignParentTop="true"
android:background="@drawable/background_tabs"
app:pstsIndicatorColor="@color/background_actionbar"
app:pstsTabPaddingLeftRight="14dip" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</RelativeLayout>
</RelativeLayout>
Your Activity :
public class MotherActivity extends ActionBarActivity {
public static final String TAG = MotherActivity.class.getSimpleName();
private ViewPager mPager;
private PagerSlidingTabStrip mPagerSlidingTabStrp;
private ViewPager.SimpleOnPageChangeListener ViewPagerListener;
private ActionBar mActionBar;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mother);
initUi();
setPagerSlidingTabStrip();
}
private void initUi() {
mPager = (ViewPager) findViewById(R.id.pager);
mPagerSlidingTabStrp = (PagerSlidingTabStrip) findViewById(R.id.pager_sliding_tab_strip);
}
private void setPagerSlidingTabStrip() {
ViewPagerAdapter viewpageradapter = new ViewPagerAdapter(
getSupportFragmentManager());
mPager.setOffscreenPageLimit(5);
mPager.setAdapter(viewpageradapter);
mPagerSlidingTabStrp.setShouldExpand(true);
mPagerSlidingTabStrp.setViewPager(mPager);
}
}
ViewPagerAdapter : which passes fragment on tab selection or swiping it. Pass on Fragment and drawables in here.
public class ViewPagerAdapter extends FragmentPagerAdapter implements
IconTabProvider {
final int PAGE_COUNT = 5;
private final int[] ICONS = { R.drawable.tab_icon_feed_home_selector,
R.drawable.tab_icon_feed_friends_selector, R.drawable.tab_icon_feed_popular_selector,
R.drawable.tab_icon_feed_report_selector, R.drawable.tab_icon_feed_report_selector };
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int item) {
switch (item) {
case 0:
FragmentAttendance fragmentAttendance = new FragmentAttendance();
return fragmentAttendance;
case 1:
FragmentPremium fragmentPremium = new FragmentPremium();
return fragmentPremium;
case 2:
FragmentLead fragmentLead = new FragmentLead();
return fragmentLead;
case 3:
FragmentLead fragmentLead = new FragmentLead();
return fragmentLead;
case 4:
FragmentLead fragmentLead = new FragmentLead();
return fragmentLead;
}
return null;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return PAGE_COUNT;
}
@Override
public int getPageIconResId(int position) {
// TODO Auto-generated method stub
return ICONS[position];
}
}
回答3:
Use the following code for changing the size of tab and making tabs fit within the screenwidth. Make sure your are using the Custom View
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int screenWidth = displaymetrics.widthPixels;
final View tabView = actionBar.getTabAt(0).getCustomView();
final View tabContainerView = (View) tabView.getParent();
final int tabPadding = tabContainerView.getPaddingLeft() + tabContainerView.getPaddingRight();
final int tabs = actionBar.getTabCount();
for(int i=0 ; i < tabs ; i++) {
View tab = actionBar.getTabAt(i).getCustomView();
LinearLayout tabItemLayout = (LinearLayout) tab.findViewById(R.id.tabItemLayout);
tabItemLayout.setLayoutParams(new LayoutParams(screenWidth/tabs-tabPadding-1, LayoutParams.WRAP_CONTENT));
}
来源：https://stackoverflow.com/questions/29339797/actionbar-tabs-set-dynamic-width-according-to-screen-width