两种均模仿了微信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 implements OnPageChangeListener,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; @Override protected 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()) { @Override public int getCount() { return mTabs.size(); } @Override public 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); } @Override public void onPageScrollStateChanged(int arg0) { } @Override public 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); } } @Override public void onPageSelected(int arg0) { } @Override public 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{ @Override public 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; // ====================底部菜单栏的提醒,默认是不可见的================================ // 未读消息textview private TextView unreadLabel; // 未读通讯录textview private 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; // =========================================================== @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 界面初始函数,用来获取定义的各控件对应的ID initView(); } // ========================================= 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() { @Override public void onPageSelected(int position) { updataBottomStatu(position); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } protected class BottomItemOnClickListener implements OnClickListener { @Override public 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; } } }
时间: 2024-11-03 16:11:44