高仿微信界面

下面是安卓开发仿微信界面的代码。 分为3步，第一步是界面的编写，第二步是导航界面，第三步是右上角菜单栏。 开始第一步前先预览一下效果。 第一步，界面。 界面的思路是利用ViewPager+Fragment实现，所以activity_main.xml中添加一个ViewPager。顶部和底部include的顶部栏和底部栏后面再说。 MainActivity的界面activity_main.xml: &lt;?xml version="1.0" encoding="utf-8"?&gt; <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/layout_main_top" /> <android.support.v4.view.ViewPager android:id="@+id/vp_mainvp" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> </android.support.v4.view.ViewPager> <TextView android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#737373" /> <TextView android:layout_width="match_parent" android:layout_height="0.7dp" android:background="#101010" /> <include layout="@layout/layout_main_bottom" /> </LinearLayout> 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文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> </LinearLayout> 1 2 3 4 5 6 7 现在回到MainActivity中： package activity; import ... public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private MyFragmentPagerAdapter mAdapter; private List<Fragment> 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<Fragment>(); 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<Fragment> fragList; private List<String> tabList; public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> 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文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="52dp" android:orientation="horizontal"> <LinearLayout android:alpha="30" android:id="@+id/ll_taball" android:layout_width="match_parent" android:layout_height="52dp" android:background="#656d78" android:orientation="horizontal"> &lt;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"&gt; <Button android:id="@+id/bt_page_home" android:layout_width="35dp" android:layout_height="35dp" android:layout_gravity="center_horizontal" android:background="@drawable/home_pressed" android:clickable="false" /> <TextView android:id="@+id/tv_page_home" android:textColor="#ffd100" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="32dp" android:text="首页" /> &lt;/FrameLayout&gt; &lt;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"&gt; <Button android:id="@+id/bt_page_budget" android:layout_width="35dp" android:layout_height="35dp" android:layout_gravity="center_horizontal" android:background="@drawable/budget" android:clickable="false" /> <TextView android:textColor="#383838" android:id="@+id/tv_page_budget" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="32dp" android:text="记账" /> &lt;/FrameLayout&gt; &lt;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"&gt; <Button android:id="@+id/bt_page_more" android:layout_width="35dp" android:layout_height="35dp" android:layout_gravity="center_horizontal" android:background="@drawable/more" android:clickable="false" /> <TextView android:id="@+id/tv_page_more" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="32dp" android:text="更多" /> &lt;/FrameLayout&gt; </LinearLayout> </LinearLayout> 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<Fragment> 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<Fragment>(); 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文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="43dp" android:background="@color/colorTitleGray"> <TextView android:id="@+id/tv_top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center" android:text="首页" android:textColor="@color/ccd1d9white" android:textSize="20sp" /> <Button android:layout_marginRight="8dp" android:layout_width="28dp" android:layout_height="28dp" android:background="@drawable/selector_main_top_menu" android:layout_centerVertical="true" android:layout_alignParentEnd="true" android:id="@+id/bt_add" /> </RelativeLayout> 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: &lt;?xml version="1.0" encoding="utf-8"?&gt; <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginRight="5dp" android:layout_marginTop="20dp" android:background="@drawable/popmenu" android:orientation="vertical"> <LinearLayout android:id="@+id/ll_popmenu_record" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:paddingLeft="10dp" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:src="@mipmap/add" /> <TextView android:textColor="#aab2bd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center_vertical" android:text="记一笔" android:textSize="20sp" /> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="0.7dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#aab2bd" /> <LinearLayout android:id="@+id/ll_popmenu_book" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="8dp" android:gravity="center_vertical" android:orientation="horizontal" android:layout_marginBottom="8dp"> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:src="@mipmap/book" /> <TextView android:textColor="#aab2bd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center_vertical" android:text="账本切换" android:textSize="20sp" /> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="0.7dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#aab2bd" /> <LinearLayout android:id="@+id/ll_popmenu_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="8dp" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:src="@mipmap/search" /> <TextView android:textColor="#aab2bd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center_vertical" android:text="搜索账本" android:textSize="20sp" /> </LinearLayout> </LinearLayout> 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<Fragment> 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<Fragment>(); 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中，它的功能不同。 以上就算安卓模仿微信界面的步骤了