2015-04-11 2 views
0

Я создал набор скользящих вкладок с пейджером представления, чтобы вставить в свой Activity_main.xml. В проекте вкладки отображаются ниже панели действий, как будто они разделены.Android Studio - Раздвижные вкладки отображаются под панелью действий, а не на панели действий.

Я хотел бы, чтобы они выглядели так, как будто они являются частью панели действий.

Что я должен изменить в своем коде для этого?

Project Screenshot

MainActivity.java

package com.davidreadiii.android.slidingtabexample; 

import android.os.Bundle; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.ActionBarActivity; 
import android.view.Menu; 
import android.view.MenuItem; 

import com.davidreadiii.android.slidingtabexample.tabs.mFragmentPagerAdapter; 
import com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout; 


public class MainActivity extends ActionBarActivity { 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    // Get the ViewPager and set it's PagerAdapter so that it can display items 
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); 
    viewPager.setAdapter(new mFragmentPagerAdapter(getSupportFragmentManager(), 
      MainActivity.this)); 

    // Give the SlidingTabLayout the ViewPager 
    SlidingTabLayout slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs); 
    // Center the tabs in the layout 
    slidingTabLayout.setDistributeEvenly(true); 
    slidingTabLayout.setViewPager(viewPager); 

    // Customizes the tab indicator color. 
    slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() { 
     @Override 
     public int getIndicatorColor(int position) { 
      return getResources().getColor(R.color.accentColor); 
     } 
    }); 
} 


@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
    // Inflate the menu; this adds items to the action bar if it is present. 
    getMenuInflater().inflate(R.menu.menu_main, menu); 
    return true; 
} 

@Override 
public boolean onOptionsItemSelected(MenuItem item) { 
    // Handle action bar item clicks here. The action bar will 
    // automatically handle clicks on the Home/Up button, so long 
    // as you specify a parent activity in AndroidManifest.xml. 
    int id = item.getItemId(); 

    //noinspection SimplifiableIfStatement 
    if (id == R.id.action_settings) { 
     return true; 
    } 

    return super.onOptionsItemSelected(item); 
} 
} 

SlidingTabLayout.java

package com.davidreadiii.android.slidingtabexample.tabs; 

import android.content.Context; 
import android.graphics.Typeface; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.util.SparseArray; 
import android.util.TypedValue; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.HorizontalScrollView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 

public class SlidingTabLayout extends HorizontalScrollView { 

public interface TabColorizer { 

    int getIndicatorColor(int position); 

} 

private static final int TITLE_OFFSET_DIPS = 24; 
private static final int TAB_VIEW_PADDING_DIPS = 16; 
private static final int TAB_VIEW_TEXT_SIZE_SP = 12; 

private int mTitleOffset; 

private int mTabViewLayoutId; 
private int mTabViewTextViewId; 
private boolean mDistributeEvenly; 

private ViewPager mViewPager; 
private SparseArray<String> mContentDescriptions = new SparseArray<String>(); 
private ViewPager.OnPageChangeListener mViewPagerPageChangeListener; 

private final SlidingTabStrip mTabStrip; 

public SlidingTabLayout(Context context) { 
    this(context, null); 
} 

public SlidingTabLayout(Context context, AttributeSet attrs) { 
    this(context, attrs, 0); 
} 

public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 

    // Disable the Scroll Bar 
    setHorizontalScrollBarEnabled(false); 
    // Make sure that the Tab Strips fills this View 
    setFillViewport(true); 

    mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density); 

    mTabStrip = new SlidingTabStrip(context); 
    addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
} 


public void setSelectedIndicatorColors(int... colors) { 
    mTabStrip.setSelectedIndicatorColors(colors); 
} 

/** 
* Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are 
* required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so 
* that the layout can update it's scroll position correctly. 
* 
* @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) 
*/ 
public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { 
    mViewPagerPageChangeListener = listener; 
} 

/** 
* Set the custom layout to be inflated for the tab views. 
* 
* @param layoutResId Layout id to be inflated 
* @param textViewId id of the {@link TextView} in the inflated view 
*/ 
public void setCustomTabView(int layoutResId, int textViewId) { 
    mTabViewLayoutId = layoutResId; 
    mTabViewTextViewId = textViewId; 
} 

/** 
* Sets the associated view pager. Note that the assumption here is that the pager content 
* (number of tabs and tab titles) does not change after this call has been made. 
*/ 
public void setViewPager(ViewPager viewPager) { 
    mTabStrip.removeAllViews(); 

    mViewPager = viewPager; 
    if (viewPager != null) { 
     viewPager.setOnPageChangeListener(new InternalViewPagerListener()); 
     populateTabStrip(); 
    } 
} 

/** 
* Create a default view to be used for tabs. This is called if a custom tab view is not set via 
* {@link #setCustomTabView(int, int)}. 
*/ 
protected TextView createDefaultTabView(Context context) { 
    TextView textView = new TextView(context); 
    textView.setGravity(Gravity.CENTER); 
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP); 
    textView.setTypeface(Typeface.DEFAULT_BOLD); 
    textView.setLayoutParams(new LinearLayout.LayoutParams(
      ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); 

    TypedValue outValue = new TypedValue(); 
    getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, 
      outValue, true); 
    textView.setBackgroundResource(outValue.resourceId); 
    textView.setAllCaps(true); 

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density); 
    textView.setPadding(padding, padding, padding, padding); 

    return textView; 
} 

private void populateTabStrip() { 
    final PagerAdapter adapter = mViewPager.getAdapter(); 
    final View.OnClickListener tabClickListener = new TabClickListener(); 

    for (int i = 0; i < adapter.getCount(); i++) { 
     View tabView = null; 
     TextView tabTitleView = null; 

     if (mTabViewLayoutId != 0) { 
      // If there is a custom tab view layout id set, try and inflate it 
      tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, 
        false); 
      tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId); 
     } 

     if (tabView == null) { 
      tabView = createDefaultTabView(getContext()); 
     } 

     if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
      tabTitleView = (TextView) tabView; 
     } 

     if (mDistributeEvenly) { 
      LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); 
      lp.width = 0; 
      lp.weight = 1; 
     } 

     tabTitleView.setText(adapter.getPageTitle(i)); 
     tabView.setOnClickListener(tabClickListener); 
     String desc = mContentDescriptions.get(i, null); 
     if (desc != null) { 
      tabView.setContentDescription(desc); 
     } 

     mTabStrip.addView(tabView); 
     if (i == mViewPager.getCurrentItem()) { 
      tabView.setSelected(true); 
     } 
    } 
} 

public void setContentDescription(int i, String desc) { 
    mContentDescriptions.put(i, desc); 
} 

@Override 
protected void onAttachedToWindow() { 
    super.onAttachedToWindow(); 

    if (mViewPager != null) { 
     scrollToTab(mViewPager.getCurrentItem(), 0); 
    } 
} 

private void scrollToTab(int tabIndex, int positionOffset) { 
    final int tabStripChildCount = mTabStrip.getChildCount(); 
    if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) { 
     return; 
    } 

    View selectedChild = mTabStrip.getChildAt(tabIndex); 
    if (selectedChild != null) { 
     int targetScrollX = selectedChild.getLeft() + positionOffset; 

     if (tabIndex > 0 || positionOffset > 0) { 
      // If we're not at the first child and are mid-scroll, make sure we obey the offset 
      targetScrollX -= mTitleOffset; 
     } 

     scrollTo(targetScrollX, 0); 
    } 
} 

private class InternalViewPagerListener implements ViewPager.OnPageChangeListener { 
    private int mScrollState; 

    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
     int tabStripChildCount = mTabStrip.getChildCount(); 
     if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) { 
      return; 
     } 

     mTabStrip.onViewPagerPageChanged(position, positionOffset); 

     View selectedTitle = mTabStrip.getChildAt(position); 
     int extraOffset = (selectedTitle != null) 
       ? (int) (positionOffset * selectedTitle.getWidth()) 
       : 0; 
     scrollToTab(position, extraOffset); 

     if (mViewPagerPageChangeListener != null) { 
      mViewPagerPageChangeListener.onPageScrolled(position, positionOffset, 
        positionOffsetPixels); 
     } 
    } 

    @Override 
    public void onPageScrollStateChanged(int state) { 
     mScrollState = state; 

     if (mViewPagerPageChangeListener != null) { 
      mViewPagerPageChangeListener.onPageScrollStateChanged(state); 
     } 
    } 

    @Override 
    public void onPageSelected(int position) { 
     if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { 
      mTabStrip.onViewPagerPageChanged(position, 0f); 
      scrollToTab(position, 0); 
     } 
     for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
      mTabStrip.getChildAt(i).setSelected(position == i); 
     } 
     if (mViewPagerPageChangeListener != null) { 
      mViewPagerPageChangeListener.onPageSelected(position); 
     } 
    } 

} 

private class TabClickListener implements View.OnClickListener { 
    @Override 
    public void onClick(View v) { 
     for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
      if (v == mTabStrip.getChildAt(i)) { 
       mViewPager.setCurrentItem(i); 
       return; 
      } 
     } 
    } 
} 

} 

SlidingTabStrip.java

package com.davidreadiii.android.slidingtabexample.tabs; 

import android.R; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.util.AttributeSet; 
import android.util.TypedValue; 
import android.view.View; 
import android.widget.LinearLayout; 

class SlidingTabStrip extends LinearLayout { 

private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0; 
private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26; 
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3; 
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5; 

private final int mBottomBorderThickness; 
private final Paint mBottomBorderPaint; 

private final int mSelectedIndicatorThickness; 
private final Paint mSelectedIndicatorPaint; 

private final int mDefaultBottomBorderColor; 

private int mSelectedPosition; 
private float mSelectionOffset; 

private SlidingTabLayout.TabColorizer mCustomTabColorizer; 
private final SimpleTabColorizer mDefaultTabColorizer; 

SlidingTabStrip(Context context) { 
    this(context, null); 
} 

SlidingTabStrip(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    setWillNotDraw(false); 

    final float density = getResources().getDisplayMetrics().density; 

    TypedValue outValue = new TypedValue(); 
    context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true); 
    final int themeForegroundColor = outValue.data; 

    mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor, 
      DEFAULT_BOTTOM_BORDER_COLOR_ALPHA); 

    mDefaultTabColorizer = new SimpleTabColorizer(); 
    mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR); 

    mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density); 
    mBottomBorderPaint = new Paint(); 
    mBottomBorderPaint.setColor(mDefaultBottomBorderColor); 

    mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density); 
    mSelectedIndicatorPaint = new Paint(); 
} 

void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) { 
    mCustomTabColorizer = customTabColorizer; 
    invalidate(); 
} 

void setSelectedIndicatorColors(int... colors) { 
    // Make sure that the custom colorizer is removed 
    mCustomTabColorizer = null; 
    mDefaultTabColorizer.setIndicatorColors(colors); 
    invalidate(); 
} 

void onViewPagerPageChanged(int position, float positionOffset) { 
    mSelectedPosition = position; 
    mSelectionOffset = positionOffset; 
    invalidate(); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    final int height = getHeight(); 
    final int childCount = getChildCount(); 
    final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null 
      ? mCustomTabColorizer 
      : mDefaultTabColorizer; 

    // Thick colored underline below the current selection 
    if (childCount > 0) { 
     View selectedTitle = getChildAt(mSelectedPosition); 
     int left = selectedTitle.getLeft(); 
     int right = selectedTitle.getRight(); 
     int color = tabColorizer.getIndicatorColor(mSelectedPosition); 

     if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) { 
      int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1); 
      if (color != nextColor) { 
       color = blendColors(nextColor, color, mSelectionOffset); 
      } 

      // Draw the selection partway between the tabs 
      View nextTitle = getChildAt(mSelectedPosition + 1); 
      left = (int) (mSelectionOffset * nextTitle.getLeft() + 
        (1.0f - mSelectionOffset) * left); 
      right = (int) (mSelectionOffset * nextTitle.getRight() + 
        (1.0f - mSelectionOffset) * right); 
     } 

     mSelectedIndicatorPaint.setColor(color); 

     canvas.drawRect(left, height - mSelectedIndicatorThickness, right, 
       height, mSelectedIndicatorPaint); 
    } 

    // Thin underline along the entire bottom edge 
    canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint); 
} 

/** 
* Set the alpha value of the {@code color} to be the given {@code alpha} value. 
*/ 
private static int setColorAlpha(int color, byte alpha) { 
    return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color)); 
} 

/** 
* Blend {@code color1} and {@code color2} using the given ratio. 
* 
* @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend, 
*    0.0 will return {@code color2}. 
*/ 
private static int blendColors(int color1, int color2, float ratio) { 
    final float inverseRation = 1f - ratio; 
    float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation); 
    float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation); 
    float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation); 
    return Color.rgb((int) r, (int) g, (int) b); 
} 

private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer { 
    private int[] mIndicatorColors; 

    @Override 
    public final int getIndicatorColor(int position) { 
     return mIndicatorColors[position % mIndicatorColors.length]; 
    } 

    void setIndicatorColors(int... colors) { 
     mIndicatorColors = colors; 
    } 
} 
} 

mFragmentPagerAdapte r.java

package com.davidreadiii.android.slidingtabexample.tabs; 

import android.content.Context; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 

import com.davidreadiii.android.slidingtabexample.fragments.FragmentPage1; 

public class mFragmentPagerAdapter extends FragmentPagerAdapter { 
final int PAGE_COUNT = 3; 
private String tabTitles[] = new String[] { "Tab Uno", "Tab Dos", "Tab Tres" }; 
private Context context; 

public mFragmentPagerAdapter(FragmentManager fm, Context context) { 
    super(fm); 
    this.context = context; 
} 

@Override 
public int getCount() { 
    return PAGE_COUNT; 
} 

@Override 
public Fragment getItem(int position) { 
    return FragmentPage1.newInstance(position + 1); 
} 

@Override 
public CharSequence getPageTitle(int position) { 
    // Generate title based on item position 
    return tabTitles[position]; 
} 
} 

activity_main.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:orientation="vertical"> 

<!-- Sliding Tab Layout Implementation --> 
<com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout 
    android:id="@+id/sliding_tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@color/primaryColor"> 
</com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout> 

<!-- View Pager Implementation --> 
<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="0px" 
    android:layout_weight="1" 
    android:background="@android:color/white"/> 

</LinearLayout> 

Я рыскал в Интернете для ответа, но не может оказаться ничего, что работает для моего конкретного проекта.

+0

в mainactivity оных -> getSupportActionBar() setElevation (5); – Harry

ответ

0

Чтобы ответить на мой собственный вопрос, для этого потребуется несколько шагов. Сначала вам нужно создать свою собственную панель действий в отдельном файле XML. Затем вам нужно применить тему «NoActionBar» к действию, в которое вы хотите поместить панель действий с вкладками silding. Затем вам нужно написать на Java, что вы хотите настроить панель действий в этом конкретном действии на свое собственное действие бар. Тогда я верю, не цитируйте меня, вам нужно добавить скользящие вкладки в файл макета панели действий вместе с пейджером представления.

Очевидно, что есть много шагов, и очень сложно объяснить их таким образом. В SlideNerd есть превосходный набор видеоуроков о том, как это сделать, если вы визуальный ученик.

CustomActionBar Учебное пособие (Видео 3-5): https://www.youtube.com/watch?v=pMO8EVkhJO8&index=3&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD

SlidingTabLayout Учебное пособие (Видео 26-28):. https://www.youtube.com/watch?v=Fl0xMuo10yA&index=26&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD

Смежные вопросы