Add IconPageIndicator.

Author: JakeWharton

CHANGELOG.md

@@ -1,9 +1,10 @@
 Change Log
 ==========
 
-Version 2.4 *(In Development)*
+Version 2.4.0 *(In Development)*
 ------------------------------
 
+ * New `IconPageIndicator`! Uses state-list images to represent pages.
  * Support `android:background` attribute on `Canvas`-based views.
  * Title indicator allows for drawing its line, underline, and/or triangle on
    top of the titles for placement underneath a `ViewPager`.

library/res/values/vpi__attrs.xml

@@ -19,6 +19,8 @@
     <declare-styleable name="ViewPagerIndicator">
         <!-- Style of the circle indicator. -->
         <attr name="vpiCirclePageIndicatorStyle" format="reference"/>
+        <!-- Style of the icon indicator's views. -->
+        <attr name="vpiIconPageIndicatorStyle" format="reference"/>
         <!-- Style of the line indicator. -->
         <attr name="vpiLinePageIndicatorStyle" format="reference"/>
         <!-- Style of the title indicator. -->

library/res/values/vpi__styles.xml

@@ -16,6 +16,7 @@
 
 <resources>
     <style name="Theme.PageIndicatorDefaults" parent="android:Theme">
+        <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
         <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
     </style>
 
@@ -38,4 +39,9 @@
         <item name="android:textStyle">bold</item>
         <item name="android:textColor">@color/vpi__dark_theme</item>
     </style>
+
+    <style name="Widget.IconPageIndicator" parent="Widget">
+        <item name="android:layout_marginLeft">6dp</item>
+        <item name="android:layout_marginRight">6dp</item>
+    </style>
 </resources>

library/src/com/viewpagerindicator/IconPageIndicator.java

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2011 The Android Open Source Project
+ * Copyright (C) 2012 Jake Wharton
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.viewpagerindicator;
+
+import android.content.Context;
+import android.support.v4.view.PagerAdapter;
+import android.support.v4.view.ViewPager;
+import android.support.v4.view.ViewPager.OnPageChangeListener;
+import android.util.AttributeSet;
+import android.view.Gravity;
+import android.view.View;
+import android.widget.HorizontalScrollView;
+import android.widget.ImageView;
+
+import static android.view.ViewGroup.LayoutParams.FILL_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
+/**
+ * This widget implements the dynamic action bar tab behavior that can change
+ * across different configurations or circumstances.
+ */
+public class IconPageIndicator extends HorizontalScrollView implements PageIndicator {
+    private final IcsLinearLayout mIconsLayout;
+
+    private ViewPager mViewPager;
+    private OnPageChangeListener mListener;
+    private Runnable mIconSelector;
+    private int mSelectedIndex;
+
+    public IconPageIndicator(Context context) {
+        this(context, null);
+    }
+
+    public IconPageIndicator(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        setHorizontalScrollBarEnabled(false);
+
+        mIconsLayout = new IcsLinearLayout(context, R.attr.vpiIconPageIndicatorStyle);
+        addView(mIconsLayout, new LayoutParams(WRAP_CONTENT, FILL_PARENT, Gravity.CENTER));
+    }
+
+    private void animateToIcon(final int position) {
+        final View iconView = mIconsLayout.getChildAt(position);
+        if (mIconSelector != null) {
+            removeCallbacks(mIconSelector);
+        }
+        mIconSelector = new Runnable() {
+            public void run() {
+                final int scrollPos = iconView.getLeft() - (getWidth() - iconView.getWidth()) / 2;
+                smoothScrollTo(scrollPos, 0);
+                mIconSelector = null;
+            }
+        };
+        post(mIconSelector);
+    }
+
+    @Override
+    public void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        if (mIconSelector != null) {
+            // Re-post the selector we saved
+            post(mIconSelector);
+        }
+    }
+
+    @Override
+    public void onDetachedFromWindow() {
+        super.onDetachedFromWindow();
+        if (mIconSelector != null) {
+            removeCallbacks(mIconSelector);
+        }
+    }
+
+    @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);
+        }
+        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() {
+        mIconsLayout.removeAllViews();
+        IconPagerAdapter iconAdapter = (IconPagerAdapter) mViewPager.getAdapter();
+        int count = iconAdapter.getCount();
+        for (int i = 0; i < count; i++) {
+            ImageView view = new ImageView(getContext(), null, R.attr.vpiIconPageIndicatorStyle);
+            view.setImageResource(iconAdapter.getIconResId(i));
+            mIconsLayout.addView(view);
+        }
+        if (mSelectedIndex > count) {
+            mSelectedIndex = count - 1;
+        }
+        setCurrentItem(mSelectedIndex);
+        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.");
+        }
+        mSelectedIndex = item;
+        mViewPager.setCurrentItem(item);
+
+        int tabCount = mIconsLayout.getChildCount();
+        for (int i = 0; i < tabCount; i++) {
+            View child = mIconsLayout.getChildAt(i);
+            boolean isSelected = (i == item);
+            child.setSelected(isSelected);
+            if (isSelected) {
+                animateToIcon(item);
+            }
+        }
+    }
+
+    @Override
+    public void setOnPageChangeListener(OnPageChangeListener listener) {
+        mListener = listener;
+    }
+}

library/src/com/viewpagerindicator/IconPagerAdapter.java

@@ -0,0 +1,11 @@
+package com.viewpagerindicator;
+
+public interface IconPagerAdapter {
+    /**
+     * Get icon representing the page at {@code index} in the adapter.
+     */
+    int getIconResId(int index);
+
+    // From PagerAdapter
+    int getCount();
+}

library/src/com/viewpagerindicator/IcsLinearLayout.java

@@ -31,10 +31,10 @@ class IcsLinearLayout extends LinearLayout {
     private int mDividerPadding;
 
 
-    public IcsLinearLayout(Context context) {
+    public IcsLinearLayout(Context context, int themeAttr) {
         super(context);
 
-        TypedArray a = context.obtainStyledAttributes(null, LL, R.attr.vpiTabPageIndicatorStyle, 0);
+        TypedArray a = context.obtainStyledAttributes(null, LL, themeAttr, 0);
         setDividerDrawable(a.getDrawable(IcsLinearLayout.LL_DIVIDER));
         mDividerPadding = a.getDimensionPixelSize(LL_DIVIDER_PADDING, 0);
         mShowDividers = a.getInteger(LL_SHOW_DIVIDER, SHOW_DIVIDER_NONE);

library/src/com/viewpagerindicator/TabPageIndicator.java

@@ -82,7 +82,7 @@ public TabPageIndicator(Context context, AttributeSet attrs) {
         super(context, attrs);
         setHorizontalScrollBarEnabled(false);
 
-        mTabLayout = new IcsLinearLayout(context);
+        mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
         addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, FILL_PARENT));
     }
 

sample/AndroidManifest.xml

@@ -87,6 +87,19 @@
 
 
 
+        <!-- ICON INDICATOR -->
+        <activity
+            android:name=".SampleIconsDefault"
+            android:label="Icons/Default">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
+            </intent-filter>
+        </activity>
+
+
+
+
         <!-- LINE INDICATOR -->
         <activity
                 android:name=".SampleLinesDefault"

sample/res/drawable-hdpi/perm_group_calendar_normal.png

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:drawable="@drawable/perm_group_calendar_selected" />
+    <item android:drawable="@drawable/perm_group_calendar_normal" />
+</selector>

sample/res/drawable-hdpi/perm_group_calendar_selected.png

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:drawable="@drawable/perm_group_camera_selected" />
+    <item android:drawable="@drawable/perm_group_camera_normal" />
+</selector>

sample/res/drawable-hdpi/perm_group_camera_normal.png

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:drawable="@drawable/perm_group_device_alarms_selected" />
+    <item android:drawable="@drawable/perm_group_device_alarms_normal" />
+</selector>

sample/res/drawable-hdpi/perm_group_camera_selected.png

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:drawable="@drawable/perm_group_location_selected" />
+    <item android:drawable="@drawable/perm_group_location_normal" />
+</selector>

sample/res/drawable-hdpi/perm_group_device_alarms_normal.png

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2011 Jake Wharton
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical"
+    android:layout_width="fill_parent"
+    android:layout_height="fill_parent">
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/pager"
+        android:layout_width="fill_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        />
+    <com.viewpagerindicator.IconPageIndicator
+        android:id="@+id/indicator"
+        android:layout_height="wrap_content"
+        android:layout_width="fill_parent"
+        />
+
+</LinearLayout>

sample/res/drawable-hdpi/perm_group_device_alarms_selected.png

@@ -0,0 +1,21 @@
+package com.viewpagerindicator.sample;
+
+import android.os.Bundle;
+import android.support.v4.view.ViewPager;
+import com.viewpagerindicator.IconPageIndicator;
+
+public class SampleIconsDefault extends BaseSampleActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.simple_icons);
+
+        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());
+
+        mPager = (ViewPager)findViewById(R.id.pager);
+        mPager.setAdapter(mAdapter);
+
+        mIndicator = (IconPageIndicator)findViewById(R.id.indicator);
+        mIndicator.setViewPager(mPager);
+    }
+}

sample/res/drawable-hdpi/perm_group_location_normal.png

@@ -3,9 +3,16 @@
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentPagerAdapter;
+import com.viewpagerindicator.IconPagerAdapter;
 
-class TestFragmentAdapter extends FragmentPagerAdapter {
+class TestFragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
     protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", };
+    protected static final int[] ICONS = new int[] {
+            R.drawable.perm_group_calendar,
+            R.drawable.perm_group_camera,
+            R.drawable.perm_group_device_alarms,
+            R.drawable.perm_group_location
+    };
 
     private int mCount = CONTENT.length;
 
@@ -28,6 +35,11 @@ public CharSequence getPageTitle(int position) {
       return TestFragmentAdapter.CONTENT[position % CONTENT.length];
     }
 
+    @Override
+    public int getIconResId(int index) {
+      return ICONS[index % ICONS.length];
+    }
+
     public void setCount(int count) {
         if (count > 0 && count <= 10) {
             mCount = count;