实现的效果如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/57b1d440657e5a336552210a45394a54.gif)
滑动界面能够实现界面的跳转。
点击下面按钮同样实现界面的跳转。
布局
最下面的导航栏,单独写了个布局文件:
<?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"
>
<LinearLayout
android: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"
>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:id="@+id/tab_iv_weixin"
android:background="@drawable/tab_weixin"
>
</ImageView>
<TextView
android:layout_width="32dp"
android:layout_height="wrap_content"
android:id="@+id/text_weixin"
android:gravity="center"
android:text="微信"/>
</LinearLayout>
<LinearLayout
android: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"
>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:id="@+id/tab_iv_contact"
android:background="@drawable/tab_weixin_2"
>
</ImageView>
<TextView
android:layout_width="32dp"
android:layout_height="wrap_content"
android:id="@+id/text_weixin_contact"
android:gravity="center"
android:text="通讯录"/>
</LinearLayout>
<LinearLayout
android: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"
>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:id="@+id/tab_iv_weixin_2"
android:background="@drawable/tab_weixin"
>
</ImageView>
<TextView
android:layout_width="32dp"
android:layout_height="wrap_content"
android:id="@+id/text_weixin_2"
android:gravity="center"
android:text="朋友"/>
</LinearLayout>
<LinearLayout
android: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"
>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:id="@+id/tab_iv_weixin_3"
android:background="@drawable/tab_weixin"
>
</ImageView>
<TextView
android: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.ViewPager2
android: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
@Override
public Fragment createFragment(int position) {
return fragmentList.get(position);
//返回fragment
}
@Override
public 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() {
@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) {
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:
@Override
public 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;
}
这样,就基本上完成了。