布局

最下面的导航栏，单独写了个布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="55dp"android:background="#E0E0E0"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weixin"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_weixin"android:background="@drawable/tab_weixin"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin"android:gravity="center"android:text="微信"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_contact"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_contact"android:background="@drawable/tab_weixin_2"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin_contact"android:gravity="center"android:text="通讯录"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weixin_2"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_weixin_2"android:background="@drawable/tab_weixin"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin_2"android:gravity="center"android:text="朋友"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weixin_3"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_weixin_3"android:background="@drawable/tab_weixin"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin_3"android:gravity="center"android:text="我的设置"/></LinearLayout>
</LinearLayout>

代码看起来很多，但是其实复制粘贴就行了。

在实例中看到，下面图标会发生变化，其实就是（在drawable）设置一个selector切换图就行，例如
tab_weixin.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/ic_launcher_foreground" android:state_selected="true"></item><item android:drawable="@drawable/ic_android_black_24dp"/>
</selector>

就是按钮按下是一张图片，按钮松开就是另一张图片，以便达到我们需要的效果。

viewpager2

这里使用viewpager2来实现界面的翻转效果。

因此我们需要在布局文件中写上ViewPager2

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

接下来就是配置适配器了。

因为里面的每个界面用fragment来代替。

我们需要创建fragment

fragment

像这样创建一个空的就行了。

因为我们滑动界面进入不同的fragment。

我们可以创建一个List来装我们需要的fragment，方便后续的调用。

ArrayList<Fragment> fragments = new ArrayList<>();
fragments.add(BlankFragment.newInstance("微信聊天"));
fragments.add(BlankFragment.newInstance("通讯录"));
fragments.add(BlankFragment.newInstance("发现"));
fragments.add(BlankFragment.newInstance("我的设置"));

例如这样，创建了四个fragment，每个里面的文字不同。

adapter

然后创建我们的适配器，用于绑定数据和界面

package icy.hunter;import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;import java.util.ArrayList;
import java.util.List;public class MyFragmentPagerAdapter extends FragmentStateAdapter {List<Fragment> fragmentList = new ArrayList<>();public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {super(fragmentManager, lifecycle);fragmentList = fragments;}@NonNull@Overridepublic Fragment createFragment(int position) {return fragmentList.get(position);//返回fragment}@Overridepublic int getItemCount() {return fragmentList.size();//返回总大小}
}

这样我们就可以绑定数据和界面了：
先找到ViewPager2

viewPager = findViewById(R.id.vp);

实例化适配器：

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) {ivCurrent.setSelected(false);switch (position){case R.id.id_tab_weixin:viewPager.setCurrentItem(0);case 0:ivChat.setSelected(true);ivCurrent = ivChat;break;case R.id.id_tab_contact:case 1:viewPager.setCurrentItem(1);ivContacts.setSelected(true);ivCurrent = ivContacts;break;case R.id.id_tab_weixin_2:case 2:viewPager.setCurrentItem(2);ivFind.setSelected(true);ivCurrent = ivFind;break;case R.id.id_tab_weixin_3:case 3:viewPager.setCurrentItem(3);ivProfile.setSelected(true);ivCurrent = ivProfile;break;}}

但是，此时我们还没有绑定事件，为了方便，我们可以用主类继承接口，重写onClick的方式来提高代码复用率：

主类得继承接口

public class MainActivity extends AppCompatActivity implements View.OnClickListener

然后重写onClick:

    @Overridepublic void onClick(View v) {changeTab(v.getId());}

我们可以写一个initTabView放绑定事件等初始化工作的代码：

private void initTabView() {llChat = findViewById(R.id.id_tab_weixin);llChat.setOnClickListener(this);llConcat = findViewById(R.id.id_tab_contact);llConcat.setOnClickListener(this);llFind = findViewById(R.id.id_tab_weixin_2);llFind.setOnClickListener(this);llProfile = findViewById(R.id.id_tab_weixin_3);llProfile.setOnClickListener(this);ivChat = findViewById(R.id.tab_iv_weixin);ivContacts = findViewById(R.id.tab_iv_contact);ivFind = findViewById(R.id.tab_iv_weixin_2);ivProfile = findViewById(R.id.tab_iv_weixin_3);ivChat.setSelected(true);ivCurrent = ivChat;}

这样，就基本上完成了。

完整代码：Android的Viewpage2+fragment实现微信滑动界面的效果

Android移动应用开发之Viewpage2+fragment实现微信滑动界面的效果相关推荐

Android插件化开发之用DexClassLoader加载未安装的APK资源文件来实现app切换背景皮肤
第一步.先制做一个有我们需要的图片资源的APK 如下图,这里有个about_log.png,我们需要生成apk文件. 生成的apk文件如果你不到项目的文件夹里面去取apk,想通过命令放到手机里面去可以 ...
Android开发之在Fragment和Activity页面拍照需要注意的地方
先贴出Google官方文档:Google官方拍照文档感觉讲的不是很细,有不少坑. 先看需要配置权限和provider <uses-permissionan ...
android中viewpager+fragment,Android开发之ViewPager+Fragment
使用步骤 1.Activity的布局文件 android:id="@+id/viewpager" android:layout_width="wrap_content&q ...
Android开发之多Fragment切换优化
前言: 有时候Activity里面或者大Fragment里面切换小fragment的时候,会出现卡顿现象,尤其是小fragment装载数据较多的时候.此时,对fragment切换处理也能优化切换的速度 ...
Android 控件开发之ToggleButton
ToggleButton有两种状态:选中和未选择状态,并且需要为不同的状态设置不同的显示文本 ToggleButton效果: 本程序main.xml源码 <?xml version=&quo ...
Android插件化开发之DexClassLoader动态加载dex、jar小Demo
一.温故动态加载ClassLoader机制如果对Android的ClassLoader加载机制不熟悉,猛戳Android插件化开发动态加载基础之ClassLoader工作机制 http://blog ...
Android插件化开发之AMS与应用程序(客户端ActivityThread、Instrumentation、Activity)通信模型分析
转载来自:http://blog.csdn.net/qinjuning/article/details/7262769 今天主要分析下ActivityManagerService(服务端) 与应用程序 ...
android 两列菜单,【Android】实战开发之ListView同一个item显示2列的实现方法(仿2列商品列表)...
Android实战开发中,ListView控件用途十分广泛,各种自定义控件多种多样.当项目要求实现一个2列的商品列表形式的界面,我们首先肯定想到用ListView,然后我们可以使用百度的自定义List ...
android启动过程中cpu降频,android省电开发之cpu降频
众所周知,在android系统的耗电量排行里,cpu的耗电占了比较大的一部分比例,也就是说,cpu的使用率和使用频率将直接或间接的影响电量的分配和使用,但很遗憾,android-sdk中没有为andr ...

Android移动应用开发之Viewpage2+fragment实现微信滑动界面的效果

文章目录

布局

viewpager2

fragment

adapter

Android移动应用开发之Viewpage2+fragment实现微信滑动界面的效果相关推荐

最新文章

热门文章