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;

@Override
protected 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public 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;
}
transaction.commit();*/
}
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;
}

@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
initFragment(position);
super.setPrimaryItem(container, position, object);
}

@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}

@Override
public int getCount() {
return mFragments.size();
}
}

}

2、主Activity的html代码

<?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"
android:weightSum="1">
<include layout="@layout/activity_top">
</include>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<FrameLayout
android: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="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="55dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@color/colorLine"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="54dp"
android:background="@drawable/title_tab">
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="55dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@color/colorLine"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="54dp"
android:background="@drawable/title_tab">
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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>
<RelativeLayout
android: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">
<ImageView
android: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 2017/3/25.
*/

public class Fragment_find extends Fragment {
@Nullable
@Override
public 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="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/friends"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/saoyisao"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/yaoyiyao"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/fujin"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/ping"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/shop"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@color/colorLineBold"/>
<RelativeLayout
android:clickable="true"
android:background="@drawable/find_background"
android:id="@+id/game"
android:layout_width="fill_parent"
android:layout_height="50dp">
<ImageView
android: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"/>
<TextView
android: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>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="@color/colorLineBold"/>
</LinearLayout>

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