Android Material Design TabLayout入门篇<二>

最新推荐文章于 2024-04-11 01:05:18 发布

KdanMin

最新推荐文章于 2024-04-11 01:05:18 发布

阅读量1k

点赞数

分类专栏：【Android MD 5.0系列】文章标签： android viewpager

本文链接：https://blog.csdn.net/qq_15950325/article/details/54172293

版权

【Android MD 5.0系列】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相信大家都看过很多底部导航栏，VIewPager+Fragment FragmentTableHost等
我今天讲的是Android Material Design TabLayout
不熟悉直接进入Android Material Design 入门篇《一》

下面直接进入主题

首先还是添加依赖gradle一句话解决！然后Sync一下

 compile 'com.android.support:design:25.1.0'
 compile 'com.android.support:support-v4:25.1.0'

添加完之后看布局文件因为中间是ViewPager 底部是TabLayout随着ViewPager左右滑动切换下面的tablelayout也实现联动效果因此我们先画一张简图

如下有点简陋

这里写图片描述

再看下布局文件如下activity_tablelayout2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:scrollbars="none"
        android:layout_height="0dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FF4081"
        app:tabTextColor="#000"/>
</LinearLayout>

然后需要一个适配器我这里直接封装了！TabFragmentAdapter这里注意的是集成FragmentPageadapter不要弄错了！

package zm.jc.com.medicalsys.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

import zm.jc.com.medicalsys.fragment.IndexFragment;
import zm.jc.com.medicalsys.fragment.MedicalFragment;
import zm.jc.com.medicalsys.fragment.MyFragment;
import zm.jc.com.medicalsys.fragment.StoreFragment;

/**
 * Created by John on 2017/1/7.
 */

public class TabFragmentAdapter extends FragmentPagerAdapter {
    private List<View> views;
    private String[] strTitle={"首页","藥店","藥材","我的"};

    public TabFragmentAdapter(FragmentManager fm) {
        super(fm);

    }

    /**根据点击不同的位置切换替换不同的Fragment
    默认选择首页
    **/

    @Override
    public Fragment getItem(int position) {
        if(position==1){
            return new StoreFragment();
        }else if(position==2){
            return  new MedicalFragment();
        }else if(position==3){
            return  new MyFragment();
        }
        return new IndexFragment();
    }

    @Override
    public int getCount() {
        return strTitle.length;
    }

    /**
     * tablelayout标题栏賦值
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return strTitle[position];
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView(views.get(position));
    }
}

然后主Activity初始化就是一个ViewPager和TableLayout这里不要导错包

import android.support.design.widget.TabLayout;

 private void initViews() {
        tabLayout= (TabLayout) findViewById(R.id.tab2);
        vp= (ViewPager) findViewById(R.id.viewpager);
        tabLayout.setupWithViewPager(vp);
        index=tabLayout.getTabAt(0);
        store=tabLayout.getTabAt(1);
        medical=tabLayout.getTabAt(2);
        my=tabLayout.getTabAt(3);

        index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
        store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        adapter=new TabFragmentAdapter(getSupportFragmentManager()){

        };
        //將ViewPager與適配器綁定起來
        vp.setAdapter(adapter);

    }

设置TablLayout 监听事件setOnTabSelectedListener判断选中时与viewpager绑定切换

 private void initEvent() {
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //在onTabSelected中设置选中tab时切换的图片，
            // onTabUnselected中设置没有被选中时的图片。
            // 别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，
            // 如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
                    vp.setCurrentItem(0);
                }else if(tab==tabLayout.getTabAt(1)){
                   store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
                    vp.setCurrentItem(1);
                }else if(tab==tabLayout.getTabAt(2)){
                    medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
                    vp.setCurrentItem(2);

                }else if(tab==tabLayout.getTabAt(3)){
                    my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
                    vp.setCurrentItem(3);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(1)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(2)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(3)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

最后贴上TableLayoutActivity完整Code

package zm.jc.com.medicalsys;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import zm.jc.com.medicalsys.adapter.TabFragmentAdapter;

/**
 * Created by John on 2017/1/7.
 */

public class TabLayoutActivity extends AppCompatActivity {
    private TabFragmentAdapter adapter;
    private ViewPager vp;
    private TabLayout tabLayout;
    private TabLayout.Tab index;
    private TabLayout.Tab store;
    private TabLayout.Tab medical;
    private TabLayout.Tab my;

    @Override
    public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
        setContentView(R.layout.activity_tablelayout2);
        initViews();
        initEvent();
    }

    private void initEvent() {
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //在onTabSelected中设置选中tab时切换的图片，
            // onTabUnselected中设置没有被选中时的图片。
            // 别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，
            // 如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
                    vp.setCurrentItem(0);
                }else if(tab==tabLayout.getTabAt(1)){
                   store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
                    vp.setCurrentItem(1);
                }else if(tab==tabLayout.getTabAt(2)){
                    medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
                    vp.setCurrentItem(2);

                }else if(tab==tabLayout.getTabAt(3)){
                    my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
                    vp.setCurrentItem(3);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(1)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(2)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(3)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void initViews() {
        tabLayout= (TabLayout) findViewById(R.id.tab2);
        vp= (ViewPager) findViewById(R.id.viewpager);
        tabLayout.setupWithViewPager(vp);
        index=tabLayout.getTabAt(0);
        store=tabLayout.getTabAt(1);
        medical=tabLayout.getTabAt(2);
        my=tabLayout.getTabAt(3);

        index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
        store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        adapter=new TabFragmentAdapter(getSupportFragmentManager()){

        };
        //將ViewPager與適配器綁定起來
        vp.setAdapter(adapter);

    }
}

转载请注明出处！http://blog.csdn.net/qq_15950325/article/details/54172293谢谢合作！另外可以加下我的Android群！大家一起开车哈！

KdanMin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android Material Design TabLayout入门篇<二>

相信大家都看过很多底部导航栏，VIewPager+Fragment FragmentTableHost等我今天讲的是Android Material Design TabLayout 不熟悉直接进入Android Material Design 入门篇《一》下面直接进入主题首先还是添加依赖gradle一句话解决！然后Sync一下 compile 'com.android.support:de
复制链接

扫一扫