Tablayout+Viewpager的简单使用

最新推荐文章于 2023-07-15 23:16:34 发布

qiaoshi96_bk

最新推荐文章于 2023-07-15 23:16:34 发布

阅读量1.4k

点赞数 2

分类专栏：安卓文章标签： viewpager 导航

本文链接：https://blog.csdn.net/qiaoshi96_bk/article/details/73727508

版权

安卓专栏收录该内容

54 篇文章 0 订阅

订阅专栏

tablayout通常是实现最上面的导航栏所以在这里简单的写一下（图片展示的还没写）
首先再用Tablayout之前需要

 compile 'com.android.support:design:26.0.0-alpha1'

贴出一些常用的属性
属性名解释
tabContentStart 开始位置的偏移量
tabBackground 设置Tab的背景色
tabGravity 分为fill,center,Tab的对齐方式
tabIndicatorColor 导航条的颜色
tabIndicatorHeight 导航条的高度
tabMaxWidth Tab的最大宽度
tabMinWidth Tab的最小宽度
tabMode 分为scrollable,fixed,Tab的模式(设置为scrollable代表tab足够多的时候可以水平滚动，而设置为fixed则表示所有tab默认在一页显示，不能滚动)
tabPadding Tab的内边距
tabPaddingBottom Tab的内底边距
tabPaddingEnd Tab的右内边距
tabPaddingStart Tab的左内边距
tabPaddingTop Tab的上内边距
tabSelectedTextColor Tab文字选中颜色
tabTextColor Tab文字颜色（未选中）
tabTextAppearance Tab文字样式
在布局里面

 <android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabIndicatorColor="#667777">
</android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f1eeee"
        ></android.support.v4.view.ViewPager>

在具体代码里面：

package com.example.administrator.bottommenu;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import static com.example.administrator.bottommenu.R.id.tablayout;

/**
 * 作   者
 * 创作时间：2017/6/25
 * 项目名称：Bottommenu
 */
public class OneFragment extends Fragment{
//    获取两个id
    private ViewPager pager;
    private TabLayout layout;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.onefragment, container, false);
        /**
//        在第一碎片上面尝试添加基本tablayout来控制Fragmnet
//        添加一个闭包
//        我要在viewpager上面加载多个Fragmnet 如果每个上面的内容都类型我们只写一个
         */
        pager= (ViewPager) view.findViewById(R.id.pager);
        layout= (TabLayout) view.findViewById(tablayout);
        final String name[]={"页面一","页面二","页面三"};
        final  int img[]={R.drawable.ic_tabbar_discover_normal,R.drawable.ic_tabbar_feed_normal,R.drawable.ic_tabbar_home_normal};
//          添加自定义

//        给viewpager 上面加载Fragmnet

            pager.setAdapter(new FragmentPagerAdapter(getActivity().getSupportFragmentManager()) {

                @Override
                public Fragment getItem(int position) {
//                    那么如何实现具体的传值？这里我们可以用bundle传值（由于格式相似所可以来简单的判断）
                    One_one_Fragment fragment = new One_one_Fragment();
                    Bundle bundle = new Bundle();
                    bundle.putString("name","postion"+position);
                    fragment.setArguments(bundle);
                    return fragment;
                }

                @Override
                public int getCount() {
                    return img.length;
                }
//                当滑动时设置标题也就是把Fragmnet和tablayout关联

                @Override
                public CharSequence getPageTitle(int position) {
                    return  name[position];
                }

            });
//        给tablayout写监听
        layout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        });
//        具体的绑定了
//        这里可以设置它的模式
//        有四个属性
//        layout.setTabMode(TabLayout.MODE_FIXED);
        layout.setupWithViewPager(pager);
        return view;
    }
}

以上就基本上实现了fragment+viewpager的简单关联
效果图
这里写图片描述
但是如果要是自定义效果呢？
比如图片和文字：如图

这时我们需要具体的一个布局加载头部要显示的图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

然后在布局中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
   android:orientation="vertical"
   tools:context=".MainActivity"
    tools:showIn="@layout/twofragment">
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:tabGravity="fill"
        app:tabIndicatorColor="#667fff">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager_two"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f1eeee"
        app:tabIndicatorHeight="0dp"
        ></android.support.v4.view.ViewPager>
</LinearLayout>

最后代码中
这里面的Fragmnet布局就不贴了。

package com.example.administrator.bottommenu;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import static com.example.administrator.bottommenu.R.id.pager_two;
import static com.example.administrator.bottommenu.R.id.tablayout_two;

/**
 * 作   者：
 * 创作时间：2017/6/25
 * 项目名称：Bottommenu
 */
public class TwoFragment extends Fragment {
    private ViewPager pager;
    private TabLayout layout;
    private List<Fragment> list;
    private MyAdapter adapter;
    private String name[] = {"页面一", "页面二", "页面三"};
    private int img[] = {R.drawable.ic_tabbar_discover_normal, R.drawable.ic_tabbar_feed_normal, R.drawable.ic_tabbar_home_normal};

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.twofragment, container, false);
//        实现图片布局比较
        pager = (ViewPager) view.findViewById(pager_two);
        layout = (TabLayout) view.findViewById(tablayout_two);

//        给viewpager 上面加载Fragmnet
        list = new ArrayList<>();
        list.add(new Two_one_Fragment());
        list.add(new Two_two_fragment());
        list.add(new Two_three_Fragment());
//ViewPager的适配器

       adapter= new MyAdapter(getActivity().getSupportFragmentManager(),getActivity());
        pager.setAdapter(adapter);
        //绑定
        layout.setupWithViewPager(pager);

        //设置自定义视图
        for (int i = 0; i < layout.getTabCount(); i++) {
            TabLayout.Tab tab = layout.getTabAt(i);
            tab.setCustomView(adapter.getTabView(i));
        }
        return view;
    } class MyAdapter extends FragmentPagerAdapter {

        private Context context;

        public MyAdapter(FragmentManager mp,Context context) {
            super(mp);
            this.context = context;
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }

        /**
         * 自定义方法，提供自定义Tab
         *
         * @param position 位置
         * @return 返回Tab的View
         */
        public View getTabView(int position) {
            View v = LayoutInflater.from(context).inflate(R.layout.zi_list, null);
            TextView textView = (TextView) v.findViewById(R.id.tv_title);
            ImageView imageView = (ImageView) v.findViewById(R.id.iv_icon);
            textView.setText(name [position]);
            imageView.setImageResource(img [position]);
            //添加一行，设置颜色
            textView.setTextColor(layout.getTabTextColors());//
            return v;
        }
    }
}

其实这里面我只是加载了一下我们之前写的布局。
具体用法可以看
http://www.mamicode.com/info-detail-1563393.html

qiaoshi96_bk

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Tablayout+Viewpager的简单使用

tablayout通常是实现最上面的导航栏所以在这里简单的写一下（图片展示的还没写）首先再用Tablayout之前需要 compile 'com.android.support:design:26.0.0-alpha1'贴出一些常用的属性属性名解释 tabContentStart 开始位置的偏移量 tabBackground 设置Tab的背景色 tabGravit
复制链接

扫一扫