兩種均模仿了微信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.ViewPagerandroid:id="@+id/id_viewpager"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ></android.support.v4.view.ViewPager><Viewandroid:id="@+id/line"android:layout_width="match_parent"android:layout_height="1px"android:layout_above="@id/main_bottom"android:background="#22000000" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="60dp"android:background="@drawable/tabbg"android:orientation="horizontal" ><com.dystu.impro.widget.ChangeColorIconWithTextViewandroid: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.ChangeColorIconWithTextViewandroid: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.ChangeColorIconWithTextViewandroid: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.ChangeColorIconWithTextViewandroid: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" ><LinearLayoutandroid: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" ><RelativeLayoutandroid:id="@+id/btn_container_conversation"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" ><Buttonandroid: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" /><TextViewandroid: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><RelativeLayoutandroid:id="@+id/btn_container_address_list"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" ><Buttonandroid: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" /><TextViewandroid: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><RelativeLayoutandroid:id="@+id/btn_container_find"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" ><Buttonandroid: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" /><TextViewandroid: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><RelativeLayoutandroid:id="@+id/btn_container_setting"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" ><Buttonandroid: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><!-- <RelativeLayoutandroid: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;}}}

總結

以上是生活随笔為你收集整理的26两种主界面的设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。