26两种主界面的设计

两种均模仿了微信6.0底部菜单栏的效果，第一种在左右滑动的时候有动画，第二种没有，首先看第一种：

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:im="http://schemas.android.com/apk/res/com.dystu.impro"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#f2f0eb"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager>    <View        android:id="@+id/line"        android:layout_width="match_parent"        android:layout_height="1px"        android:layout_above="@id/main_bottom"        android:background="#22000000" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="60dp"       android:background="@drawable/tabbg"        android:orientation="horizontal" >        <com.dystu.impro.widget.ChangeColorIconWithTextView            android:id="@+id/id_indicator_one"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:padding="5dp"            im:icon="@drawable/aio"            im:text="超信"            im:text_size="12sp" />        <com.dystu.impro.widget.ChangeColorIconWithTextView            android:id="@+id/id_indicator_two"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:padding="5dp"            im:icon="@drawable/aim"            im:text="通讯录"            im:text_size="12sp" />        <com.dystu.impro.widget.ChangeColorIconWithTextView            android:id="@+id/id_indicator_three"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:padding="5dp"            im:icon="@drawable/aiq"            im:text="发现"            im:text_size="12sp" />        <com.dystu.impro.widget.ChangeColorIconWithTextView            android:id="@+id/id_indicator_four"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:padding="5dp"            im:icon="@drawable/ais"            im:text="设置"            im:text_size="12sp" />    </LinearLayout></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="icon" format="reference" />    <attr name="color" format="color" />    <attr name="text" format="string" />    <attr name="text_size" format="dimension" />    <declare-styleable name="ChangeColorIconView">        <attr name="icon" />        <attr name="color" />        <attr name="text" />        <attr name="text_size" />    </declare-styleable></resources>

注意命名空间的写法。图片资源可以下载微信的apk文件，解压缩，在文件r下的子文件q下有资源图片。

类：

package com.dystu.impro.activity;import java.util.ArrayList;import java.util.List;import android.content.Intent;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import com.dystu.impro.R;import com.dystu.impro.fragment.ChatAllHistoryFragment;import com.dystu.impro.fragment.ContactlistFragment;import com.dystu.impro.fragment.FindFragment;import com.dystu.impro.fragment.SettingsFragment;import com.dystu.impro.widget.ChangeColorIconWithTextView;/** *  * 测试微信的底部菜单栏使用 *  * @author * */public class CopyOfMainActivity extends BaseActivity implementsOnPageChangeListener,OnClickListener{private ViewPager mViewPager;private List<Fragment> mTabs = new ArrayList<Fragment>();private FragmentPagerAdapter mAdapter;private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();private ContactlistFragment contactListFragment;private ChatAllHistoryFragment chatHistoryFragment;private SettingsFragment settingFragment;private FindFragment findFragment;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.copyofactivity_main);mViewPager = (ViewPager) findViewById(R.id.id_viewpager);initDatas();mViewPager.setAdapter(mAdapter);mViewPager.setOnPageChangeListener(this);}private void initDatas() {contactListFragment = new ContactlistFragment();chatHistoryFragment = new ChatAllHistoryFragment();settingFragment = new SettingsFragment();findFragment = new FindFragment();mTabs.add(chatHistoryFragment);mTabs.add(contactListFragment);mTabs.add(findFragment);mTabs.add(settingFragment);mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return mTabs.size();}@Overridepublic Fragment getItem(int arg0){return mTabs.get(arg0);}};initTabIndicator();}private void initTabIndicator() {ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one);ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two);ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three);ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four);mTabIndicator.add(one);mTabIndicator.add(two);mTabIndicator.add(three);mTabIndicator.add(four);one.setOnClickListener(this);two.setOnClickListener(this);three.setOnClickListener(this);four.setOnClickListener(this);one.setIconAlpha(1.0f);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {if (positionOffset > 0){ChangeColorIconWithTextView left = mTabIndicator.get(position);ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);left.setIconAlpha(1 - positionOffset);right.setIconAlpha(positionOffset);}}@Overridepublic void onPageSelected(int arg0) {}@Overridepublic void onClick(View v) {resetOtherTabs();switch (v.getId()){case R.id.id_indicator_one:mTabIndicator.get(0).setIconAlpha(1.0f);mViewPager.setCurrentItem(0, false);break;case R.id.id_indicator_two:mTabIndicator.get(1).setIconAlpha(1.0f);mViewPager.setCurrentItem(1, false);break;case R.id.id_indicator_three:mTabIndicator.get(2).setIconAlpha(1.0f);mViewPager.setCurrentItem(2, false);break;case R.id.id_indicator_four:mTabIndicator.get(3).setIconAlpha(1.0f);mViewPager.setCurrentItem(3, false);break;}}/** * 重置其他的Tab */private void resetOtherTabs(){for (int i = 0; i < mTabIndicator.size(); i++){mTabIndicator.get(i).setIconAlpha(0);}}}

四个Fragment差不多一样：（举一个例子）

：

package com.dystu.impro.fragment;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class ChatAllHistoryFragment extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {TextView textView = new TextView(getActivity());textView.setTextSize(20);textView.setBackgroundColor(Color.parseColor("#ffffffff"));textView.setGravity(Gravity.CENTER);textView.setText("ChatAllHistoryFragment");return textView;}}

效果图：

第二种：

布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/mainLayout"     android:background="#f2f0eb"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/main_bottom"        android:layout_width="match_parent"        android:layout_height="52dp"        android:layout_alignParentBottom="true"        android:background="#FCFCFC"        android:gravity="center_vertical"        android:orientation="horizontal" >        <RelativeLayout            android:id="@+id/btn_container_conversation"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <Button                android:id="@+id/btn_conversation"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@null"                android:drawableTop="@drawable/tab_chat_bg"                android:onClick="onTabClicked"                android:paddingBottom="2dip"                android:paddingTop="7dip"                android:scaleType="matrix"                android:text="超信"                android:textColor="#88000000"                android:textSize="12sp" />            <TextView                android:id="@+id/unread_msg_number"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_marginRight="10dp"                android:background="@drawable/unread_count_bg"                android:gravity="center"                android:text="7"                 android:layout_marginTop="5dp"                android:textColor="@android:color/white"                android:textSize="12sp"                android:visibility="visible" />            <!-- android:visibility="invisible" -->        </RelativeLayout>        <RelativeLayout            android:id="@+id/btn_container_address_list"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <Button                android:textColor="#88000000"                android:id="@+id/btn_address_list"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@null"                android:drawableTop="@drawable/tab_contact_list_bg"                android:onClick="onTabClicked"                android:paddingBottom="2dip"                android:paddingTop="7dip"                android:scaleType="matrix"                android:text="通讯录"                android:textSize="12sp" />            <TextView                android:id="@+id/unread_address_number"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_marginRight="10dp"                android:background="@drawable/unread_count_bg"                android:gravity="center"                android:text="7"                 android:layout_marginTop="5dp"                android:textColor="@android:color/white"                android:textSize="12sp"                android:visibility="visible" />             <!-- android:visibility="invisible" -->        </RelativeLayout>        <RelativeLayout            android:id="@+id/btn_container_find"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <Button                android:textColor="#88000000"                android:id="@+id/btn_find_list"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@null"                android:drawableTop="@drawable/tab_find_bg"                android:onClick="onTabClicked"                android:paddingBottom="2dip"                android:paddingTop="7dip"                android:scaleType="matrix"                android:text="发现"                android:textSize="12sp" />            <TextView                android:id="@+id/unread_find_number"                android:layout_width="10dp"                android:layout_height="10dp"                android:layout_alignParentRight="true"                android:layout_marginRight="18dp"                android:layout_marginTop="5dp"                android:background="@drawable/afv"                android:gravity="center"                android:textColor="@android:color/white"                android:textSize="12sp"                android:visibility="visible" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/btn_container_setting"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <Button                android:textColor="#88000000"                android:id="@+id/btn_setting"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@null"                android:drawableTop="@drawable/tab_setting_bg"                android:onClick="onTabClicked"                android:paddingBottom="2dip"                android:paddingTop="7dip"                android:scaleType="matrix"                android:text="设置"                android:textSize="12sp" />        </RelativeLayout>    </LinearLayout>   <!--  <RelativeLayout        android:id="@+id/fragment_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/main_bottom" /> -->            <View          android:id="@+id/line"          android:layout_width="match_parent"          android:layout_height="1px"          android:layout_above="@id/main_bottom"          android:background="#22000000" />        <android.support.v4.view.ViewPager          android:id="@+id/content_pager"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:layout_above="@id/line"          android:fadingEdge="none"          android:overScrollMode="never" >      </android.support.v4.view.ViewPager>  </RelativeLayout>

类：

package com.dystu.impro.activity;import java.util.ArrayList;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.Button;import android.widget.TextView;import com.dystu.impro.R;import com.dystu.impro.fragment.ChatAllHistoryFragment;import com.dystu.impro.fragment.ContactlistFragment;import com.dystu.impro.fragment.FindFragment;import com.dystu.impro.fragment.SettingsFragment;public class MainActivity extends BaseActivity {protected static final String TAG = "MainActivity";// ========================================================================private View btn_container_conversation, btn_container_address_list,btn_container_find, btn_container_setting;private Button btn_conversation, btn_address_list, btn_find_list,btn_setting;// ====================底部菜单栏的提醒，默认是不可见的================================// 未读消息textviewprivate TextView unreadLabel;// 未读通讯录textviewprivate TextView unreadAddressLable;// "发现"的小圆点private TextView unreadFindNumber;// ===========================================================// ====================新的Fragment=================================private ContactlistFragment contactListFragment;private ChatAllHistoryFragment chatHistoryFragment;private SettingsFragment settingFragment;private FindFragment findFragment;// ============================================================private ArrayList<Fragment> mFragmentList;private ViewPager mainPager;// =============================================================private FragmentManager mFragmentManager;// ===========================================================@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 界面初始函数，用来获取定义的各控件对应的IDinitView();}// =========================================private void updataBottomStatu(int index) {          switch (index) {          case 0:              if (!btn_container_conversation.isSelected()) {                  setConver(true);                setAddre(false);                setFind(false);                setMine(false);            }              break;          case 1:              if (!btn_container_address_list.isSelected()) {               setConver(false);                 setAddre(true);                 setFind(false);                 setMine(false);            }              break;          case 2:              if (!btn_container_find.isSelected()) {               setConver(false);                 setAddre(false);                 setFind(true);                 setMine(false);            }              break;          case 3:              if (!btn_container_setting.isSelected()) {               setConver(false);                 setAddre(false);                 setFind(false);                 setMine(true);            }              break;          }      }  // ========================================class MainPagerAdapter extends FragmentStatePagerAdapter { public MainPagerAdapter(FragmentManager fm) {              super(fm);          }            @Override          public Fragment getItem(int arg0) {              return mFragmentList.get(arg0);          }            @Override          public int getCount() {              return mFragmentList == null ? 0 : mFragmentList.size();          }            @Override          public void destroyItem(ViewGroup container, int position, Object object) {            }  }/** * 初始化组件 */private void initView() {BottomItemOnClickListener mClickListener = new BottomItemOnClickListener();unreadLabel = (TextView) findViewById(R.id.unread_msg_number);unreadAddressLable = (TextView) findViewById(R.id.unread_address_number);unreadFindNumber = (TextView) findViewById(R.id.unread_find_number);btn_container_conversation = findViewById(R.id.btn_container_conversation);btn_container_address_list = findViewById(R.id.btn_container_address_list);btn_container_find = findViewById(R.id.btn_container_find);btn_container_setting = findViewById(R.id.btn_container_setting);btn_conversation = (Button) findViewById(R.id.btn_conversation);btn_address_list = (Button) findViewById(R.id.btn_address_list);btn_find_list = (Button) findViewById(R.id.btn_find_list);btn_setting = (Button) findViewById(R.id.btn_setting);btn_container_conversation.setOnClickListener(mClickListener);btn_container_address_list.setOnClickListener(mClickListener);btn_container_find.setOnClickListener(mClickListener);btn_container_setting.setOnClickListener(mClickListener);mFragmentManager = getSupportFragmentManager();contactListFragment = new ContactlistFragment();chatHistoryFragment = new ChatAllHistoryFragment();settingFragment = new SettingsFragment();findFragment = new FindFragment();mFragmentList = new ArrayList<Fragment>();mFragmentList.add(chatHistoryFragment);mFragmentList.add(contactListFragment);mFragmentList.add(findFragment);mFragmentList.add(settingFragment);mainPager = (ViewPager) findViewById(R.id.content_pager);mainPager.setAdapter(new MainPagerAdapter(mFragmentManager));// 初始化mainPager.setCurrentItem(0);updataBottomStatu(0);/** * 若禁止ViewPager滑动可以自定义ViewPager重写scrollTo方法 */mainPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {updataBottomStatu(position);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}protected class BottomItemOnClickListener implements OnClickListener {@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn_container_conversation: {mainPager.setCurrentItem(0);updataBottomStatu(0);}break;case R.id.btn_container_address_list: {mainPager.setCurrentItem(1);updataBottomStatu(1);}break;case R.id.btn_container_find: {mainPager.setCurrentItem(2);updataBottomStatu(2);}break;case R.id.btn_container_setting: {mainPager.setCurrentItem(3);updataBottomStatu(3);}break;}}} private void setConver(boolean isSelect) {   btn_container_conversation.setSelected(isSelect);   unreadLabel.setSelected(isSelect);   btn_conversation.setSelected(isSelect);      }        private void setAddre(boolean isSelect) {      btn_container_address_list.setSelected(isSelect);      btn_address_list.setSelected(isSelect);      unreadAddressLable.setSelected(isSelect);      }        private void setFind(boolean isSelect) {      btn_container_find.setSelected(isSelect);      btn_find_list.setSelected(isSelect);      unreadFindNumber.setSelected(isSelect);      }        private void setMine(boolean isSelect) {      btn_container_setting.setSelected(isSelect);      btn_setting.setSelected(isSelect);      }        /** * button点击事件 *  * @param view */public void onTabClicked(View view) {switch (view.getId()) {case R.id.btn_conversation: {mainPager.setCurrentItem(0);updataBottomStatu(0);}break;case R.id.btn_address_list: {mainPager.setCurrentItem(1);updataBottomStatu(1);}break;case R.id.btn_find_list: {mainPager.setCurrentItem(2);updataBottomStatu(2);}break;case R.id.btn_setting: {mainPager.setCurrentItem(3);updataBottomStatu(3);}break;}}}