Android~仿微信（Fragment+ViewPager）

布满荆棘的人生 2022-10-05 11:46 347阅读 0赞

仿微信（Fragment+ViewPager），实现效果，滑动或者点击，页面随Tab顶部切换，效果如下所示：
在这里插入图片描述
思维导图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

详细代码如下：
1、MainActivity .java

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener { 
  3.     private TextView title;
  4.     private TextView mTextHome;
  5.     private TextView mTextCommuni;
  6.     private TextView mTextFind;
  7.     private TextView mTextProfile;
  8.     private ImageView mImgHome;
  9.     private ImageView mImgCommuni;
  10.     private ImageView mImgFind;
  11.     private ImageView mImgProfile;
  12.     private LinearLayout mLinearHome;
  13.     private LinearLayout mLinearCommubi;
  14.     private LinearLayout mLinearFind;
  15.     private LinearLayout mLinearProfile;
  16.     private ViewPager viewPager;
  17.     private HomeFragment homeFragment;
  18.     private CommuniFragment communiFragment;
  19.     private FindFragment findFragment;
  20.     private ProfileFragment profileFragment;
  21.     private FragmentManager manager;
  22.     private ViewPagerAdapter adapter;
  23.     private List<Fragment> mList;
  25.     @Override
  26.     protected void onCreate(Bundle savedInstanceState) { 
  27.         super.onCreate(savedInstanceState);
  28.         setContentView(R.layout.activity_main);
  29.         initView();
  30.         setSelect(0);
  31.     }
  33.     // 初始化界面
  34.     private void initView() { 
  35.         // 实例化对象
  36.         title = findViewById(R.id.titleTop);
  37.         mImgHome = findViewById(R.id.imgHome);
  38.         mImgCommuni = findViewById(R.id.imgCommuni);
  39.         mImgFind = findViewById(R.id.imgFind);
  40.         mImgProfile = findViewById(R.id.imgProfile);
  41.         mTextHome = findViewById(R.id.textHome);
  42.         mTextCommuni = findViewById(R.id.textCommuni);
  43.         mTextFind = findViewById(R.id.textFind);
  44.         mTextProfile = findViewById(R.id.textProfile);
  45.         mLinearHome = findViewById(R.id.linearHome);
  46.         mLinearCommubi = findViewById(R.id.linearCommuni);
  47.         mLinearFind = findViewById(R.id.linearFind);
  48.         mLinearProfile = findViewById(R.id.linearProfile);
  49.         viewPager = findViewById(R.id.viewPager);
  50.         mList = new ArrayList<Fragment>();
  51.         manager = getSupportFragmentManager();
  53.         // 注册监听事件
  54.         mLinearHome.setOnClickListener(this);
  55.         mLinearCommubi.setOnClickListener(this);
  56.         mLinearFind.setOnClickListener(this);
  57.         mLinearProfile.setOnClickListener(this);
  59.         // 设置数据源
  60.         homeFragment = new HomeFragment();
  61.         communiFragment = new CommuniFragment();
  62.         findFragment = new FindFragment();
  63.         profileFragment = new ProfileFragment();
  65.         mList.add(homeFragment);
  66.         mList.add(communiFragment);
  67.         mList.add(findFragment);
  68.         mList.add(profileFragment);
  70.         // 设置适配器
  71.         adapter = new ViewPagerAdapter(manager, mList);
  72.         viewPager.setAdapter(adapter);
  74.         // 设置滑动监听
  75.         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
  76.             @Override
  77.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
  79.             }
  81.             @Override
  82.             public void onPageSelected(int position) { 
  83.                 switch (position) { 
  84.                     case 0:
  85.                         setSelect(0);
  86.                         break;
  87.                     case 1:
  88.                         setSelect(1);
  89.                         break;
  90.                     case 2:
  91.                         setSelect(2);
  92.                         break;
  93.                     case 3:
  94.                         setSelect(3);
  95.                         break;
  96.                     default:
  97.                         break;
  98.                 }
  99.             }
  101.             @Override
  102.             public void onPageScrollStateChanged(int state) { 
  104.             }
  105.         });
  106.     }
  108.     @Override
  109.     public void onClick(View v) { 
  110.         switch (v.getId()) { 
  111.             case R.id.linearHome:
  112.                 setSelect(0);
  113.                 break;
  114.             case R.id.linearCommuni:
  115.                 setSelect(1);
  116.                 break;
  117.             case R.id.linearFind:
  118.                 setSelect(2);
  119.                 break;
  120.             case R.id.linearProfile:
  121.                 setSelect(3);
  122.                 break;
  123.             default:
  124.                 break;
  125.         }
  126.     }
  128.     private void setSelect(int position) { 
  129.         resetAll();
  130.         switch (position) { 
  131.             case 0:
  132.                 mImgHome.setImageResource(R.drawable.ic_home_active);
  133.                 mTextHome.setTextColor(getResources().getColor(R.color.green));
  134.                 title.setText(mTextHome.getText().toString());
  135.                 break;
  136.             case 1:
  137.                 mImgCommuni.setImageResource(R.drawable.ic_communi_activite);
  138.                 mTextCommuni.setTextColor(getResources().getColor(R.color.green));
  139.                 title.setText(mTextCommuni.getText().toString());
  140.                 break;
  141.             case 2:
  142.                 mImgFind.setImageResource(R.drawable.ic_find_active);
  143.                 mTextFind.setTextColor(getResources().getColor(R.color.green));
  144.                 title.setText(mTextFind.getText().toString());
  145.                 break;
  146.             case 3:
  147.                 mImgProfile.setImageResource(R.drawable.ic_profile_activite);
  148.                 mTextProfile.setTextColor(getResources().getColor(R.color.green));
  149.                 title.setText(mTextProfile.getText().toString());
  150.                 break;
  151.             default:
  152.                 break;
  153.         }
  154.         viewPager.setCurrentItem(position);
  155.     }
  157.     private void resetAll() { 
  158.         mImgHome.setImageResource(R.drawable.ic_home);
  159.         mTextHome.setTextColor(getResources().getColor(R.color.gray));
  160.         mImgCommuni.setImageResource(R.drawable.ic_communi);
  161.         mTextCommuni.setTextColor(getResources().getColor(R.color.gray));
  162.         mImgFind.setImageResource(R.drawable.ic_find);
  163.         mTextFind.setTextColor(getResources().getColor(R.color.gray));
  164.         mImgProfile.setImageResource(R.drawable.ic_profile);
  165.         mTextProfile.setTextColor(getResources().getColor(R.color.gray));
  166.     }
  167. }

2、activity_main.xml

  1. <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">
  3.     <TextView android:id="@+id/titleTop" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="测试" android:textSize="21sp" />
  5.     <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />
  7.     <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
  9.         <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">
  11.             <ImageView android:id="@+id/imgHome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_home" />
  13.             <TextView android:id="@+id/textHome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="首页" />
  14.         </LinearLayout>
  16.         <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">
  18.             <ImageView android:id="@+id/imgCommuni" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_communi" />
  20.             <TextView android:id="@+id/textCommuni" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" />
  21.         </LinearLayout>
  23.         <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">
  25.             <ImageView android:id="@+id/imgFind" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_find" />
  27.             <TextView android:id="@+id/textFind" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="发现" />
  28.         </LinearLayout>
  30.         <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">
  32.             <ImageView android:id="@+id/imgProfile" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_profile" />
  34.             <TextView android:id="@+id/textProfile" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我的" />
  35.         </LinearLayout>
  37.     </LinearLayout>
  39. </LinearLayout>

3、ViewPagerAdapter （适配器）

  1. public class ViewPagerAdapter extends FragmentStatePagerAdapter { 
  2.     private List<Fragment> mList;
  4.     public ViewPagerAdapter(FragmentManager fm, List<Fragment> list) { 
  5.         super(fm);
  6.         mList = list;
  7.     }
  9.     @Override
  10.     public Fragment getItem(int position) { 
  11.         return mList.get(position);
  12.     }
  14.     @Override
  15.     public int getCount() { 
  16.         return mList.size();
  17.     }
  18. }

4、Fragment 类（其中一个）

  1. public class HomeFragment extends Fragment { 
  2.     @Nullable
  3.     @Override
  4.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
  5.         View view = inflater.inflate(R.layout.fragment_home, container, false);
  6.         return view;
  7.     }
  8. }

5、fragment_home.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
  3.     <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="我是首页" />
  4. </LinearLayout>

发表评论

表情：
评论列表 （有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读