1、布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.SwitchViewpageImitationWeChatActivity">
<LinearLayout
android:id="@+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="@color/white">
<LinearLayout
android:id="@+id/ll_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_message_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/message_normal"
android:button="@null"
android:gravity="center"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_message_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/message_press"
android:button="@null"
android:gravity="center"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_message_text_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/message"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_message_text_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/message"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_contacts"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_contacts_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/contacts_normal"
android:button="@null"
android:gravity="center"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_contacts_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/contacts_press"
android:button="@null"
android:gravity="center"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_contacts_text_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/contacts"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_contacts_text_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/contacts"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_discovery"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_discovery"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_discovery_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/discovery_normal"
android:button="@null"
android:gravity="center"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_discovery_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/discovery_press"
android:button="@null"
android:gravity="center"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_discovery_text_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/discovery"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_discovery_text_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/discovery"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_me"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_me_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/me_normal"
android:button="@null"
android:gravity="center"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_me_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/me_press"
android:button="@null"
android:gravity="center"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_me_text_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/me"
android:textColor="@color/gray"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_me_text_press"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/me"
android:textColor="@color/Green"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/ll_bottom" />
</RelativeLayout>
2、activity
public class SwitchViewpageImitationWeChatActivity extends FragmentActivity implements View.OnClickListener {
private TextView tvMessageNormal, tvMessagePress, tvContactsNormal, tvContactsPress;
private TextView tvDiscoveryNormal, tvDiscoveryPress, tvMeNormal, tvMePress;
private TextView tvMessageTextNormal, tvMessageTextPress, tvContactsTextNormal, tvContactsTextPress;
private TextView tvDiscoveryTextNormal, tvDiscoveryTextPress, tvMeTextNormal, tvMeTextPress;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_switch_viewpage_imitation_we_chat);
initView();
}
protected void initView() {
tvMessageNormal = (TextView) findViewById(R.id.tv_message_normal);
tvMessagePress = (TextView) findViewById(R.id.tv_message_press);
tvContactsNormal = (TextView) findViewById(R.id.tv_contacts_normal);
tvContactsPress = (TextView) findViewById(R.id.tv_contacts_press);
tvDiscoveryNormal = (TextView) findViewById(R.id.tv_discovery_normal);
tvDiscoveryPress = (TextView) findViewById(R.id.tv_discovery_press);
tvMeNormal = (TextView) findViewById(R.id.tv_me_normal);
tvMePress = (TextView) findViewById(R.id.tv_me_press);
tvMessageTextNormal = (TextView) findViewById(R.id.tv_message_text_normal);
tvMessageTextPress = (TextView) findViewById(R.id.tv_message_text_press);
tvContactsTextNormal = (TextView) findViewById(R.id.tv_contacts_text_normal);
tvContactsTextPress = (TextView) findViewById(R.id.tv_contacts_text_press);
tvDiscoveryTextNormal = (TextView) findViewById(R.id.tv_discovery_text_normal);
tvDiscoveryTextPress = (TextView) findViewById(R.id.tv_discovery_text_press);
tvMeTextNormal = (TextView) findViewById(R.id.tv_me_text_normal);
tvMeTextPress = (TextView) findViewById(R.id.tv_me_text_press);
findViewById(R.id.ll_message).setOnClickListener(this);
findViewById(R.id.ll_contacts).setOnClickListener(this);
findViewById(R.id.ll_discovery).setOnClickListener(this);
findViewById(R.id.ll_me).setOnClickListener(this);
setTransparency();
tvMessagePress.getBackground().setAlpha(255);
tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));
/**ViewPager**/
viewPager = (ViewPager) findViewById(R.id.view_pager);
MessageFragment weChatFragment = new MessageFragment();
ContactsFragment contactsFragment = new ContactsFragment();
DiscoveryFragment discoveryFragment = new DiscoveryFragment();
MeFragment meFragment = new MeFragment();
ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
fragmentList.add(weChatFragment);
fragmentList.add(contactsFragment);
fragmentList.add(discoveryFragment);
fragmentList.add(meFragment);
viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//根据ViewPager滑动位置更改透明度
int diaphaneity_one = (int) (255 * positionOffset);
int diaphaneity_two = (int) (255 * (1 - positionOffset));
switch (position) {
case 0:
tvMessageNormal.getBackground().setAlpha(diaphaneity_one);
tvMessagePress.getBackground().setAlpha(diaphaneity_two);
tvContactsNormal.getBackground().setAlpha(diaphaneity_two);
tvContactsPress.getBackground().setAlpha(diaphaneity_one);
tvMessageTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
tvMessageTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
tvContactsTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
break;
case 1:
tvContactsNormal.getBackground().setAlpha(diaphaneity_one);
tvContactsPress.getBackground().setAlpha(diaphaneity_two);
tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_two);
tvDiscoveryPress.getBackground().setAlpha(diaphaneity_one);
tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
tvContactsTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
break;
case 2:
tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_one);
tvDiscoveryPress.getBackground().setAlpha(diaphaneity_two);
tvMeNormal.getBackground().setAlpha(diaphaneity_two);
tvMePress.getBackground().setAlpha(diaphaneity_one);
tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
tvMeTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
tvMeTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
break;
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
/**
* 设置透明度
* 把press图片、文字全部隐藏
*/
private void setTransparency() {
tvMessageNormal.getBackground().setAlpha(255);
tvContactsNormal.getBackground().setAlpha(255);
tvDiscoveryNormal.getBackground().setAlpha(255);
tvMeNormal.getBackground().setAlpha(255);
tvMessagePress.getBackground().setAlpha(1);
tvContactsPress.getBackground().setAlpha(1);
tvDiscoveryPress.getBackground().setAlpha(1);
tvMePress.getBackground().setAlpha(1);
tvMessageTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
tvContactsTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
tvDiscoveryTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
tvMeTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
tvMessageTextPress.setTextColor(Color.argb(0, 69, 192, 26));
tvContactsTextPress.setTextColor(Color.argb(0, 69, 192, 26));
tvDiscoveryTextPress.setTextColor(Color.argb(0, 69, 192, 26));
tvMeTextPress.setTextColor(Color.argb(0, 69, 192, 26));
}
@Override
public void onClick(View v) {
setTransparency();
tvDiscoveryNormal.getBackground().setAlpha(255);
switch (v.getId()) {
case R.id.ll_message:
viewPager.setCurrentItem(0, false);
tvMessagePress.getBackground().setAlpha(255);
tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));
break;
case R.id.ll_contacts:
viewPager.setCurrentItem(1, false);
tvContactsPress.getBackground().setAlpha(255);
tvContactsTextPress.setTextColor(Color.argb(255, 69, 192, 26));
break;
case R.id.ll_discovery:
viewPager.setCurrentItem(2, false);
tvDiscoveryNormal.getBackground().setAlpha(0);
tvDiscoveryPress.getBackground().setAlpha(255);
tvDiscoveryTextPress.setTextColor(Color.argb(255, 69, 192, 26));
break;
case R.id.ll_me:
viewPager.setCurrentItem(3, false);
tvMePress.getBackground().setAlpha(255);
tvMeTextPress.setTextColor(Color.argb(255, 69, 192, 26));
break;
}
}
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> list;
public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
3、4个fragment随便创建新，图标和文字等
colors.xml： <color name="white">#FFF</color> <color name="black">#000</color> <color name="green">#45C01A</color> <color name="gray">#999</color>
string.xml：
<string name="message">微信</string> <string name="contacts">通讯录</string> <string name="discovery">发现</string> <string name="me">我</string>