关闭

TabLayout+ViewPager+Fragment(懒加载)实现导航栏

2630人阅读 评论(2) 收藏 举报
分类:

之前,实现导航栏的效果有很多方法,使用第三方库,比如ViewPagerIndicator中的TabPagerIndicator,谷歌可能发现,导航栏使用的挺普遍的,so,也搞了一个属于自己的导航栏!就像侧滑菜单一样,也搞了一个属于自己的侧滑菜单DrawerLayout!

效果图是这样的:

这里写图片描述

是不是跟ViewPagerIndicator实现的效果一样呢?是一样的!

接下来看代码:

首先呢!需要compile一下:

compile 'com.android.support:design:23.4.0'

然后TabLayout就跟普通控件使用一样了!直接在xml里设置即可,代码如下:

<android.support.design.widget.TabLayout
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:tabIndicatorColor="#ff0000"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#cccccc"
            app:tabMode="scrollable">
        </android.support.design.widget.TabLayout>

属性说明:

app:tabIndicatorColor:指示器那条下划线的颜色
app:tabTextColor:上面文本颜色
app:tabSelectedTextColor:文本被选中后的颜色
app:tabMode="scrollable" 适用于多文本的滑动

当然,还有一些别的属性,比如设置指示器下划线的粗细等等。

接下来就是HomeActivity的代码:

package com.bihu.bihunews.activity;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.ImageView;

import com.bihu.bihunews.R;
import com.bihu.bihunews.adapter.PagerAdapter;
import com.bihu.bihunews.fragment.BeautyFragment;
import com.bihu.bihunews.fragment.CarFragment;
import com.bihu.bihunews.fragment.JunShiFragment;
import com.bihu.bihunews.fragment.ReDianFragment;
import com.bihu.bihunews.fragment.ShuMaFragment;
import com.bihu.bihunews.fragment.TuiJianFragment;
import com.bihu.bihunews.fragment.SportFragment;

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

/**
 * Created by shan on 2016/8/31.
 **/
public class HomeActivity extends FragmentActivity implements View.OnClickListener{
    private ViewPager viewpager;
    private TabLayout layout;
    private DrawerLayout leftMenu;
    private ImageView touxiang;
    private List<String> titles = new ArrayList<>();
    private List<Fragment> fragments = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        initView();
        initData();
        viewpager.setAdapter(new PagerAdapter(getSupportFragmentManager(),titles,fragments));
        layout.setupWithViewPager(viewpager);//将导航栏和viewpager进行关联
        layout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewpager.setCurrentItem(tab.getPosition());//联动
            }

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

            }

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

            }
        });
    }

    private void initData() {
        titles.add("推荐");
        titles.add("热点");
        titles.add("美女");
        titles.add("军事");
        titles.add("数码");
        titles.add("体育");
        titles.add("汽车");
        fragments.add(new TuiJianFragment());
        fragments.add(new ReDianFragment());
        fragments.add(new BeautyFragment());
        fragments.add(new JunShiFragment());
        fragments.add(new ShuMaFragment());
        fragments.add(new SportFragment());
        fragments.add(new CarFragment());
    }

    private void initView() {
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        touxiang = (ImageView) findViewById(R.id.touxiang);
        layout = (TabLayout) findViewById(R.id.title);
        leftMenu = (DrawerLayout) findViewById(R.id.left_menu);
        touxiang.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        leftMenu.openDrawer(GravityCompat.START);//打开侧滑菜单
    }
}

适配器的代码:

package com.bihu.bihunews.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;


/**
 * Created by shan on 2016/8/31.
 **/
public class PagerAdapter extends FragmentPagerAdapter {
    private List<String> titles;
    private List<Fragment> fragments;

    public PagerAdapter(FragmentManager fm, List<String> titles,List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments = fragments;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

搞定!使用起来是不是也不难呢!
————————————————————————————————————————————————————————————————
更多属性详解:

app:tabBackground="color"//整个TabLayout的颜色,这里不能直接写RGB,需要@color/xx

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌大小

app:tabIndicatorHeight="2dp"//设置指示器下划线粗细,如果设置成0dp,则不显示指示器

app:tabMode="scrollable"//默认是fixed:固定的,标签很多时候会被挤压,不能滑动。

app:tabGravity="center"//居中,如果是fill,则是充满

设置Tab内部的子控件的Padding
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"

设置TabLayout的Padding
app:paddingEnd="xxdp"
app:paddingStart="xxdp"

默认选中某项这样设置:

tablayout.getTabAt(position).select();

————————————————————————————————————————————————————
PS:通常遇到这种组合,也需要实现Fragment懒加载,因为涉及到ViewPager的预加载特性,会预加载当前Fragment的前一个和后一个Fragment的数据。我们要实现的效果就是只有当点击该Fragment的时候,再去请求网络数据,禁用掉ViewPager的预加载特性,这样就节省很多开销。
可以让Fragment继承如下的BaseFragment:

public abstract class BaseFragment extends Fragment {
    public boolean onCreateStatus;
    public boolean isVisible;

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        onCreateStatus = true;
        if (isVisible) {
            isVisibleHint();
        }
    }

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        this.isVisible = isVisibleToUser;
        if (isVisibleToUser) {
            if (onCreateStatus) {
                isVisibleHint();
            }
        }
    }

    public void showToast(String text) {
        Toast.makeText(getContext(),text,Toast.LENGTH_SHORT).show();
    }

    /**
     * 如果Fragment显示,则触发此方法
     */
    public abstract void isVisibleHint();
}

继承此Fragment会实现下面的方法:

@Override
    public void isVisibleHint() {
        showToast("加载数据");
    }

这样就可以将一进入该Fragment加载网络数据的方法,或者是切换回该Fragment需要刷新数据的方法都放在上面的方法里了。

0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:98284次
    • 积分:1174
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:0篇
    • 译文:0篇
    • 评论:12条
    文章分类
    最新评论