仿微信6.0的界面按钮切换产生渐变效果

最近看了一个视频讲的是自定义个view模仿微信的四个菜单按钮切换时的颜色产生渐变的效果，最后实现出来感觉好不错所以我就做了总结希望对你们有用。

先看效果吧，不知道用什么软件来录制gif图你们就凑合看吧，大概的效果打开微信自己左右滑动看看。

默认的样式：

滑动中的样式：

切换后的效果：

基本的效果和radiobutton实现的一样。。。。

在滑动的过程中设置aplha : mPaint.setAlpha(alpha);

               mTextPaint.setAlpha(alpha);

具体的代码

R.layout.activity_weixin_menu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zdd="http://schemas.android.com/apk/res/com.nz.zdd.zlistview"
    android:id="@+id/activity_weixin_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"><android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" /><LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/tab_bj"
        android:orientation="horizontal"><com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_messages"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_start_conversation"
            zdd:text="@string/tab_message"
            zdd:text_size="12sp" /><com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_books"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_friendslist"
            zdd:text="@string/tab_contact"
            zdd:text_size="12sp" /><com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_founds"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_search"
            zdd:text="@string/tab_found"
            zdd:text_size="12sp" /><com.nz.zdd.zlistview.widget.ZWidgetView
            android:id="@+id/icon_am"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            zdd:color="#ff45c01a"
            zdd:icon="@mipmap/ic_menu_my_calendar"
            zdd:text="@string/tab_me"
            zdd:text_size="12sp" /></LinearLayout></LinearLayout>

attr

<?xml version="1.0" encoding="utf-8"?>
<resources><attr name="icon" format="reference" /><attr name="color" format="color" /><attr name="text" format="string" /><attr name="text_size" format="dimension" /><declare-styleable name="ZWidgetView"><attr name="icon" /><attr name="color" /><attr name="text" /><attr name="text_size" /></declare-styleable>
</resources>

自定义的view

activity中调用的方法：

基本就这样了希望对你们有帮助

package com.nz.zdd.zlistview.activity;import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.Window;import com.nz.zdd.zlistview.R;
import com.nz.zdd.zlistview.fragment.TabFragment;
import com.nz.zdd.zlistview.fragment.TabFragmentFour;
import com.nz.zdd.zlistview.fragment.TabFragmentThree;
import com.nz.zdd.zlistview.fragment.TabFragmentTwo;
import com.nz.zdd.zlistview.widget.ZWidgetView;import java.lang.reflect.Field;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;public class WeixinMenuActivity extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {private ActionBar actionBar;private ViewPager viewPager;private FragmentPagerAdapter fadapeter;public List<Fragment> list = new ArrayList<>();public List<ZWidgetView> zWidgetViews = new ArrayList<>();private ZWidgetView zMessages, zBooks, zFounds, zAm;@Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_weixin_menu);setNo();getActionBar().setDisplayShowHomeEnabled(false);addData();initView();initEvent();}private void initEvent() {viewPager.setOnPageChangeListener(this);}private void initView() {viewPager = (ViewPager) findViewById(R.id.viewpager);fadapeter = new FragmentPagerAdapter(getSupportFragmentManager()) {@Override
            public Fragment getItem(int position) {return list.get(position);}@Override
            public int getCount() {return list.size();}};viewPager.setAdapter(fadapeter);zMessages = (ZWidgetView) findViewById(R.id.icon_messages);zMessages.setOnClickListener(this);zWidgetViews.add(zMessages);zBooks = (ZWidgetView) findViewById(R.id.icon_books);zBooks.setOnClickListener(this);zWidgetViews.add(zBooks);zFounds = (ZWidgetView) findViewById(R.id.icon_founds);zFounds.setOnClickListener(this);zWidgetViews.add(zFounds);zAm = (ZWidgetView) findViewById(R.id.icon_am);zAm.setOnClickListener(this);zWidgetViews.add(zAm);zMessages.setIconAlpha(1.0f);}public void addData() {list.add(new TabFragment());list.add(new TabFragmentTwo());list.add(new TabFragmentThree());list.add(new TabFragmentFour());}@Override
    public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.demo_menu, menu);return true;}private void setNo() {try {ViewConfiguration configuration = ViewConfiguration.get(this);Field menuKry = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");menuKry.setAccessible(true);menuKry.setBoolean(configuration, false);} catch (Exception e) {e.printStackTrace();}}/**
     * 显示overflower菜单图标
     */
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {if (menu.getClass().getSimpleName().equals("MenuBuilder")) {try {Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);m.setAccessible(true);m.invoke(menu, true);} catch (Exception e) {}}}return super.onMenuOpened(featureId, menu);}@Override
    public void onClick(View v) {resetOtherTabs();switch (v.getId()) {case R.id.icon_messages:viewPager.setCurrentItem(0, false);zWidgetViews.get(0).setIconAlpha(1.0f);break;case R.id.icon_books:viewPager.setCurrentItem(1, false);zWidgetViews.get(1).setIconAlpha(1.0f);break;case R.id.icon_founds:viewPager.setCurrentItem(2, false);zWidgetViews.get(2).setIconAlpha(1.0f);break;case R.id.icon_am:viewPager.setCurrentItem(3, false);zWidgetViews.get(3).setIconAlpha(1.0f);break;}}/**
     * 重置其他tab的颜色
     */
    private void resetOtherTabs() {for (int i = 0; i < zWidgetViews.size(); i++) {zWidgetViews.get(i).setIconAlpha(0);}}@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {if (positionOffset > 0) {ZWidgetView left = zWidgetViews.get(position);ZWidgetView right = zWidgetViews.get(position + 1);left.setIconAlpha(1 - positionOffset);right.setIconAlpha(positionOffset);}}@Override
    public void onPageSelected(int position) {}@Override
    public void onPageScrollStateChanged(int state) {}}

package com.nz.zdd.zlistview.widget;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.os.Looper;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;import com.nz.zdd.zlistview.R;/**
 * Created by Admin on 2016/10/25.
 */

public class ZWidgetView extends View {public int mColor = 0xff45c01a;private Bitmap mIconBitmap;private String mText = "微信";private int mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics());private Canvas mCancas;private Bitmap mBitmap;//照片的画笔
    private Paint mPaint;private float mAlpha;//绘制icon矩形
    private Rect mIconRect;//绘制TextView矩形
    private Rect mTextBound;//TextView的画笔
    private Paint mTextPaint;private static final String INSTANCE_STATUS = "instance_stats";private static final String STATUS_ALPHA = "instance_alpha";/**
     * 动态设置alpha值
     *
     * @param alpha
     */
    public void setIconAlpha(float alpha) {this.mAlpha = alpha;invalidateView();}/**
     * 重绘
     */
    private void invalidateView() {if (Looper.getMainLooper() == Looper.myLooper()) {invalidate();} else {postInvalidate();}}public ZWidgetView(Context context) {this(context, null);}public ZWidgetView(Context context, AttributeSet attrs) {this(context, attrs, 0);}/**
     * 获取自定义控件属性
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public ZWidgetView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.ZWidgetView);int n = typedArray.getIndexCount();for (int i = 0; i < n; i++) {int attr = typedArray.getIndex(i);switch (attr) {case R.styleable.ZWidgetView_icon:BitmapDrawable drawable = (BitmapDrawable) typedArray.getDrawable(i);mIconBitmap = drawable.getBitmap();break;case R.styleable.ZWidgetView_color:mColor = typedArray.getColor(attr, 0xff45c01a);break;case R.styleable.ZWidgetView_text:mText = typedArray.getString(i);break;case R.styleable.ZWidgetView_text_size:mTextSize = (int) typedArray.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,12, getResources().getDisplayMetrics()));break;}}typedArray.recycle();mTextBound = new Rect();mTextPaint = new Paint();mTextPaint.setTextSize(mTextSize);mTextPaint.setColor(0xff55555);mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);}@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int iconWidth = Math.min(getMeasuredWidth()- getPaddingLeft()- getPaddingRight(),getMeasuredHeight() - getPaddingTop()- getPaddingBottom() - mTextBound.height());int left = getMeasuredWidth() / 2 - iconWidth / 2;int top = (getMeasuredHeight() - mTextBound.height()) / 2 - iconWidth / 2;//画出图片的矩形
        mIconRect = new Rect(left, top, left + iconWidth, top + iconWidth);}@Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawBitmap(mIconBitmap, null, mIconRect, null);int alpha = (int) Math.ceil(255 * mAlpha);//设置底部可变色的icon
        setupTargetBitmap(alpha);//设置底部文字
        drawSourceText(canvas, alpha);drawTargerText(canvas, alpha);//将照片绘制上去
        canvas.drawBitmap(mBitmap, 0, 0, null);}/**
     * @param canvas
     * @param alpha
     */
    private void drawTargerText(Canvas canvas, int alpha) {mTextPaint.setColor(mColor);mTextPaint.setAlpha(alpha);int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;int y = mIconRect.bottom + mTextBound.height();canvas.drawText(mText, x, y, mTextPaint);}//设置底部的文本
    private void drawSourceText(Canvas canvas, int alpha) {mTextPaint.setColor(0xff333333);mTextPaint.setAlpha(255 - alpha);int x = getMeasuredWidth() / 2 - mTextBound.width() / 2;int y = mIconRect.bottom + mTextBound.height();canvas.drawText(mText, x, y, mTextPaint);}/**
     * 设置底部按钮的渐变值
     *
     * @param alpha
     */
    private void setupTargetBitmap(int alpha) {mPaint = new Paint();mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);mCancas = new Canvas(mBitmap);mPaint.setColor(mColor);mPaint.setDither(true);mPaint.setAlpha(alpha);mPaint.setAntiAlias(true);mCancas.drawRect(mIconRect, mPaint);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));mCancas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);}@Override
    protected Parcelable onSaveInstanceState() {Bundle bundle = new Bundle();bundle.putParcelable(INSTANCE_STATUS, super.onSaveInstanceState());bundle.putFloat(STATUS_ALPHA, mAlpha);return bundle;}@Override
    protected void onRestoreInstanceState(Parcelable state) {if (state instanceof Bundle) {Bundle bundle = (Bundle) state;mAlpha = bundle.getFloat(STATUS_ALPHA);super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATUS));return;}super.onRestoreInstanceState(state);}
}

仿微信6.0的界面按钮切换产生渐变效果相关推荐

Android 高仿微信6.0主界面带你玩转切换图标变色
目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述学习And ...
仿微信6.0 主界面导航：左右滑动的ViewPager+渐变色的底部菜单
本项目封面图: 思路: body部分用ViewPager ,底部的图片渐变 ,可以调整两张重叠图片的透明度来实现. 1.底部的导航菜单,是自定义的一个布局.代码如下: package com.sam ...
（仿头条APP项目）2.主界面按钮切换Fragment页面
文章目录主界面按钮切换Fragment页面效果展示框架结构 xml视图主视图选择器和style java代码模块创建4个Fragment 1.绑定按钮选择事件 2.初始化和用HashMap ...
JavaScript结合Bootstrap仿微信后台多图文界面管理
这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供 ...
Android 仿微信添加群聊界面——addView
仿微信添加群聊界面--addView 转载于:https://www.cnblogs.com/zhujiabin/p/5916746.html
html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...
NET仿微信Oauth2.0
这个文章先说一说Oauth2.0的原理,再到应用场景,最后才是代码实现,这样才学会最终的思想,并在应用场景使用,所谓实践出真理. 1,Oauth2.0的原理 OAuth是一个关于授权(authoriz ...
如何让小程序页面更顺滑_微信小程序|实现界面滑动切换
问题描述在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢? 解决方案图 1 标签页切换在图1中,顶部的 3 个标签页标题用 ...
Android 平板中自定义键盘(popuwindow) 居于屏幕左下方仿微信的密码输入界面
之前博客中,介绍过使用谷歌提供的键盘的一些api,可以很好地自定义键盘,参考我之前的博客链接:android 自定义键盘 ,这个有一个局限性,只能占满屏幕,无法做到只能占一部分的需求键盘,如下图我平板 ...

仿微信6.0的界面按钮切换产生渐变效果

仿微信6.0的界面按钮切换产生渐变效果相关推荐

最新文章

热门文章