仿微信6.0的界面按钮切换产生渐变效果
2024-05-10 03:33:38
最近看了一个视频讲的是自定义个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 自定义键盘 ,这个有一个局限性,只能占满屏幕,无法做到只能占一部分的需求键盘,如下图我平板 ...
最新文章
- TCP/IP学习入门笔记
- IE8的 JS 引擎如此不堪（二） - 解决方案
- JS当中的无限分类递归树
- pygame.error: video system not initialized的解决办法
- spring+hibernate的clob大字段处理
- c语言将整数的各个位数的数字分别提取_C语言学习：单位转换问题的一些思路...
- qtqpixmap不出现图片_亚马逊对产品图片有哪些基本要求
- 谷歌输入法/谷歌拼音输入法/WIN7好用的输入法
- Java性能优化面试题汇总
- mysql 批量 插入或更新
- 15款超好用的新浪微博短链接在线生成器(新浪t.cn、腾讯url.cn)
- android 网络 adb,Android设备通过网络adb 调试
- Flask 物联网局部应用情景
- 域名申请攻略(以godaddy+支付宝为例)
- 数据结构—串-基本知识点（第五章）
- CNN网络的搭建（Lenet5与ResNet18）
- 中标麒麟系统u盘安装_U盘安装中标麒麟Linux桌面版的方法
- Linux 命令行操作 while read ； cut 提取指定列； uniq命令并计数；sort 命令倒序查找
- 线程局部变量 ThreadLocal
- # 如何获取父节点和子节点