Android仿微信界面的导航以及右上角菜单栏效果

2024-08-03 07:05:22

下面是安卓开发仿微信界面的代码。

分为3步，

第一步是界面的编写;

第二步是导航界面;

第三步是右上角菜单栏。

开始第一步前先预览一下效果。

第一步，界面。

界面的思路是利用ViewPager+Fragment实现，所以activity_main.xml中添加一个ViewPager。顶部和底部include的顶部栏和底部栏后面再说。

MainActivity的界面activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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>

当然，要用到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;
 }
}

此Fragment对应的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

</LinearLayout>

现在回到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);
 }
}

需要编写一个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();
 }
}

现在三个Fragment已经添加到了MainActivity中，滑动ViewPager切换Fragment，同时底部的导航栏也会切换，在为ViewPager添加监听以前，先说说底部导航栏。

第二步，底部导航。

这个的切换其实就是切换准备好的png图片和改变文字的颜色。

下面是刚才导入的底部导航栏xml文件：

<?xml version="1.0" encoding="utf-8"?>
<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">
 <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">
 <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="首页" />
 </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">
 <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="记账" />
 </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">
 <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="更多" />
 </FrameLayout>
 </LinearLayout>
</LinearLayout>

继续回到对应的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));
 }
 }
}

最后加入的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));
 }
 }

第三步，顶部右上角菜单。

之前导入顶部栏的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<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>

对应菜单我们使用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));
 }
 }
 }

编写PopupWindow 的xml:

<?xml version="1.0" encoding="utf-8"?>
<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>

回到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));
 }
 }
}

右上角的按钮还添加了功能，在不同的Fragment中，它的功能不同。

以上就算安卓模仿微信界面的步骤了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android仿微信底部实现Tab选项卡切换效果

在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View
Android仿微信图片点击全屏效果

废话不多说,先看下效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以
Android仿微信照片选择器实现预览查看图片

好了下面进入正题,我们先看一下实现效果吧: 下面来介绍一下代码: 本思路就是: 1.先到手机中扫描jpeg和png的图片 2.获取导图片的路径和图片的父路径名也就是文件夹名 3.将图片路径和文件夹名分别添加导数据源中 4.数据源有了就是显示了,文件夹显示是利用的popwindow,而图片显示则是GridView 看一下具体代码: 首先开启一个线程去扫描图片 /** * 利用ContentProvider扫描手机中的图片,此方法在运行在子线程中完成图片的扫描,最终获得jpg最多的那个文件夹 */
Android自定义SwipeRefreshLayout高仿微信朋友圈下拉刷新

上一篇文章里把SwipeRefreshLayout的原理简单过了一下,大致了解了其工作原理,不熟悉的可以去看一下:http://www.jb51.net/article/89310.htm 上一篇里最后提到,SwipeRefreshLayout的可定制性是比较差的,看源码会发现跟样式相关的几个类都是private的而且方法是写死的,只暴露出了几个颜色设置的方法.这样使得SwipeRefreshLayout的使用比较简单,主要就是设置一个监听器在onRefresh方法里完成刷新逻辑.讲道理Swip
Android仿微信联系人按字母排序

App只要涉及到联系人的界面,几乎都是按照字母排序以及导航栏的方式.既然这个需求这么火,于是开始学习相关内容,此篇文章是我通过参考网上资料独立编写和总结的,希望多多少少对大家有所帮助,写的不好,还请各位朋友指教. 效果图如下: 实现这个效果,需要三个知识点 : 1:将字符串进行拼音分类 2:ExpandableListView 二级扩展列表 3:右边字母分类View 我们先一个一个来了解解决方案,再上代码. 实现字母分类: 字母分类又分为三个小要点:一个是将中文转化为拼音,一个是实现按照字母的
Android仿微信发表说说实现拍照、多图上传功能

本文实例为大家分享了Android仿微信发表说说.心情功能,供大家参考,具体内容如下既能实现拍照,选图库,多图案上传的案例,目前好多App都有类似微信朋友圈的功能,能过发表说说等附带图片上传.下面的就是实现该功能的过程:大家还没有看过Android Retrofit 2.0框架上传图片解决方案这篇文章,在看今天的就很容易,接在本项目中用到了一个library:photopicker,封装了图片的选择功能,是否选相机,还有选中图片后可以查看图片的功能. 一. 首先:将photopicker到工
android自定义popupwindow仿微信右上角弹出菜单效果

微信右上角的操作菜单看起来很好用,就照着仿了一下,不过是旧版微信的,手里刚好有一些旧版微信的资源图标,给大家分享一下. 不知道微信是用什么实现的,我使用popupwindow来实现,主要分为几块内容: 1.窗口布局文件:popwin_share.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com
Android仿微信发朋友圈浏览图片效果

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/
Android高仿微信聊天界面代码分享

微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav
android 仿微信聊天气泡效果实现思路

微信聊天窗口的信息效果类似iphone上的短信效果,以气泡的形式展现,在Android上,实现这种效果主要用到ListView和BaseAdapter,配合布局以及相关素材,就可以自己做出这个效果,素材可以下一个微信的APK,然后把后缀名改成zip,直接解压,就可以得到微信里面的所有素材了.首先看一下我实现的效果: 以下是工程目录结构: 接下来就是如何实现这个效果的代码: main.xml,这个是主布局文件,显示listview和上下两部分内容. 复制代码代码如下: <?xml version

Android仿微信界面的导航以及右上角菜单栏效果

相关推荐

随机推荐