发布时间:2023-07-02 12:30
哈喽~大家好呀,这篇我们来看看用 java 来实现 模拟微信界面 ,首先我们来看看效果。
开头
首先,我们先看 GIF 图,我们是实现了界面的左滑右滑切换界面与点击下面的图标按钮来实现切换界面的效果。要实现滑动效果,我们要使用控件 ViewPager2 。
第一节
在 activity_main.xml 文件我们写入 androidx.viewpager2.widget.ViewPager2 ,当我们写入时候,有的人的可能会爆红。这时我们要在 android 下的 build.gradle 文件下的 dependencies 写入 implementation \'androidx.viewpager2:viewpager2:1.0.0-alpha01\' 。然后我们写入代码。
图标的实现我们需要在阿里巴巴矢量图网站下载 “微信、联系人、发现、我”等8张图片(不得不说阿里这个网站真的好好用,强力推荐)把它们放在 drawable 文件夹下。在 drawable 创建 .xml 文件叫 tab_weixin 写入代码,设置它的没点击效果和点击了他切换下一张图片的效果。
-
-
同样的道理我们分别创建 tab_contact.xml、tab_find、tab_profile.xml 文件,分别把对应的图片放进去,如图:
写完以后我们在 layout 文件下创建 button_layout.xml 文件 我们把 我们创建的tab_weixin.xml 引入进来,设置 id、对齐方式、文本,权重等代码如下
然后分别把 tab_contact.xml、tab_find、tab_profile.xml 文件分别引入(这里提醒一下,一定要记住你设置的 id 值,否则到后面会特别麻烦,本人亲测被折磨)。
再创建 feragmnt_blank.xml 文件,写入代码:
第二节
然后,我们创建一个类叫 MyFragmentPagerAdapter 类,然后在创建 BlankFragment 类,写入代码:
MyFragmentPagerAdapter.java :
public class MyFragmentPagerAdapter extends FragmentStateAdapter {
List fragmentList = new ArrayList<>();
public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List fragment) {
super(fragmentManager,lifecycle);
fragmentList = fragment;
}
@NonNull
@Override
public Fragment createFragment(int position) {
return fragmentList.get(position);
}
@Override
public 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;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mTextString = getArguments().getString(ARG_TEXT);
}
}
@Override
public 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;
@Override
protected 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 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() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
changeTab(position);
}
@Override
public 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;
}
}
@Override
public void onClick(View view) {
changeTab(view.getId());
}
}
点击运行,ok,没毛病,如图:
全源项目:
https://gitee.com/a-programmer-named-zhui/android-code-practice-project.git
本来 打算2号来写的,后面应为有事,才到现在来写的。最近更新会比较慢(不能日更了),因为蓝桥杯快到了,在复习刷题,所以见谅哈~
如果觉得本篇博客对你有帮助,那就来个三连 + 关注,你的支持是我更新写代码的动力,如果没有也没关系。本人会一直分享自己学习,hhh~
(求关注)如何需要源代码的话可以来私信哟~
linux克隆虚拟机、开机修改系统相关配置、修改 /etc/hostname ,修改主机名、查看network服务和NetworkManager服务
Runcat 让Mac跑代码程序更Happy(Mac系统监控软件推荐)
python网络爬虫从入门到精通吕云翔pdf_Python网络爬虫从入门到精通 吕云翔 张扬 韩延刚 等编著 PythonPython3.6网络爬虫爬虫JavaScript爬虫实战自学手册...
第二章、Android UI 布局 - Android移动开发基础笔记
在Gitee获8.5k Star,做微信小程序商城看这一个开源项目就够了
用python-OpenCV做一个魔方墙找茬 (3D视眼训练)
使用vite构建一个自己的vue3.0的UI组件库,并发布到npm
Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks阅读笔记