仿微信(Fragment+ViewPager),实现效果,滑动或者点击,页面随Tab顶部切换,效果如下所示:
思维导图
详细代码如下:
1、MainActivity .java
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private TextView title;
private TextView mTextHome;
private TextView mTextCommuni;
private TextView mTextFind;
private TextView mTextProfile;
private ImageView mImgHome;
private ImageView mImgCommuni;
private ImageView mImgFind;
private ImageView mImgProfile;
private LinearLayout mLinearHome;
private LinearLayout mLinearCommubi;
private LinearLayout mLinearFind;
private LinearLayout mLinearProfile;
private ViewPager viewPager;
private HomeFragment homeFragment;
private CommuniFragment communiFragment;
private FindFragment findFragment;
private ProfileFragment profileFragment;
private FragmentManager manager;
private ViewPagerAdapter adapter;
private List<Fragment> mList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setSelect(0);
}
// 初始化界面
private void initView() {
// 实例化对象
title = findViewById(R.id.titleTop);
mImgHome = findViewById(R.id.imgHome);
mImgCommuni = findViewById(R.id.imgCommuni);
mImgFind = findViewById(R.id.imgFind);
mImgProfile = findViewById(R.id.imgProfile);
mTextHome = findViewById(R.id.textHome);
mTextCommuni = findViewById(R.id.textCommuni);
mTextFind = findViewById(R.id.textFind);
mTextProfile = findViewById(R.id.textProfile);
mLinearHome = findViewById(R.id.linearHome);
mLinearCommubi = findViewById(R.id.linearCommuni);
mLinearFind = findViewById(R.id.linearFind);
mLinearProfile = findViewById(R.id.linearProfile);
viewPager = findViewById(R.id.viewPager);
mList = new ArrayList<Fragment>();
manager = getSupportFragmentManager();
// 注册监听事件
mLinearHome.setOnClickListener(this);
mLinearCommubi.setOnClickListener(this);
mLinearFind.setOnClickListener(this);
mLinearProfile.setOnClickListener(this);
// 设置数据源
homeFragment = new HomeFragment();
communiFragment = new CommuniFragment();
findFragment = new FindFragment();
profileFragment = new ProfileFragment();
mList.add(homeFragment);
mList.add(communiFragment);
mList.add(findFragment);
mList.add(profileFragment);
// 设置适配器
adapter = new ViewPagerAdapter(manager, mList);
viewPager.setAdapter(adapter);
// 设置滑动监听
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
setSelect(0);
break;
case 1:
setSelect(1);
break;
case 2:
setSelect(2);
break;
case 3:
setSelect(3);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.linearHome:
setSelect(0);
break;
case R.id.linearCommuni:
setSelect(1);
break;
case R.id.linearFind:
setSelect(2);
break;
case R.id.linearProfile:
setSelect(3);
break;
default:
break;
}
}
private void setSelect(int position) {
resetAll();
switch (position) {
case 0:
mImgHome.setImageResource(R.drawable.ic_home_active);
mTextHome.setTextColor(getResources().getColor(R.color.green));
title.setText(mTextHome.getText().toString());
break;
case 1:
mImgCommuni.setImageResource(R.drawable.ic_communi_activite);
mTextCommuni.setTextColor(getResources().getColor(R.color.green));
title.setText(mTextCommuni.getText().toString());
break;
case 2:
mImgFind.setImageResource(R.drawable.ic_find_active);
mTextFind.setTextColor(getResources().getColor(R.color.green));
title.setText(mTextFind.getText().toString());
break;
case 3:
mImgProfile.setImageResource(R.drawable.ic_profile_activite);
mTextProfile.setTextColor(getResources().getColor(R.color.green));
title.setText(mTextProfile.getText().toString());
break;
default:
break;
}
viewPager.setCurrentItem(position);
}
private void resetAll() {
mImgHome.setImageResource(R.drawable.ic_home);
mTextHome.setTextColor(getResources().getColor(R.color.gray));
mImgCommuni.setImageResource(R.drawable.ic_communi);
mTextCommuni.setTextColor(getResources().getColor(R.color.gray));
mImgFind.setImageResource(R.drawable.ic_find);
mTextFind.setTextColor(getResources().getColor(R.color.gray));
mImgProfile.setImageResource(R.drawable.ic_profile);
mTextProfile.setTextColor(getResources().getColor(R.color.gray));
}
}
2、activity_main.xml
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/titleTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试"
android:textSize="21sp" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/linearHome"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/imgHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_home" />
<TextView
android:id="@+id/textHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearCommuni"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/imgCommuni"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_communi" />
<TextView
android:id="@+id/textCommuni"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearFind"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/imgFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_find" />
<TextView
android:id="@+id/textFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearProfile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/imgProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_profile" />
<TextView
android:id="@+id/textProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
3、ViewPagerAdapter (适配器)
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mList;
public ViewPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
mList = list;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
}
4、Fragment 类(其中一个)
public class HomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home, container, false);
return view;
}
}
5、fragment_home.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="我是首页" />
</LinearLayout>