Android imitation WeChat’s bottom button slides and changes color. Here, it only provides a simple explanation of color change when sliding operations using Fragment as Tab pages.
First, let’s talk about the OnPageChangeListener monitor
//There are three methods for listeningpublic abstract void onPageScrollStateChanged (int state) public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) public abstract void onPageSelected (int position) //The parameter state in the first method onPageScrollStateChanged has three desirable values public static final int SCROLL_STATE_DRAGGING Constant Value: 1 (0x00000001) //When the finger is sliding on the ViewPager public static final int SCROLL_STATE_IDLE Constant Value: 0 (0x00000000) //After the finger is released, the ViewPager will automatically slide during the period public static final int SCROLL_STATE_SETTLING Constant Value: 2 (0x00000002) //ViewPager enters a page //If you output the value of state in onPageScrollStateChanged, you will find that "1---2--0" is printed out in order every time //The three parameters of the second method onPageScrolled position://When sliding, the first page displayed on the left side of the screen positionOffset://The sliding ratio, the range of the value is [0, 1), the finger slides to the left, the value increases, otherwise it decreases positionOffsetPixels://The sliding distance is related to the screen. If you slide your finger to the left, the value will increase or decrease. //We often need to check the sliding direction of the viewpager and do some operations. At this time, you only need to use position and positionOffset to achieve this function. //For example, when you realize the color gradient of the icon at the bottom of WeChat, slide to the left ChangeColorIconWithTextView left = (position); //Initialization of the bottom icon and text on the first page displayed on the leftChangeColorIconWithTextView right = (position + 1); //Initialization of the icon and text at the bottom of the Page displayed on the right (1 - positionOffset); //Set the transparency of the icon. The positionOffset value is incremented. The color of the icon on the left becomes lighter.(positionOffset); //The color of the icon on the right gradually becomes darker //The three parameters of the third method onPageSelected position://The currently selected page number //The time when this method is called is quite special. After 2 of "1---2--0" in the first method above is executed, onPageSelected is executed, and then 0 of "1---2--0" is executed. That is, after the finger releases the screen, onPageSelected is executed.
The ChangeColorIconWithTextView main class mentioned above
package ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; import ; /** * This class is used to modify the color gradient */ public class ChangeColorIconWithTextView extends View { private Bitmap mBitmap; private Canvas mCanvas; private Paint mPaint; /** * color */ private int mColor = 0XFF07B7C4; /** * Transparency 0.0-1.0 Initialization must be 0. If it is not 0, it will be scrapped */ private float mAlpha = 0f; /** * icon */ private Bitmap mIconBitmap; /** * Limit the scope of drawing icons */ private Rect mIconRect; /** * icon bottom text */ private String mText = "WeChat"; private int mTextSize = (int) ( TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics()); private Paint mTextPaint; private Rect mTextBound = new Rect(); public ChangeColorIconWithTextView(Context context) { super(context); } /** * Initialize custom attribute values * * @param context * @param attrs */ public ChangeColorIconWithTextView(Context context, AttributeSet attrs) { super(context, attrs); // Get the settings icon TypedArray a = (attrs, ); int n = (); for (int i = 0; i < n; i++) { int attr = (i); switch (attr) { case .ChangeColorIconView_icon: BitmapDrawable drawable = (BitmapDrawable) (attr); mIconBitmap = (); break; case .ChangeColorIconView_color: mColor = (attr, 0x07B7C4); break; case .ChangeColorIconView_text: mText = (attr); break; case .ChangeColorIconView_text_size: mTextSize = (int) (attr, TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics())); break; } } (); mTextPaint = new Paint(); (mTextSize); (0xff07B7C4); (true); // Get text drawing range (mText, 0, (), mTextBound); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { (widthMeasureSpec, heightMeasureSpec); // Get the width of the drawing icon int bitmapWidth = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight(), getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - ()); int left = getMeasuredWidth() / 2 - bitmapWidth / 2; int top = (getMeasuredHeight() - ()) / 2 - bitmapWidth / 2; // Get the width of the drawing icon mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth); } @Override protected void onDraw(Canvas canvas) { int alpha = (int) ((255 * mAlpha)); (mIconBitmap, null, mIconRect, null); setupTargetBitmap(alpha); drawSourceText(canvas, alpha); drawTargetText(canvas, alpha); (mBitmap, 0, 0, null); } private void setupTargetBitmap(int alpha) { mBitmap = (getMeasuredWidth(), getMeasuredHeight(), Config.ARGB_8888); mCanvas = new Canvas(mBitmap); mPaint = new Paint(); (mColor); (true); (true); (alpha); (mIconRect, mPaint); (new PorterDuffXfermode(.DST_IN)); (255); (mIconBitmap, null, mIconRect, mPaint); } /** * Transparency 255 * * @param canvas * @param alpha */ private void drawSourceText(Canvas canvas, int alpha) { (mTextSize); (0x00333333); (255 - alpha); (mText, + () / 2 - () / 2, + (), mTextPaint); } private void drawTargetText(Canvas canvas, int alpha) { (mColor); (alpha); (mText, + () / 2 - () / 2, + (), mTextPaint); } public void setIconAlpha(float alpha) { = alpha; invalidateView(); } private void invalidateView() { if (() == ()) { invalidate(); } else { postInvalidate(); } } public void setIconColor(int color) { mColor = color; } public void setIcon(int resId) { = (getResources(), resId); if (mIconRect != null) invalidateView(); } public void setIcon(Bitmap iconBitmap) { = iconBitmap; if (mIconRect != null) invalidateView(); } private static final String INSTANCE_STATE = "instance_state"; private static final String STATE_ALPHA = "state_alpha"; @Override protected Parcelable onSaveInstanceState() { Bundle bundle = new Bundle(); (INSTANCE_STATE, ()); (STATE_ALPHA, mAlpha); return bundle; } @Override protected void onRestoreInstanceState(Parcelable state) { if (state instanceof Bundle) { Bundle bundle = (Bundle) state; mAlpha = (STATE_ALPHA); ((INSTANCE_STATE)); } else { (state); } } }
Implement monitoring operations in Activity
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (positionOffset > 0) { ChangeColorIconWithTextView left = (position); ChangeColorIconWithTextView right = (position + 1); (1 - positionOffset); (positionOffset); } }
Define a collection to load all color-changing controls into
private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>(); private void initTabIndicator() { ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(.id_indicator_one); ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(.id_indicator_two); ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(.id_indicator_three); ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(.id_indicator_four); (one); (two); (three); (four); (this); (this); (this); (this); (1.0f); }
Click to listen
@Override public void onClick(View v) { resetOtherTabs(); switch (()) { case .id_indicator_one: (0).setIconAlpha(1.0f); (0, false); break; case .id_indicator_two: (1).setIconAlpha(1.0f); (1, false); break; case .id_indicator_three: (2).setIconAlpha(1.0f); (2, false); mAppContext.has_new_talk = false; break; case .id_indicator_four: (3).setIconAlpha(1.0f); (3, false); break; } }
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.