首次加载活动时，不会显示SlidingTabLayout当前项目集

Question

我正在使用带有视图寻呼机的滑动标签布局。我的滑动标签布局条显示了许多项目，数字形式为10到200.

下面的图像完全描述了我的问题：首先是它是如何工作的，第二个图像显示了我遇到的问题。

1. 第一张图片（我的标签如何工作）：

2. 第二张图片（我遇到的问题和要实现的目标）：



我的SlidingTabLayoutClass：

public class SlidingTabLayout extends HorizontalScrollView {

/**
 * Allows complete control over the colors drawn in the tab layout. Set with
 * {@link #setCustomTabColorizer(TabColorizer)}.
 */
public interface TabColorizer {

    /**
     * @return return the color of the indicator used when {@code position} is selected.
     */
    int getIndicatorColor(int position);

    /**
     * @return return the color of the divider drawn to the right of {@code position}.
     */
    int getDividerColor(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 ViewPager mViewPager;
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);
}

/**
 * Set the custom {@link TabColorizer} to be used.
 *
 * If you only require simple custmisation then you can use
 * {@link #setSelectedIndicatorColors(int...)} and {@link #setDividerColors(int...)} to achieve
 * similar effects.
 */
public void setCustomTabColorizer(TabColorizer tabColorizer) {
    mTabStrip.setCustomTabColorizer(tabColorizer);
}

/**
 * Sets the colors to be used for indicating the selected tab. These colors are treated as a
 * circular array. Providing one color will mean that all tabs are indicated with the same color.
 */
public void setSelectedIndicatorColors(int... colors) {
    mTabStrip.setSelectedIndicatorColors(colors);
}

/**
 * Sets the colors to be used for tab dividers. These colors are treated as a circular array.
 * Providing one color will mean that all tabs are indicated with the same color.
 */
public void setDividerColors(int... colors) {
    mTabStrip.setDividerColors(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);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        // If we're running on Honeycomb or newer, then we can use the Theme's
        // selectableItemBackground to ensure that the View has a pressed state
        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                outValue, true);
        textView.setBackgroundResource(outValue.resourceId);
    }

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
        // If we're running on ICS or newer, enable all-caps to match the Action Bar tab style
        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;
        }

        tabTitleView.setText(adapter.getPageTitle(i));
        tabView.setOnClickListener(tabClickListener);

        mTabStrip.addView(tabView);
    }
}

@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);
        }

        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;
              }
          }
      }
  }

}

请帮助解决我的问题

我尝试过的方式：

1.）我尝试调用scrollToTab（mViewPager.getCurrentItem（），0）;在SlidingTabLayout类的setViewPager方法中，但它不能在第一次加载活动时显示6项。

2.）代替scrollToTab（mViewPager.getCurrentItem（），0）;在SlidingTabLayout类的setViewPager方法中，我尝试调用scrollTo（500,0），它显示了首次加载活动时滚动的滑动标签条，这种方式效率不高，因为我们不确切知道什么值是为不同的设备而不是500。

我创建的这个Sliding Tab布局类似于下面显示的布局，唯一的区别是我的标签显示带有圆形背景的数字，下面的图像仅显示三个标签，我的标签布局包含许多标签，编号从10到200。

Answer 1

我通过使用Android的Gallery Control而不是使用View Pager的SlidingTabLayout来解决上述问题，使用库我可以将6项显示为选定的默认值，并且当第一次加载活动时它也可见。 码： mGallery.setSelection（6）;

Answer 2

图库是一种常用于在水平滚动列表中显示项目的视图，用于将当前选择锁定在中心。

1. 图库可用于在水平列表中显示视图，用户可以 选择一个视图，用户选择的视图将显示在中心 水平列表

2. 图库的项目是从适配器填充的，类似于 ListView，其中ListView项目从适配器填充。

3. 我们需要创建一个扩展BaseAdapter类的Adapter类 并覆盖getView（）方法。

4. 为Gallery的所有项目自动调用getView（）方法 （类似于列表视图，其中为每个项目调用getView（）方法 列表视图）

GalleryView示例： 在我们的GalleryView示例中，我们使用图像填充了Gallery。 图像将以水平列表显示，当用户选择/单击图像时，所选图像将显示在屏幕中央。 （见下面的截图）

处理图库上的触摸/点击事件： 我们需要将click Listener添加到图库以便处理图库上的触摸事件。

<强> main.xml中

我们有一个图库和一个ImageView，我们将在ImageView中显示用户选择的图像。

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


    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

     <ImageView
        android:id="@+id/imageView1"
        android:layout_marginTop="100dp"
        android:layout_width="250dp"
        android:layout_gravity="center_horizontal"
        android:layout_height="250dp"
        android:src="@drawable/image1" />

 </LinearLayout>

<强> MainActivity

 public class MainActivity extends Activity 
    {

         ImageView selectedImage;  
         private Integer[] mImageIds = {
                    R.drawable.image1,
                    R.drawable.image2,
                    R.drawable.image3,
                    R.drawable.image4,
                    R.drawable.image5,
                    R.drawable.image6,
                    R.drawable.image7,
                    R.drawable.image8
            };
        @Override
        public void onCreate(Bundle savedInstanceState) 
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

                 Gallery gallery = (Gallery) findViewById(R.id.gallery1);
            selectedImage=(ImageView)findViewById(R.id.imageView1);
            gallery.setSpacing(1);
            gallery.setAdapter(new GalleryImageAdapter(this));

             // clicklistener for Gallery
            gallery.setOnItemClickListener(new OnItemClickListener() {
                public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                    Toast.makeText(MainActivity.this, "Your selected position = " + position, Toast.LENGTH_SHORT).show();
                    // show the selected Image
                    selectedImage.setImageResource(mImageIds[position]);
                }
            });
        }

    }
**GalleryImageAdapter** 


    public class GalleryImageAdapter extends BaseAdapter 
    {
        private Context mContext;

        private Integer[] mImageIds = {
                R.drawable.image1,
                R.drawable.image2,
                R.drawable.image3,
                R.drawable.image4,
                R.drawable.image5,
                R.drawable.image6,
                R.drawable.image7,
                R.drawable.image8
        };

        public GalleryImageAdapter(Context context) 
        {
            mContext = context;
        }

        public int getCount() {
            return mImageIds.length;
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }


        // Override this method according to your need
        public View getView(int index, View view, ViewGroup viewGroup) 
        {
            // TODO Auto-generated method stub
            ImageView i = new ImageView(mContext);

            i.setImageResource(mImageIds[index]);
            i.setLayoutParams(new Gallery.LayoutParams(200, 200));

            i.setScaleType(ImageView.ScaleType.FIT_XY);

            return i;
        }
    }

注意：此示例填充了图库中的图像，对于我上面发布的问题，我已使用TextViews填充我的图库，显示数字从10到200，并且当选择项目时给出橙色圆圈背景，我创建了一个类似于下面的选择器类型：

<强> item_selector.xml

<selector>
        <item android:state_selected="true" android:drawable="your orange color circle drawable"></item>
</selector>

并将此选择器设置为TextView（图库项目）的背景

Answer 3

//试试这段代码，它适合我。

 ViewPager.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() 
 {

    @Override
    public void onGlobalLayout() 
    {

    ViewPager.getViewTreeObserver().removeOnGlobalLayoutListener(this);

    mPager.setCurrentItem(tabSelectedPosition, true);
    }
});