Android 实战之模拟微信首页界面 (java实现)

哈喽~大家好呀，这篇我们来看看用 java 来实现模拟微信界面，首先我们来看看效果。

开头

首先，我们先看 GIF 图，我们是实现了界面的左滑右滑切换界面与点击下面的图标按钮来实现切换界面的效果。要实现滑动效果，我们要使用控件 ViewPager2 。

第一节

在 activity_main.xml 文件我们写入 androidx.viewpager2.widget.ViewPager2 ，当我们写入时候，有的人的可能会爆红。这时我们要在 android 下的 build.gradle 文件下的 dependencies 写入 implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01' 。然后我们写入代码。

    <androidx.viewpager2.widget.ViewPager2android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:id="@+id/id_viewpager"/>

图标的实现我们需要在阿里巴巴矢量图网站下载 “微信、联系人、发现、我”等8张图片（不得不说阿里这个网站真的好好用，强力推荐）把它们放在 drawable 文件夹下。在 drawable 创建 .xml 文件叫 tab_weixin 写入代码，设置它的没点击效果和点击了他切换下一张图片的效果。

<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/weixin_pressed_one" android:state_selected="true"/><item android:drawable="@drawable/weixin_pressed_two"/>
</selector>

同样的道理我们分别创建 tab_contact.xml、tab_find、tab_profile.xml 文件，分别把对应的图片放进去，如图：

写完以后我们在 layout 文件下创建 button_layout.xml 文件我们把我们创建的tab_weixin.xml 引入进来，设置 id、对齐方式、文本，权重等代码如下

<LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:layout_gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weixin"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:background="@drawable/tab_weixin"android:id="@+id/tab_iv_weixin"/><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin"android:gravity="center"android:text="微信"/></LinearLayout>

然后分别把 tab_contact.xml、tab_find、tab_profile.xml 文件分别引入（这里提醒一下，一定要记住你设置的 id 值，否则到后面会特别麻烦，本人亲测被折磨）。

再创建 feragmnt_blank.xml 文件，写入代码：

    <TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="36sp"android:id="@+id/text"android:text="我" />

第二节

然后,我们创建一个类叫 MyFragmentPagerAdapter 类，然后在创建 BlankFragment 类，写入代码：

MyFragmentPagerAdapter.java :

public class MyFragmentPagerAdapter extends FragmentStateAdapter {List<Fragment> fragmentList = new ArrayList<>();public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragment) {super(fragmentManager,lifecycle);fragmentList = fragment;}@NonNull@Overridepublic Fragment createFragment(int position) {return fragmentList.get(position);}@Overridepublic int getItemCount() {return fragmentList.size();}

BlankFragment.java ：

public class BlankFragment extends Fragment {private static final String ARG_TEXT = "param1";private String mTextString;View rootView;public BlankFragment() {}public static BlankFragment newInstance(String param1){BlankFragment fragment = new BlankFragment();Bundle args = new Bundle();args.putString(ARG_TEXT,param1);fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() != null) {mTextString = getArguments().getString(ARG_TEXT);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {if (rootView == null){rootView = inflater.inflate(R.layout.fragment_blank,container,false);}InitView();return rootView;}private void InitView() {TextView textView = rootView.findViewById(R.id.text);textView.setText(mTextString);}
}

第三节

然后在 MainActivity.java 里面写入代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {ViewPager2 viewPager;private LinearLayout llchat, llContacts, llFind, llProfile;private ImageView ivChat, ivContacts, ivFind, ivProfile, ivCorrect;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initPager();initTabView();}private void initTabView() {llchat = findViewById(R.id.id_tab_weixin);llchat.setOnClickListener(this);llContacts = findViewById(R.id.id_tab_contact);llContacts.setOnClickListener(this);llFind = findViewById(R.id.id_tab_find);llFind.setOnClickListener(this);llProfile = findViewById(R.id.id_tab_profile);llProfile.setOnClickListener(this);ivChat = findViewById(R.id.tab_iv_weixin);ivContacts = findViewById(R.id.tab_iv_contact);ivFind = findViewById(R.id.tab_iv_find);ivProfile = findViewById(R.id.tab_iv_profile);ivChat.setSelected(true);ivCorrect = ivChat;}private void initPager() {viewPager = findViewById(R.id.id_viewpager);ArrayList<Fragment> fragments = new ArrayList<>();fragments.add(BlankFragment.newInstance("微信聊天"));fragments.add(BlankFragment.newInstance("通讯录"));fragments.add(BlankFragment.newInstance("发现"));fragments.add(BlankFragment.newInstance("我"));MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);viewPager.setAdapter(pagerAdapter);viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position, positionOffset, positionOffsetPixels);}@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);changeTab(position);}@Overridepublic void onPageScrollStateChanged(int state) {super.onPageScrollStateChanged(state);}});}private void changeTab(int position) {ivCorrect.setSelected(false);switch (position){case R.id.id_tab_weixin:viewPager.setCurrentItem(0);case 0:ivChat.setSelected(true);ivCorrect = ivChat;break;case R.id.id_tab_contact:viewPager.setCurrentItem(1);case 1:ivContacts.setSelected(true);ivCorrect = ivContacts;break;case R.id.id_tab_find:viewPager.setCurrentItem(2);case 2:ivFind.setSelected(true);ivCorrect = ivFind;break;case R.id.id_tab_profile:viewPager.setCurrentItem(3);case 3:ivProfile.setSelected(true);ivCorrect = ivProfile;break;}}@Overridepublic void onClick(View view) {changeTab(view.getId());}
}

点击运行，ok，没毛病，如图：

全源项目：

https://gitee.com/a-programmer-named-zhui/android-code-practice-project.git

如果觉得本篇博客对你有帮助，那就来个三连 + 关注，你的支持是我更新写代码的动力，如果没有也没关系。本人会一直分享自己学习，hhh~

（求关注）如何需要源代码的话可以来私信哟~

Android 实战之模拟微信首页界面 (java实现)相关推荐

Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)
可以实现的方式:BottomNavigationView 这里我们不使用BottomNavigationView,手动来写代码先看一下效果 fragment + viewPager2模拟微信首页2( ...
Android：viewpager+ fragment模拟微信首页
viewpager+ fragment viewpager+ fragment模拟微信首页 1.前言 2.实现 viewpager+ fragment模拟微信首页 1.前言 ViewPager(视图滑 ...
安卓APP_ Fragment（5）—— Fragment + ViewPager2 模拟微信首页（2）两者联动翻页
摘自:安卓APP_ Fragment(5)-- Fragment + ViewPager2 模拟微信首页 (2)两者联动实现翻页作者:丶PURSUING 发布时间: 2021-04-22 00:11 ...
安卓APP_ Fragment（4）—— Fragment + ViewPager2 模拟微信首页（1）两者联动实现翻页
摘自:安卓APP_ Fragment(4)-- Fragment + ViewPager2 模拟微信首页 (1)两者联动实现翻页作者:丶PURSUING 发布时间: 2021-04-20 17:46 ...
AndroidStudio使用之仿微信首页界面
AndroidStudio使用之仿微信首页界面介绍与分析AS实现微信首页的流程, 并附有源码链接: 码云仿微信 AndroidStudio使用之仿微信首页界面 (一)文件目录 (二)界面分析 1. ...
AndroidStudio使用之实现微信首页界面
@[TOC]AndroidStudio使用之实现微信首页界面 AndroidStudio使用之实现微信首页界面详细分析介绍AS实现微信首页的流程,并附有源码界面分析我们对微信首页做一个分析,看需 ...
[Android] Android 手机下仿微信客户端界面 -- 微聊
Android 手机下仿微信客户端界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
HTML5模拟微信聊天界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Android入门小项目--微信登录界面源码（倒计时、fragement切换、activity信息传递）
微信登录的完全源码,复制粘贴即可使用作为Android学习的入门,一次性搞定Android的布局,让你的view层畅通无阻手机界面插入数据线,将手机调入开发者模式的usb调试,即可进行手机调试安 ...

Android 实战之模拟微信首页界面 (java实现)

开头

第一节

第二节

第三节

Android 实战之模拟微信首页界面 (java实现)相关推荐

最新文章

热门文章