Android -- 仿微信滑动，底部图片和字体变化的效果

我不是女神ヾ 2022-08-06 01:15 133阅读 0赞

微信，代表着国内软件的顶级app，当然它的一些好的效果，

我们可以模仿学习。下面是模仿微信底部栏随着页面的滑动

而产生文字和图片的颜色以及透明度变化的效果。

如下：

![20141209131029669][]

首先我们来分析问题，滑动的时候什么改变了？我们得出两点：

1.图片颜色改变了

这种改变很奇妙，是通过透明度来达到这种效果的，装微信的朋友可以认真玩玩。

灰色图片的透明度增加，橙色图片透明度就会减少。

2.文字颜色改变了

字体的改变的时候透明度没有变，但是颜色值在灰色和橙色相互转换，这对于没有

详细学过颜色概念的朋友，可能有点难实现，不过懂得原理后，一切都很简单。

先从布局开始吧。

（1）底部标签Item如下：

（2）Activity的布局如下：

相对应的实体Bean类：

public final class UITabItem {
        View parent;
        TabIconView iconView;//图片
        TextView labelView;//标签,如首页,我
        View tipView;//红点提示之类的
    }

TabIconView是一个关键的图片绘制类，setmAlpha方法接受透明度参数，来重新绘制自己

public class TabIconView extends ImageView {
    
        private int mAlpha;
        private Paint mPaint;
        private Bitmap clickedBitmap;
        private Bitmap unClickBitmap;
    
        public TabIconView(Context context) {
            super(context);
            mAlpha = 0;
        }
    
        public TabIconView(Context context, AttributeSet attrs) {
            super(context, attrs);
            mAlpha = 0;
        }
    
        public TabIconView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            mAlpha = 0;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (mPaint != null) {
                mPaint.setAlpha(255 - mAlpha);//设置透明度
                canvas.drawBitmap(unClickBitmap, null, new Rect(0,0,unClickBitmap.getWidth(), unClickBitmap.getHeight()), mPaint);
                mPaint.setAlpha(mAlpha);//设置透明度
                canvas.drawBitmap(clickedBitmap, null, new Rect(0, 0, clickedBitmap.getWidth(), clickedBitmap.getHeight()),mPaint);
            }
    
        }
    
        public void init(int clickedDrawableRid, int unclickedDrawableRid) {
            clickedBitmap = BitmapFactory.decodeResource(getResources(), clickedDrawableRid);//点击的图片
            unClickBitmap = BitmapFactory.decodeResource(getResources(), unclickedDrawableRid);//未点击的图片
            setLayoutParams(new LinearLayout.LayoutParams(clickedBitmap.getWidth(),clickedBitmap.getHeight()));
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mAlpha = 0;
        }
    
        public void setmAlpha(int alpha) {
            mAlpha = alpha;
            invalidate();//重新调用OnDraw方法
        }
    }

UITabBottom封装对文字颜色值的操作，我们需要理解文字颜色的转换，其实就是RGB的转换.

举个例子：0xFF123456

FF为透明度,12为Red值,34为Green值,56为Blue值

如果是6位颜色值，如0x123456,默认透明度是FF

怎么获取Red值呢？我们可以通过&运算符，来获取想要的位的信息

0x123456&0xff0000

可以得到0x120000,然后右位移16位得到Red的值。为什么是16啊，

因为是16进制，转成2进制的时候，1位相当于4位，4个0就是16了.

明白这点就行了，颜色的转化我们可以通过RGB的运算来得到。

如下：

R1 = (colorClick & 0xff0000) >> 16;//未选中的Red值

G1 = (colorClick & 0xff00) >> 8;//未选中的Green值

B1 = (colorClick & 0xff);//未选中的Blue值

R2 = (colorUnclick & 0xff0000) >> 16;//选中的Red值

G2 = (colorUnclick & 0xff00) >> 8;//选中的Green值

B2 = (colorUnclick & 0xff);//选中的Blue值

Rm = R1 - R2;//Red差值

Gm = G1 - G2;//Green差值

Bm = B1 - B2;//Blue差值

当ViewPage滑动的时候，得到滑动距离占页面宽度的百分比f，得到这个百分比f，

求出R，G，B的值，再将它们拼成一个颜色值就行了。

int R = (int) (R2 + f \* Rm);

int G = (int) (G2 + f \* Gm);

int B = (int) (B2 + f \* Bm);

return 0xff << 24 | R << 16 | G << 8 | B;

详细代码如下：

public class UITabBottom extends LinearLayout implements View.OnClickListener {
    
        public static interface OnUITabChangeListener {
            public void onTabChange(int index);
        }
    
        private UITabItem tab0;
        private UITabItem tab1;
        private UITabItem tab2;
        private UITabItem tab3;
        private UIViewPager mViewPager;
        private OnUITabChangeListener changeListener;
    
    
        private int colorClick;
        private int colorUnclick;
        private int R1;//未选中的Red值
        private int G1;//未选中的Green值
        private int B1;//未选中的Blue值
        private int R2;//选中的Red值
        private int G2;//选中的Green值
        private int B2;//选中的Blue值
        private int Rm = R2 - R1;//Red的差值
        private int Gm = G2 - G1;//Green的差值
        private int Bm = B2 - B1;//Blue的差值
    
        private int mIndex;
    
        public UITabBottom(Context context) {
            super(context);
        }
    
        public UITabBottom(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public UIViewPager getmViewPager() {
            return mViewPager;
        }
    
        public void setmViewPager(UIViewPager mViewPager) {
            this.mViewPager = mViewPager;
        }
    
        private UITabItem newChildItem(int i) {
    
            UITabItem tabItem = new UITabItem();
            tabItem.parent = LayoutInflater.from(getContext()).inflate(R.layout.m_tabitem, null);
            tabItem.iconView = (TabIconView) tabItem.parent.findViewById(R.id.mTabIcon);
            tabItem.labelView = (TextView) tabItem.parent.findViewById(R.id.mTabText);
            tabItem.tipView = tabItem.parent.findViewById(R.id.mTabTip);
            tabItem.parent.setTag(i);
            tabItem.parent.setOnClickListener(this);
            return tabItem;
        }
    
        public void init() {
    
            colorClick = getResources().getColor(R.color.select);
            colorUnclick = getResources().getColor(R.color.unselect);
    
            int tabBottomHeight = ViewGroup.LayoutParams.MATCH_PARENT;
            ;
            setOrientation(LinearLayout.HORIZONTAL);
            //tab0
            tab0 = newChildItem(0);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(0, tabBottomHeight);
            layoutParams.weight = 1;
            tab0.labelView.setText("首页");
            tab0.labelView.setTextColor(colorClick);
            tab0.iconView.init(R.drawable.tabbar_home_selected, R.drawable.tabbar_home);
            addView(tab0.parent, layoutParams);
            //tab1
            tab1 = newChildItem(1);
            layoutParams = new LinearLayout.LayoutParams(0, tabBottomHeight);
            layoutParams.weight = 1;
            tab1.labelView.setText("消息");
            tab1.labelView.setTextColor(colorUnclick);
            tab1.iconView.init(R.drawable.tabbar_message_center_selected, R.drawable.tabbar_message_center);
            addView(tab1.parent, layoutParams);
            //tab2
            tab2 = newChildItem(2);
            layoutParams = new LinearLayout.LayoutParams(0, tabBottomHeight);
            layoutParams.weight = 1;
            tab2.labelView.setText("发现");
            tab2.labelView.setTextColor(colorUnclick);
            tab2.iconView.init(R.drawable.tabbar_discover_selected, R.drawable.tabbar_discover);
            addView(tab2.parent, layoutParams);
            //tab3
            tab3 = newChildItem(3);
            layoutParams = new LinearLayout.LayoutParams(0, tabBottomHeight);
            layoutParams.weight = 1;
            tab3.labelView.setText("我");
            tab3.labelView.setTextColor(colorUnclick);
            tab3.iconView.init(R.drawable.tabbar_profile_selected, R.drawable.tabbar_profile);
            addView(tab3.parent, layoutParams);
    
            R1 = (colorClick & 0xff0000) >> 16;
            G1 = (colorClick & 0xff00) >> 8;
            B1 = (colorClick & 0xff);
            R2 = (colorUnclick & 0xff0000) >> 16;
            G2 = (colorUnclick & 0xff00) >> 8;
            B2 = (colorUnclick & 0xff);
            Rm = R1 - R2;
            Gm = G1 - G2;
            Bm = B1 - B2;
    
            mIndex = 0;
        }
    
        private OnUITabChangeListener getChangeListener() {
            return changeListener;
        }
    
        public void setChangeListener(OnUITabChangeListener changeListener) {
            this.changeListener = changeListener;
        }
    
    
        public void setTabRedDot(int index,int state)
        {
            if(index==2)
            {
                tab2.tipView.setVisibility(state);
            }
            if(index==3)
            {
                tab3.tipView.setVisibility(state);
            }
    
        }
    
    
        public void selectTab(int index) {
    
            if (mIndex == index) {
                return;
            }
    
            mIndex = index;
            if (changeListener != null) {
                changeListener.onTabChange(mIndex);
            }
            //mIndex表示处于mIndex到mIndex+1页面之间
            switch (mIndex) {
                case 0:
                    tab0.iconView.setmAlpha(255);
                    tab1.iconView.setmAlpha(0);
                    tab2.iconView.setmAlpha(0);
                    tab3.iconView.setmAlpha(0);
                    tab0.labelView.setTextColor(colorClick);
                    tab1.labelView.setTextColor(colorUnclick);
                    tab2.labelView.setTextColor(colorUnclick);
                    tab3.labelView.setTextColor(colorUnclick);
                    break;
                case 1:
                    tab0.iconView.setmAlpha(0);
                    tab1.iconView.setmAlpha(255);
                    tab2.iconView.setmAlpha(0);
                    tab3.iconView.setmAlpha(0);
                    tab0.labelView.setTextColor(colorUnclick);
                    tab1.labelView.setTextColor(colorClick);
                    tab2.labelView.setTextColor(colorUnclick);
                    tab3.labelView.setTextColor(colorUnclick);
                    break;
                case 2:
                    tab0.iconView.setmAlpha(0);
                    tab1.iconView.setmAlpha(0);
                    tab2.iconView.setmAlpha(255);
                    tab3.iconView.setmAlpha(0);
                    tab0.labelView.setTextColor(colorUnclick);
                    tab1.labelView.setTextColor(colorUnclick);
                    tab2.labelView.setTextColor(colorClick);
                    tab3.labelView.setTextColor(colorUnclick);
                    break;
                case 3:
                    tab0.iconView.setmAlpha(0);
                    tab1.iconView.setmAlpha(0);
                    tab2.iconView.setmAlpha(0);
                    tab3.iconView.setmAlpha(255);
                    tab0.labelView.setTextColor(colorUnclick);
                    tab1.labelView.setTextColor(colorUnclick);
                    tab2.labelView.setTextColor(colorUnclick);
                    tab3.labelView.setTextColor(colorClick);
                    break;
            }
    
        }
    
        /**
         * 拼成颜色值
         * @param f
         * @return
         */
        private int getColorInt(float f) {
            int R = (int) (R2 + f * Rm);
            int G = (int) (G2 + f * Gm);
            int B = (int) (B2 + f * Bm);
            return 0xff << 24 | R << 16 | G << 8 | B;
    
        }
    
    
        /**
         * location为最左边页面的index,e.g.,fragment0到fragment1,传入location=0
         * f为滑动距离的百分比
         *
         * @param location
         * @param f
         */
        public void scroll(int location, float f) {
            int leftAlpha = (int) (255 * (1 - f));
            int rightAlpha = (int) (255 * f);
            int leftColor = getColorInt(1 - f);
            int rightColor = getColorInt(f);
            switch (location) {
                case 0:
                    tab0.iconView.setmAlpha(leftAlpha);
                    tab1.iconView.setmAlpha(rightAlpha);
    
                    tab0.labelView.setTextColor(leftColor);
                    tab1.labelView.setTextColor(rightColor);
                    break;
                case 1:
                    tab1.iconView.setmAlpha(leftAlpha);
                    tab2.iconView.setmAlpha(rightAlpha);
    
                    tab1.labelView.setTextColor(leftColor);
                    tab2.labelView.setTextColor(rightColor);
                    break;
                case 2:
                    tab2.iconView.setmAlpha(leftAlpha);
                    tab3.iconView.setmAlpha(rightAlpha);
    
                    tab2.labelView.setTextColor(leftColor);
                    tab3.labelView.setTextColor(rightColor);
    
                    break;
            }
        }
    
        @Override
        public void onClick(View v) {
            int i = ((Integer) v.getTag()).intValue();
            mViewPager.setCurrentItem(i, false);
            selectTab(i);
        }
    }

主Activity的话，通过对ViewPager的滑动监听，来获取百分比，从而刷新底部栏的状态。

public class MainActivity extends FragmentActivity {
    
        private UITabBottom mUiTabBottom;
        private UIViewPager mUiViewPager;
        private ArrayList<Fragment> fragments = new ArrayList<Fragment>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initFragments();
            mUiTabBottom = (UITabBottom) findViewById(R.id.home_tab_bottom);
            mUiViewPager = (UIViewPager) findViewById(R.id.home_view_page);
            mUiTabBottom.setmViewPager(mUiViewPager);
            mUiViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
                @Override
                public Fragment getItem(int i) {
                    return fragments.get(i);
                }
    
                @Override
                public int getCount() {
                    return fragments.size();
                }
            });
    
            mUiViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int pageIndex, float v, int i2) {
                    mUiTabBottom.scroll(pageIndex, v);<span style="font-size: 13.3333339691162px; font-family: Arial, Helvetica, sans-serif;">//刷新底部栏</span>
                }
    
                @Override
                public void onPageSelected(int i) {
                    mUiTabBottom.selectTab(i);//刷新底部栏
                }
    
                @Override
                public void onPageScrollStateChanged(int i) {
                }
            });
        }
    
        private void initFragments() {
            for (int i = 0; i < 4; i++) {
                fragments.add(CustomFragment.newInstance(i));
            }
        }
    
    
        public static class CustomFragment extends Fragment {
    
            private int position;
            private boolean isShown;
    
            public static CustomFragment newInstance(int pos) {
                CustomFragment fragment = new CustomFragment();
                Bundle bundle = new Bundle();
                bundle.putInt("pos", pos);
                fragment.setArguments(bundle);
                return fragment;
            }
    
    
            @Override
            public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
                Log.e("fragment" + position, "onCreateView");
                super.onCreateView(inflater, container, savedInstanceState);
                View layout = inflater.inflate(R.layout.m_fragment, null);
                 View progress = layout.findViewById(R.id.progressContainer);
                View content = layout.findViewById(R.id.listContainer);
                return layout;
            }
        }
    }

项目地址：[https://github.com/galis/WeiXinStudy.git][https_github.com_galis_WeiXinStudy.git]

整个逻辑就这样完成了,搞了2天,希望对你们有点帮助。

[20141209131029669]: /images/20220806/0441b029f4b7482ca157f93b1d10ac91.png
[https_github.com_galis_WeiXinStudy.git]: https://github.com/galis/WeiXinStudy.git