Android中微信主界面菜单栏的布局实现代码

最近一段时间进了Android的大坑，一门心思的学习Android大法，读了两三本书，就萌生了模仿微信界面的想法。

分析Android版本的微信界面需求就会发现它的核心，不得不佩服微信界面的简洁和灵活。腾讯的设计大法还是颇有一番味道的。目前我模仿的界面仅限于表面。核心部分只能说心有余力不足了。

滑动界面的实现是基于Fragment类实现的，但是它有先天不足，不能使用滑动转换界面。所以，我使用了Fragment和viewPager混合实现界面需求功能。

具体代码如下，仅仅提供大体思路。

1、主Activity的Java代码

package com.example.app_weixin;import android.content.Intent;import android.media.Image;import android.provider.SyncStateContract;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.KeyEvent;import android.view.Menu;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.PopupMenu;import android.widget.RelativeLayout;import android.widget.TextView;import java.lang.reflect.Method;import java.util.ArrayList;import java.util.List;public class MainActivity extends FragmentActivity {private FragmentManager fragmentManager;private FragmentTransaction transaction;private Fragment wechatFragment;private ImageView wechatImageView;private TextView wechatTextView;private Fragment contactFragment;private ImageView contactImageView;private TextView contactTextView;private Fragment findFragment;private ImageView findImageView;private TextView findTextView;private Fragment profileFragment;private ImageView profileImageView;private TextView profileTextView;private RelativeLayout wechatLayout,contactLayout,findLayout,profileLayout;private ViewPager viewPager;private ImageView menuView,searchView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initFragmentView();}/*实例化控件*/void initView(){wechatImageView=(ImageView)findViewById(R.id.wechat_iv);wechatTextView=(TextView)findViewById(R.id.wechat_tv);contactImageView=(ImageView)findViewById(R.id.contact_iv);contactTextView=(TextView)findViewById(R.id.contact_tv);findImageView=(ImageView)findViewById(R.id.find_iv);findTextView=(TextView)findViewById(R.id.find_tv);profileImageView=(ImageView)findViewById(R.id.profile_iv);profileTextView=(TextView)findViewById(R.id.profile_tv);wechatLayout=(RelativeLayout)findViewById(R.id.re_wechat);contactLayout=(RelativeLayout)findViewById(R.id.re_contact);findLayout=(RelativeLayout)findViewById(R.id.re_find);profileLayout=(RelativeLayout)findViewById(R.id.re_profile);menuView=(ImageView)findViewById(R.id.add);searchView=(ImageView)findViewById(R.id.search);searchView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent mintent=new Intent(MainActivity.this,SearchActivity.class);startActivity(mintent);overridePendingTransition(R.animator.animator_in,R.animator.animator_out);}});menuView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {PopupMenu popupMenu=new PopupMenu(MainActivity.this,v);popupMenu.getMenuInflater().inflate(R.menu.menu,popupMenu.getMenu());/*暴力破解为menu添加icon问题。失败了。*//*if (popupMenu!=null){try {Method method=popupMenu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);method.setAccessible(true);method.invoke(popupMenu,true);}catch (Exception e){e.printStackTrace();}}*/popupMenu.show();}});wechatLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {viewPager.setCurrentItem(0);initFragment(4);wechatImageView.setImageResource(R.drawable.weixin_pressed);wechatTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));}});contactLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {viewPager.setCurrentItem(1);initFragment(4);contactImageView.setImageResource(R.drawable.contact_list_pressed);contactTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));}});findLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {viewPager.setCurrentItem(2);initFragment(4);findImageView.setImageResource(R.drawable.find_pressed);findTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));}});profileLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {viewPager.setCurrentItem(3);initFragment(4);profileImageView.setImageResource(R.drawable.profile_pressed);profileTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));}});initFragment(0);wechatImageView.setImageResource(R.drawable.weixin_pressed);wechatTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));}void initFragment(int index){//fragmentManager=getSupportFragmentManager();//transaction=fragmentManager.beginTransaction();wechatTextView.setTextColor(getResources().getColor(R.color.colorTextViewNormal));wechatImageView.setImageResource(R.drawable.weixin_normal);contactTextView.setTextColor(getResources().getColor(R.color.colorTextViewNormal));contactImageView.setImageResource(R.drawable.contact_list_normal);findTextView.setTextColor(getResources().getColor(R.color.colorTextViewNormal));findImageView.setImageResource(R.drawable.find_normal);profileTextView.setTextColor(getResources().getColor(R.color.colorTextViewNormal));profileImageView.setImageResource(R.drawable.profile_normal);switch (index) {case 0:wechatImageView.setImageResource(R.drawable.weixin_pressed);wechatTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));break;case 1:contactImageView.setImageResource(R.drawable.contact_list_pressed);contactTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));break;case 2:findImageView.setImageResource(R.drawable.find_pressed);findTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));break;case 3:profileImageView.setImageResource(R.drawable.profile_pressed);profileTextView.setTextColor(getResources().getColor(R.color.colorTextViewPress));break;default:break;}/*仅仅使用fragment的形式，被遗弃了*//* if (wechatFragment!=null){transaction.hide(wechatFragment);}if (contactFragment!=null){transaction.hide(contactFragment);}if (findFragment!=null){transaction.hide(findFragment);}if (profileFragment!=null){transaction.hide(profileFragment);}switch (index){case 0:if (wechatFragment==null){wechatFragment=new Fragment_wechat();transaction.add(R.id.fragment,wechatFragment);}else {transaction.show(wechatFragment);}break;case 1:if (contactFragment==null){contactFragment=new Fragment_contact();transaction.add(R.id.fragment,contactFragment);}else {transaction.show(contactFragment);}break;case 2:if (findFragment==null){findFragment=new Fragment_find();transaction.add(R.id.fragment,findFragment);}else {transaction.show(findFragment);}break;case 3:if (profileFragment==null){profileFragment=new Fragment_profile();transaction.add(R.id.fragment,profileFragment);}else {transaction.show(profileFragment);}break;}mit();*/}void initFragmentView(){List<Fragment>fragments=new ArrayList<Fragment>();fragments.add(new Fragment_wechat());fragments.add(new Fragment_contact());fragments.add(new Fragment_find());fragments.add(new Fragment_profile());FragmentAdapter fadapter=new FragmentAdapter(getSupportFragmentManager(),fragments);viewPager=(ViewPager)findViewById(R.id.viewPager);viewPager.setAdapter(fadapter);}class FragmentAdapter extends FragmentPagerAdapter{private List<Fragment>mFragments;public FragmentAdapter(FragmentManager fm,List<Fragment>fragments){super(fm);this.mFragments=fragments;}@Overridepublic void setPrimaryItem(ViewGroup container, int position, Object object) {initFragment(position);super.setPrimaryItem(container, position, object);}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}@Overridepublic int getCount() {return mFragments.size();}}}

2、主Activity的html代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:weightSum="1"><include layout="@layout/activity_top"></include><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"><FrameLayoutandroid:id="@+id/fragment"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="match_parent"></FrameLayout></android.support.v4.view.ViewPager><include layout="@layout/activity_bottom_main"></include></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="55dp"><ImageViewandroid:layout_width="fill_parent"android:layout_height="1dp"android:background="@color/colorLine"/><LinearLayout xmlns:android="/apk/res/android"android:orientation="horizontal" android:layout_width="match_parent"android:layout_height="54dp"android:background="@drawable/title_tab"><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_wechat"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/wechat_iv"android:layout_centerHorizontal="true"android:src="@drawable/weixin_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/wechat_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="微信"android:layout_marginTop="3dp"android:layout_below="@id/wechat_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_contact"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/contact_iv"android:layout_centerHorizontal="true"android:src="@drawable/contact_list_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/contact_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="联系人"android:layout_marginTop="3dp"android:layout_below="@id/contact_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_find"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/find_iv"android:layout_centerHorizontal="true"android:src="@drawable/find_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/find_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="发现"android:layout_marginTop="3dp"android:layout_below="@id/find_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_profile"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/profile_iv"android:layout_centerHorizontal="true"android:src="@drawable/profile_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/profile_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="我"android:layout_marginTop="3dp"android:layout_below="@id/profile_iv"/></RelativeLayout></RelativeLayout></LinearLayout></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="55dp"><ImageViewandroid:layout_width="fill_parent"android:layout_height="1dp"android:background="@color/colorLine"/><LinearLayout xmlns:android="/apk/res/android"android:orientation="horizontal" android:layout_width="match_parent"android:layout_height="54dp"android:background="@drawable/title_tab"><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_wechat"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/wechat_iv"android:layout_centerHorizontal="true"android:src="@drawable/weixin_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/wechat_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="微信"android:layout_marginTop="3dp"android:layout_below="@id/wechat_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_contact"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/contact_iv"android:layout_centerHorizontal="true"android:src="@drawable/contact_list_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/contact_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="联系人"android:layout_marginTop="3dp"android:layout_below="@id/contact_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_find"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/find_iv"android:layout_centerHorizontal="true"android:src="@drawable/find_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/find_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="发现"android:layout_marginTop="3dp"android:layout_below="@id/find_iv"/></RelativeLayout></RelativeLayout><RelativeLayoutandroid:layout_height="match_parent"android:layout_width="0dp"android:background="#ffffff"android:id="@+id/re_profile"android:padding="3dp"android:layout_weight="1"><RelativeLayout android:layout_height="match_parent"android:layout_width="60dp"android:gravity="center"android:layout_centerHorizontal="true"><ImageViewandroid:layout_height="28dp"android:layout_width="wrap_content"android:id="@+id/profile_iv"android:layout_centerHorizontal="true"android:src="@drawable/profile_normal"android:scaleType="centerInside"android:focusable="false"/><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/profile_tv"android:layout_centerHorizontal="true"android:textSize="12sp"android:textColor="@color/colorTextViewNormal"android:text="我"android:layout_marginTop="3dp"android:layout_below="@id/profile_iv"/></RelativeLayout></RelativeLayout></LinearLayout></LinearLayout>

3、4个Fragment的java代码（取其中一个介绍）

package com.example.app_weixin;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/*** Created by 尽途 on /3/25.*/public class Fragment_find extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_find,container,false);}}

4、fragment的html代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="fill_parent"android:layout_height="20dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/friends"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/v2"android:layout_marginStart="5dp"android:id="@+id/pengyou_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/pengyou_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="朋友圈"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="20dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/saoyisao"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_saoyisao"android:layout_marginStart="5dp"android:id="@+id/saoyisao_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/saoyisao_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="扫一扫"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="1dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/yaoyiyao"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_yao"android:layout_marginStart="5dp"android:id="@+id/yaoyiyao_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/yaoyiyao_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="摇一摇"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="20dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/fujin"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_nearby"android:layout_marginStart="5dp"android:id="@+id/fujin_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/fujin_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="附近的人"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="1dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/ping"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_yao"android:layout_marginStart="5dp"android:id="@+id/ping_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/ping_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="漂流瓶"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="20dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/shop"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_shop"android:layout_marginStart="5dp"android:id="@+id/shop_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/shop_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="购物"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="1dp"android:background="@color/colorLineBold"/><RelativeLayoutandroid:clickable="true"android:background="@drawable/find_background"android:id="@+id/game"android:layout_width="fill_parent"android:layout_height="50dp"><ImageViewandroid:scaleType="centerInside"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_de_game"android:layout_marginStart="5dp"android:id="@+id/game_iv"android:layout_centerVertical="true"android:layout_alignParentStart="true"/><TextViewandroid:padding="0dp"android:layout_toRightOf="@id/game_iv"android:layout_centerVertical="true"android:gravity="center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="游戏"android:textColor="@color/colorBlack"android:textSize="15sp"/></RelativeLayout><ImageViewandroid:layout_width="fill_parent"android:layout_height="match_parent"android:background="@color/colorLineBold"/></LinearLayout>

最后说一下，在使用Fragment时，应该使用v4包，不要选着IDE工具提供的Fragment。要自己写一个继承与Fragment的类。