TabLayout+ViewPager实现Android底部滑动(附实现Demo)
16lz
2021-01-23
TabLayout+ViewPager实现Android底部滑动
- 项目介绍
- 软件架构
- 代码实现介绍
项目介绍
通过Tablayout+ViewPager实现底部滑动的tab，让你快速脱坑
源码地址：https://gitee.com/maxiaodong1996/Tablayout_viewPager_Demo.git
软件架构
软件架构说明
代码实现介绍
我们首先要添加design的jar支持选择添加，和复制粘贴添加
复制粘贴添加 在app下的build.gradle中的dependencies中添加
版本号需要和你的下面这个一致
implementation 'com.android.support:appcompat-v7:26.1.0'implementation 'com.android.support:design:26.1.0'下面介绍的是从工具中手动操作视图添加流程 不过上面的我既然告诉你了那就是很简单的 下面的流程也是为了 上面那句话使用工具添加
1、在app上右键
2、选择
3、点击
4、选择加号选择弹出框中的第一个
5、选择
6、检查选择正确点击OK
7、打开app下的build.gradle检查画圈的版本号一样不 不一样就修改
8、创建布局
<?xml version="1.0" encoding="utf-8"?> 上面看到的android.support.design.widget.TabLayout 这个就是我们添加jar后才可以用的
9、创建Fragment
package com.maxd.demo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * A simple {@link Fragment} subclass. * Activities that contain this fragment must implement the * to handle interaction events. * Use the {@link OneFragment#newInstance} factory method to * create an instance of this fragment. */public class OneFragment extends Fragment { // TODO: Rename parameter arguments, choose names that match // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER private static final String ARG_PARAM1 = "param1"; // TODO: Rename and change types of parameters private String mParam1; public OneFragment() { // Required empty public constructor } /** * Use this factory method to create a new instance of * this fragment using the provided parameters. * * @param param1 Parameter 1. * @param param2 Parameter 2. * @return A new instance of fragment OneFragment. */ // TODO: Rename and change types and number of parameters public static OneFragment newInstance(String param1, String param2) { OneFragment fragment = new OneFragment(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, param1); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View inflate = inflater.inflate(R.layout.fragment_one, container, false); TextView textView = inflate.findViewById(R.id.text10); textView.setText(mParam1); return inflate; }}10、实现Activity代码
package com.maxd.demo;import android.annotation.SuppressLint;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends FragmentActivity { private ViewPager pager_parent; private TabLayout tabLayout; private final static String[] TITLE = {"首页", "我的"}; private final static int[] IMAGE = {R.drawable.nav_home, R.drawable.nav_my}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pager_parent = findViewById(R.id.pager_parent); tabLayout = findViewById(R.id.tab_layout); initView(); } /** * 主要方法 * IMAGE 中的是通过drawable实现 这个不难你要自己看看 */ private void initView() { //创建ViewPagerAdapter MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); //给viewPager赋值adapter pager_parent.setAdapter(myViewPagerAdapter); //设置预加载页面数量的方法 pager_parent.setOffscreenPageLimit(2); //设置默认位于第一个 pager_parent.setCurrentItem(0); //设置tabLayout关联viewPager tabLayout.setupWithViewPager(pager_parent); //循环标题 for (int i = 0; i < TITLE.length; i++) { //创建tab TabLayout.Tab tab = tabLayout.getTabAt(i); //获取布局 LayoutInflater layoutInflater = LayoutInflater.from(this); @SuppressLint("InflateParams") View view = layoutInflater.inflate(R.layout.tab_layout, null); ImageView imageView = (ImageView) view.findViewById(R.id.image_view); TextView textView = (TextView) view.findViewById(R.id.text_view); textView.setText(TITLE[i]); imageView.setImageResource(IMAGE[i]); assert tab != null; tab.setCustomView(view); //设置第一个选中 if (tabLayout.getSelectedTabPosition() == 0) { tabLayout.getTabAt(0).getCustomView().setSelected(true); tab.setText(TITLE[i]); } } } /** * ViewPager设置适配器 */ public class MyViewPagerAdapter extends FragmentPagerAdapter { /** * Instantiates a new My view pager adapter. * * @param fm the fm */ MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return OneFragment.newInstance("one1", ""); case 1: return OneFragment.newInstance("one2", null); } return null; } @Override public int getCount() { return 2; } }}11、实现资源文件代码
**在layout下创建tab_layout.xml 这个主要底部中单个的布局文件显示图片和文字的 **
`
`
在drawable下 创建nav_home.xml nav_my.xml 主要负责底部的图片切换颜色
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> 在drawable下 创建nav_text.xml主要负责底部的字体切换颜色
<?xml version="1.0" encoding="utf-8"?> 基本就是上面这些 其他的就是颜色图片什么 具体你自己看项目吧 这个主要的业务还是activity中的代码我已经写了备注了
更多相关文章
- Android: android自适应屏幕方向和大小
- Android获取相册中图片的路径 4.4版本前后的变化
- Android屏幕方向的改变
- Android点亮屏幕
- Android-屏幕元素层次结构
- android图片特效，图片过滤
- 不支持gif动态图片
- Android进阶2之检索Android的图片库并显示图片详细信息
- Android保存图片到系统图库