微信从原版到现在所有界面图片_微信 7.0.5 版本更新,8个交互样式提升体验

点击上方 “三分设 ”  → 点击右上角“...” → 点选“设为星标  ”

赶快为三分设点上,帮助全球 1 亿设计师成长

c4a96a267f234a4e7a203364106278ed.png

正文共:1659 字 10 图  预计阅读时间:5 分钟

7月 16日晚上,微信 iOS 端更新 7.0.5 版本,根据官方介绍,我们一一来看一下这一次更新点和讨论其背后的原因。 

本次更新:

-可以把收藏笔记、文件预览等页面设为浮窗。

b29e178848d8ae92b4232aa95a0701fd.png

1、文章内容浮窗系统视觉样式更新

d14973d93be296f47e1055a7f0ac6b64.png

原版像 iOS 虚拟按键(圆版),像一块补丁,看文章的时候,有时候会有一些干扰。快捷关闭:将悬浮球移动到右下\左下角红色区域关闭。

7.0.5版像锤子 OS 的闪念胶囊(半透明版),可以左右贴附(上下不行哟),伴随着动效,新的样式从我个人感觉上变得更加轻便(透透的),也减少了一些阅读干扰。现在不能快捷关闭了。

同时新的样式必定带来新的功能

2、在线音乐、语音的进入浮窗系统

c548ef84a5e7685d35d9dd9d5acb2869.png

原版公众号内的语音、音乐播放时是不进入浮窗系统的,点击切换播放\暂停

新版采用类似文章设为浮窗一致的交互样式,采用了微信公用图标组件声波纹的图标头像,播放时并伴随着微动效,点击浮窗进入白色半透明遮罩页,然语音、音乐是脱离文章组合,自成一体,点击公众号文章切换播放\暂停的同时进入\退出浮窗系统。

同时新的样式必定带来新的功能

3、浮窗系统内可以添加多篇文章(最多5个)

5e0193b2fe716ca80b3827d7064db80a.png

从原来的单个浮窗球(只可以添加一篇文章内容)升级到可以收藏 5 篇文章内容的浮窗,每添加一篇文章浮窗内的头像样式组合有所不同,收藏 1-4 篇文章内容的时候,头像组合各自还会有具体头像,等到聚集 5 篇内容的时候,就组合成一个没有具体内容,只有颜色一朵菊花(算法)。好看。微信设计团队就是有想法,点赞。

同时收藏自家公众号 5 篇文章可以快捷的发送给自己的好朋友啦,小心一大波推文袭来。公号推手的小福利!(这5篇文章的优先层级是最高的)

除了公众号文章和相同属性的收藏夹中公众号文章是可以的,连小程序也是可以浮窗啦(我们要开始推广我们 《有言有料》小程序呀,但是收藏夹的语音、图片、文字笔记不行。(但是只能 5 篇,你觉得微信以后不会在拓展浮窗数量吗?)

4、朋友圈的视频自动播放

a9e05a649c4c7a48fd99afd03fedd208.png

新版在刷朋友圈的时候,你会发现小伙伴发布的内容是视频内容的话是自动播放的,但是是没有声音的,其实也是避免之后朋友圈吵的像菜市场一样,点进去才有声音、音乐是必然的设计,同时通过视频也是内容形式之一(文字、图片、语音、视频),微信应该不会把朋友圈简单的复制成抖音的浏览模式,但是会有一些借鉴和升级,毕竟用户接收内容形式的周期性升级是不可逆的)

伴随着安卓端7.0.5更新之后,朋友圈自动播放的功能,在相关设置中,仅给提供了移动网络下关注自动播放的权限。也就是说,在使用WIFI时,朋友圈视频自动播放是无法取消。这个么...就这样吧。

5、发布朋友圈视频内容可以添加背景音乐

c0f79bf726b118d15084e767b5a8efe7.png

这个必不可少的功能终于还是要来的,都微信总是比一般的要晚一点,毕竟用户多,少个功能要谨慎、谨慎在谨慎,但是用户的心声是巨大的。该来的总是要来的。做产品要「克制」,做人要「克己」。

6、公众号的主页布局样式更新

686285764e985a0b99c99628d4dcbc7c.png

公众号的主页,新版本将头部品牌介绍、导航入口、文章内容这三者的视觉样式重新的定义,层级更加分明,头部品牌介绍由原本的居中展示更新为用户习惯的阅读路径引导的方式设计。导航入口、文章内容都是卡片的形式设计也是顺应最近较为流行的设计风格,也变得更加沉浸。

7、全局底部动作栏变成统一圆角

8e21d55e09e14db9ac723d0cf9b5a3b4.png

底部动作栏也更新为圆角了,很多APP都是这样了,微信也算是顺应一些设计趋势吧,细节也算变得有设计感了,是否真像之前预言所说,微信团队加终于入了有设计情怀的设计师了。

8、付款页面样式更新+金额新增了「单位」提示

7ef1c0482c5590886cb86ef4d36d5718.png

原版样式真的太旧了,太粗糙了。

新版的付款页面样式更新的还蛮新爽的,终于更新了,另外的一个小细节也是非常的人性化,当金额数字满足千位、万位的时候,在金额数字下会出现有小小的「千」、「万」字的标注,来辅助提示金额的位数,很直接但又很友好,并且「¥」和金额数字的顶部是居然是对齐的,真的这一次的细节还蛮到位的。给微信的设计师点给赞...

总结

最近小马哥也出来站台,祝贺微信的用户日活首次超越 10 亿,一个拥有如此庞大的日在线用户量的社交产品,大社会,大生态。每一次的产品功能更新、交互视觉样式变化,都是需要非常非常慎重的,也需要微信团队的智慧和克制,如今微信的界面变得年轻了,变得清爽了,慢慢的应用一些新的设计趋势语言来迎接新一代年轻化的用户群体,是好是坏,不得而知,其背后的战略部署也不是我这种外人可以洞见的到的。看社交之间的战役,有意思..

如果有更多没有发现的更新小细节

请留言给我

683f83c5969bf137c7aac4d0a0ac3db0.png

cd56ebb9632ce2101150ccd12c8c2d7a.png

添加小助手,暗号:有言

欢迎加入有言论微信群与行业大咖一起沟通交流

2a15a5b998ddf193183393ac030c0c09.png

发现全球好文,阅读+翻译+分享

连接知识,帮助全球 1 亿设计师成长

8956c2551462955ecfc6012b89cd076c.png

添加组长,加入翻译特工队,暗号:翻译

bac80aeb2cbe40695c996223ffe9fb0a.png

如果你觉得这篇文章有一些帮助

记得一定分享给你朋友们

9655f36dd643fb847c87c5709e6c83ca.gif

三分设-发现设计力

e4efc320a05a74e0f1ddf25a80fddc9e.png

下面是安卓开发仿微信界面的代码。 分为3步,第一步是界面的编写,第二步是导航界面,第三步是右上角菜单栏。 开始第一步前先预览一下效果。 第一步,界面界面的思路是利用ViewPager+Fragment实现,所以activity_main.xml中添加一个ViewPager。顶部和底部include的顶部栏和底部栏后面再说。 MainActivity的界面activity_main.xml: <?xml version="1.0" encoding="utf-8"?> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 当然,要用到ViewPager+Fragment就要建立Fragment,如图我建了三个Fragment,这个可以根据需要自己创建。 这三个Fragment很类似,这里写出一个,其他以此类推。 package activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.chase.cn.money_of_my.R; /** * Created by Chase on 2017/2/6. */ public class Fragment_tab01 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View tab01 = inflater.inflate(R.layout.fragment_tab01_home,container,false); return tab01; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 此Fragment对应的xml文件: <?xml version="1.0" encoding="utf-8"?> 1 2 3 4 5 6 7 现在回到MainActivity中: package activity; import ... public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private MyFragmentPagerAdapter mAdapter; private List fragmentList; //保存界面的view @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); StatusBarUtil.setWindowStatusBarColor(this, R.color.colorTitleGray); initViews(); initDatas(); } /** * 数据初始化 */ private void initDatas() { //fragment数据源 fragmentList = new ArrayList(); fragmentList.add(new Fragment_tab01()); fragmentList.add(new Fragment_tab02()); fragmentList.add(new Fragment_tab03()); mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList); mViewPager.setAdapter(mAdapter); } /** * 初始化控件 */ private void initViews() { mViewPager = (ViewPager) findViewById(R.id.vp_mainvp); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 需要编写一个ViewPager的Adapter: package utils; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by Chase on 2017/2/6. */ public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private List fragList; private List tabList; public MyFragmentPagerAdapter(FragmentManager fm, List fragList) { super(fm); this.fragList = fragList; } @Override public CharSequence getPageTitle(int position) { return tabList.get(position); } @Override public Fragment getItem(int position) { return fragList.get(position); } @Override public int getCount() { return fragList.size(); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 现在三个Fragment已经添加到了MainActivity中,滑动ViewPager切换Fragment,同时底部的导航栏也会切换,在为ViewPager添加监听以前,先说说底部导航栏。 第二步,底部导航。 这个的切换其实就是切换准备好的png图片和改变文字的颜色。 下面是刚才导入的底部导航栏xml文件: <?xml version="1.0" encoding="utf-8"?> <FrameLayout android:id="@+id/fl_page_home" android:layout_width="wrap_content" android:layout_height="57dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> </FrameLayout> <FrameLayout android:id="@+id/fl_page_budget" android:layout_width="wrap_content" android:layout_height="57dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> </FrameLayout> <FrameLayout android:id="@+id/fl_page_more" android:layout_width="wrap_content" android:layout_height="57dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> </FrameLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 继续回到对应的MainActivity:并加入了按两次回退键退出程序。 package activity; import ... public class MainActivity extends FragmentActivity implements View.OnClickListener { private ViewPager mViewPager; private MyFragmentPagerAdapter mAdapter; private List fragmentList; //保存界面的view private FrameLayout fl_page_home, fl_page_budget, fl_page_more; private LinearLayout ll_taball; private Button bt_page_home, bt_page_budget, bt_page_more; private TextView tv_page_home; private TextView tv_page_budget; private TextView tv_page_more; private TextView tv_top_title; //onkeydown_ private static boolean isQuit = false; private Timer timer = new Timer(); //onResult的码 private static final int addActivityRequestCodeOfPage2 = 0,addActivityRequestCodeOfPage1=1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); StatusBarUtil.setWindowStatusBarColor(this, R.color.colorTitleGray); initViews(); setViewPagerEvent(); initEvents(); initDatas(); } @Override protected void onRestart() { super.onRestart(); } /** * viewPager切换页面的事件 */ private void setViewPagerEvent() { //设置viewpager的page监听换bottom按钮颜色 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { int currentItem = mViewPager.getCurrentItem(); switch (currentItem) { case 0: resetImgAndTextColorAndButton(); bt_page_home.setBackgroundResource(R.drawable.home_pressed); tv_page_home.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("首页"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_main_top_menu); break; case 1: resetImgAndTextColorAndButton(); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("记录"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_add_button); break; case 2: resetImgAndTextColorAndButton(); bt_page_more.setBackgroundResource(R.drawable.more_pressed); tv_page_more.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("更多"); bt_add.setVisibility(View.INVISIBLE); break; default: break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 数据初始化 */ private void initDatas() { //fragment数据源 fragmentList = new ArrayList(); fragmentList.add(new Fragment_tab01()); fragmentList.add(new Fragment_tab02()); fragmentList.add(new Fragment_tab03()); mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList); mViewPager.setAdapter(mAdapter); } /** * 初始化事件 */ private void initEvents() { fl_page_home.setOnClickListener(this); fl_page_budget.setOnClickListener(this); fl_page_more.setOnClickListener(this); bt_add.setOnClickListener(this); } /** * 初始化控件 */ private void initViews() { mViewPager = (ViewPager) findViewById(R.id.vp_mainvp); //底部的布局 fl_page_home = (FrameLayout) findViewById(R.id.fl_page_home); fl_page_budget = (FrameLayout) findViewById(R.id.fl_page_budget); fl_page_more = (FrameLayout) findViewById(R.id.fl_page_more); //底部的按钮 bt_page_home = (Button) findViewById(R.id.bt_page_home); bt_page_budget = (Button) findViewById(R.id.bt_page_budget); bt_page_more = (Button) findViewById(R.id.bt_page_more); //按钮对应文字的颜色 tv_page_home = (TextView) findViewById(R.id.tv_page_home); tv_page_budget = (TextView) findViewById(R.id.tv_page_budget); tv_page_more = (TextView) findViewById(R.id.tv_page_more); //顶部状态栏文字 tv_top_title = (TextView) findViewById(R.id.tv_top_title); ll_taball = (LinearLayout) findViewById(R.id.ll_taball); //记一笔按钮 bt_add = (Button) findViewById(R.id.bt_add); bt_add.setVisibility(View.VISIBLE); } /** * 点击下面的布局按钮事件 * * @param v */ @Override public void onClick(View v) { resetImgAndTextColorAndButton(); switch (v.getId()) { /** * 底部导航栏按钮 */ case R.id.fl_page_home: mViewPager.setCurrentItem(0);//如果首页 切换首页 bt_page_home.setBackgroundResource(R.drawable.home_pressed);//并将按钮颜色点亮 tv_page_home.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("首页"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_main_top_menu); break; case R.id.fl_page_budget: mViewPager.setCurrentItem(1); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("记录"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_add_button); break; case R.id.fl_page_more: mViewPager.setCurrentItem(2); bt_page_more.setBackgroundResource(R.drawable.more_pressed); tv_page_more.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("更多"); bt_add.setVisibility(View.INVISIBLE); break; default: break; } } /** * 设置所有图片暗色和文字 */ private void resetImgAndTextColorAndButton() { bt_page_home.setBackgroundResource(R.drawable.home); bt_page_budget.setBackgroundResource(R.drawable.budget); bt_page_more.setBackgroundResource(R.drawable.more); tv_page_home.setTextColor(Color.rgb(56, 56, 56)); tv_page_budget.setTextColor(Color.rgb(56, 56, 56)); tv_page_more.setTextColor(Color.rgb(56, 56, 56)); } /** * 回退按钮两次退出 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { if (isQuit == false) { isQuit = true; ToastUtil.showToast(getApplicationContext(), "请按两次回退键退出", 3000); TimerTask task = null; task = new TimerTask() { @Override public void run() { isQuit = false; } }; timer.schedule(task, 2000); } else { finish(); System.exit(0); } } return true; } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == addActivityRequestCodeOfPage2) { mViewPager.setCurrentItem(1); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); }else if (requestCode==addActivityRequestCodeOfPage1){ bt_page_home.setBackgroundResource(R.drawable.home_pressed); tv_page_home.setTextColor(Color.rgb(255, 209, 0)); } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 最后加入的onActivityResult是对应如下情况,如果在某个Fragment中对应进去了其他的Activity时,返回以后导航栏是没有之前的显示的,所以如下就要返回原来的显示。 @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == addActivityRequestCodeOfPage2) { mViewPager.setCurrentItem(1); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); }else if (requestCode==addActivityRequestCodeOfPage1){ bt_page_home.setBackgroundResource(R.drawable.home_pressed); tv_page_home.setTextColor(Color.rgb(255, 209, 0)); } } 1 2 3 4 5 6 7 8 9 10 11 12 第三步,顶部右上角菜单。 之前导入顶部栏的xml文件: <?xml version="1.0" encoding="utf-8"?> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 对应菜单我们使用PopupWindow 。 package views; import ... /** * Created by Chase on 2017/2/23. */ public class TopPopWindow extends PopupWindow { private View mView; private LinearLayout ll_popmenu_record,ll_popmenu_book,ll_popmenu_search; public TopPopWindow(Activity paramActivity, View.OnClickListener paramOnClickListener, int paramInt1, int paramInt2){ mView = LayoutInflater.from(paramActivity).inflate(R.layout.popwindow_topright, null); ll_popmenu_record = (LinearLayout) mView.findViewById(R.id.ll_popmenu_record); ll_popmenu_book = (LinearLayout) mView.findViewById(R.id.ll_popmenu_book); ll_popmenu_search = (LinearLayout) mView.findViewById(R.id.ll_popmenu_search); if (paramOnClickListener != null){ //设置点击监听 ll_popmenu_record.setOnClickListener(paramOnClickListener); ll_popmenu_book.setOnClickListener(paramOnClickListener); ll_popmenu_search.setOnClickListener(paramOnClickListener); setContentView(mView); //设置宽度 setWidth(paramInt1); //设置高度 setHeight(paramInt2); //设置显示隐藏动画 setAnimationStyle(R.style.AnimTools); //设置背景透明 setBackgroundDrawable(new ColorDrawable(0)); } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 编写PopupWindow 的xml: <?xml version="1.0" encoding="utf-8"?> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 回到MainActivity: package activity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.KeyEvent; import android.view.View; import android.widget.Button; import android.widget.FrameLayout; import android.widget.LinearLayout; import android.widget.TextView; import com.chase.cn.money_of_my.R; import java.util.ArrayList; import java.util.List; import java.util.Timer; import java.util.TimerTask; import utils.MyFragmentPagerAdapter; import utils.StatusBarUtil; import utils.ToastUtil; import views.TopPopWindow; public class MainActivity extends FragmentActivity implements View.OnClickListener { private ViewPager mViewPager; private MyFragmentPagerAdapter mAdapter; private List fragmentList; //保存界面的view private FrameLayout fl_page_home, fl_page_budget, fl_page_more; private LinearLayout ll_taball; private Button bt_page_home, bt_page_budget, bt_page_more; private Button bt_add; private TextView tv_page_home; private TextView tv_page_budget; private TextView tv_page_more; private TextView tv_top_title; //onkeydown_ private static boolean isQuit = false; private Timer timer = new Timer(); //onResult的码 private static final int addActivityRequestCodeOfPage2 = 0,addActivityRequestCodeOfPage1=1; private TopPopWindow topPopWindow; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); StatusBarUtil.setWindowStatusBarColor(this, R.color.colorTitleGray); initViews(); setViewPagerEvent(); initEvents(); initDatas(); } @Override protected void onRestart() { super.onRestart(); } /** * viewPager切换页面的事件 */ private void setViewPagerEvent() { //设置viewpager的page监听换bottom按钮颜色 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { int currentItem = mViewPager.getCurrentItem(); switch (currentItem) { case 0: resetImgAndTextColorAndButton(); bt_page_home.setBackgroundResource(R.drawable.home_pressed); tv_page_home.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("首页"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_main_top_menu); break; case 1: resetImgAndTextColorAndButton(); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("记录"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_add_button); break; case 2: resetImgAndTextColorAndButton(); bt_page_more.setBackgroundResource(R.drawable.more_pressed); tv_page_more.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("更多"); bt_add.setVisibility(View.INVISIBLE); break; default: break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 数据初始化 */ private void initDatas() { //fragment数据源 fragmentList = new ArrayList(); fragmentList.add(new Fragment_tab01()); fragmentList.add(new Fragment_tab02()); fragmentList.add(new Fragment_tab03()); mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList); mViewPager.setAdapter(mAdapter); } /** * 初始化事件 */ private void initEvents() { fl_page_home.setOnClickListener(this); fl_page_budget.setOnClickListener(this); fl_page_more.setOnClickListener(this); bt_add.setOnClickListener(this); } /** * 初始化控件 */ private void initViews() { mViewPager = (ViewPager) findViewById(R.id.vp_mainvp); //底部的布局 fl_page_home = (FrameLayout) findViewById(R.id.fl_page_home); fl_page_budget = (FrameLayout) findViewById(R.id.fl_page_budget); fl_page_more = (FrameLayout) findViewById(R.id.fl_page_more); //底部的按钮 bt_page_home = (Button) findViewById(R.id.bt_page_home); bt_page_budget = (Button) findViewById(R.id.bt_page_budget); bt_page_more = (Button) findViewById(R.id.bt_page_more); //按钮对应文字的颜色 tv_page_home = (TextView) findViewById(R.id.tv_page_home); tv_page_budget = (TextView) findViewById(R.id.tv_page_budget); tv_page_more = (TextView) findViewById(R.id.tv_page_more); //顶部状态栏文字 tv_top_title = (TextView) findViewById(R.id.tv_top_title); ll_taball = (LinearLayout) findViewById(R.id.ll_taball); //记一笔按钮 bt_add = (Button) findViewById(R.id.bt_add); bt_add.setVisibility(View.VISIBLE); } /** * 点击下面的布局按钮事件 * * @param v */ @Override public void onClick(View v) { resetImgAndTextColorAndButton(); switch (v.getId()) { /** * 底部导航栏按钮 */ case R.id.fl_page_home: mViewPager.setCurrentItem(0);//如果首页 切换首页 bt_page_home.setBackgroundResource(R.drawable.home_pressed);//并将按钮颜色点亮 tv_page_home.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("首页"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_main_top_menu); break; case R.id.fl_page_budget: mViewPager.setCurrentItem(1); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("记录"); bt_add.setVisibility(View.VISIBLE); bt_add.setBackgroundResource(R.drawable.selector_add_button); break; case R.id.fl_page_more: mViewPager.setCurrentItem(2); bt_page_more.setBackgroundResource(R.drawable.more_pressed); tv_page_more.setTextColor(Color.rgb(255, 209, 0)); tv_top_title.setText("更多"); bt_add.setVisibility(View.INVISIBLE); break; /** * 记一笔按钮 */ case R.id.bt_add: if (mViewPager.getCurrentItem() == 1) { Intent intent_add_activity = new Intent(getApplicationContext(), AddRecorderActivity.class); startActivityForResult(intent_add_activity, addActivityRequestCodeOfPage2); } else { bt_page_home.setBackgroundResource(R.drawable.home_pressed);//并将按钮颜色点亮 tv_page_home.setTextColor(Color.rgb(255, 209, 0)); showTopRightPopMenu(); } break; /** * popwindow引入的方法的onclick的listener引入到this * popwindow的点击事件 */ case R.id.ll_popmenu_record: Intent intent_add_activity = new Intent(getApplicationContext(), AddRecorderActivity.class); startActivityForResult(intent_add_activity,addActivityRequestCodeOfPage1); topPopWindow.dismiss(); break; case R.id.ll_popmenu_book: ToastUtil.showSucceccToast(getApplicationContext(), "success12", 3000); break; case R.id.ll_popmenu_search: ToastUtil.showSucceccToast(getApplicationContext(), "success13", 3000); break; default: break; } } /** * 显示右上角popup菜单 */ private void showTopRightPopMenu() { if (topPopWindow == null) { //(activity,onclicklistener,width,height) topPopWindow = new TopPopWindow(MainActivity.this, this, 360, 290); //监听窗口的焦点事件,点击窗口外面则取消显示 topPopWindow.getContentView().setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (!hasFocus) { topPopWindow.dismiss(); } } }); } //设置默认获取焦点 topPopWindow.setFocusable(true); //以某个控件的x和y的偏移量位置开始显示窗口 topPopWindow.showAsDropDown(bt_add, 0, 0); //如果窗口存在,则更新 topPopWindow.update(); } /** * 设置所有图片暗色和文字 */ private void resetImgAndTextColorAndButton() { bt_page_home.setBackgroundResource(R.drawable.home); bt_page_budget.setBackgroundResource(R.drawable.budget); bt_page_more.setBackgroundResource(R.drawable.more); tv_page_home.setTextColor(Color.rgb(56, 56, 56)); tv_page_budget.setTextColor(Color.rgb(56, 56, 56)); tv_page_more.setTextColor(Color.rgb(56, 56, 56)); } /** * 回退按钮两次退出 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { if (isQuit == false) { isQuit = true; ToastUtil.showToast(getApplicationContext(), "请按两次回退键退出", 3000); TimerTask task = null; task = new TimerTask() { @Override public void run() { isQuit = false; } }; timer.schedule(task, 2000); } else { finish(); System.exit(0); } } return true; } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == addActivityRequestCodeOfPage2) { mViewPager.setCurrentItem(1); bt_page_budget.setBackgroundResource(R.drawable.budget_pressed); tv_page_budget.setTextColor(Color.rgb(255, 209, 0)); }else if (requestCode==addActivityRequestCodeOfPage1){ bt_page_home.setBackgroundResource(R.drawable.home_pressed); tv_page_home.setTextColor(Color.rgb(255, 209, 0)); } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 右上角的按钮还添加了功能,在不同的Fragment中,它的功能不同。 以上就算安卓模仿微信界面的步骤了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值