TabLayout实现顶部标题栏和底部导航栏，TrustyGridSimpleAdapter实现按日分类图片

一、TabLayout+ViewPager+Fragment实现顶部的滑动标题栏

①activity页面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabIndicatorColor="@color/colorPrimary"        app:tabSelectedTextColor="@color/colorPrimary"        app:tabTextColor="@color/black" />    <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

②适配器

package com.gu.rsyun.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 Gu on 2017/8/14. */public class FileAdapter extends FragmentPagerAdapter {    private List<Fragment> fragmentList;    private FragmentManager fm;    private String[] titles;    public FileAdapter(List<Fragment> fragmentList, FragmentManager fm, String[] titles) {        super(fm);        this.fragmentList = fragmentList;        this.fm = fm;        this.titles = titles;    }    @Override    public Fragment getItem(int position) {        return fragmentList.get(position);    }    @Override    public int getCount() {        return fragmentList != null ? fragmentList.size() : 0;    }    @Override    public CharSequence getPageTitle(int position) {        return titles == null ? super.getPageTitle(position) : titles[position];    }}

③TabLayout所在activity或者fragment的实现

public class FileFragment extends Fragment {    private TabLayout tabLayout;    private ViewPager vp;    private FileAdapter adapter;    private List<Fragment> list = new ArrayList<Fragment>();    private String[] titles = {"全部", "文档", "图片", "视频", "音乐"};    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_file, container, false);        initView(view);        return view;    }    private void initView(View view) {        tabLayout = (TabLayout) view.findViewById(R.id.tablayout);        vp = (ViewPager) view.findViewById(R.id.vp);        list.add(DetailFragment.newInstance("/"));        list.add(DetailFragment.newInstance("/doc/"));        list.add(DetailFragment.newInstance("/picture/"));        list.add(DetailFragment.newInstance("/video/"));        list.add(DetailFragment.newInstance("/music/"));        tabLayout.setTabMode(TabLayout.MODE_FIXED);        adapter = new FileAdapter(list, getChildFragmentManager(), titles);        vp.setAdapter(adapter);        tabLayout.setupWithViewPager(vp);    }}

④通过反射调整下划线的宽度和文字宽度一致

    //反射调整下划线宽度    private void reflex(final TabLayout tabLayout) {        //线的宽度是根据 tabView的宽度来设置的        tabLayout.post(new Runnable() {            @Override            public void run() {                try {                    //拿到tabLayout的mTabStrip属性                    LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {                        View tabView = mTabStrip.getChildAt(i);                        //拿到tabView的mTextView属性  tab的字数不固定一定用反射取mTextView                        Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");                        mTextViewField.setAccessible(true);                        TextView mTextView = (TextView) mTextViewField.get(tabView);                        tabView.setPadding(0, 0, 0, 0);                        //因为我想要的效果是   字多宽线就多宽，所以测量mTextView的宽度                        int width = 0;                        width = mTextView.getWidth();                        if (width == 0) {                            mTextView.measure(0, 0);                            width = mTextView.getMeasuredWidth();                        }                        //设置tab左右间距为10dp  注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();                        params.width = width;                        int margin = (tabView.getWidth() - width) / 2;                        params.leftMargin = margin;                        params.rightMargin = margin;                        tabView.setLayoutParams(params);                        tabView.invalidate();                    }                } catch (NoSuchFieldException e) {                    e.printStackTrace();                } catch (IllegalAccessException e) {                    e.printStackTrace();                }            }        });    }

注意：该方法要在addTab之后调用

二、TabLayout+ViewPager实现底部导航栏

①activity布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <RelativeLayout        android:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/tablayout"/>    <android.support.design.widget.TabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:background="@color/light_gray"        app:tabIndicatorHeight="0dp" /></RelativeLayout>

②适配器

package com.gu.rsyun.adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import com.gu.rsyun.fragment.BlankFragment;import com.gu.rsyun.fragment.FileFragment;import com.gu.rsyun.fragment.PhotoFragment;/** * Created by Gu on 2017/8/11. */public class MainAdapter extends FragmentPagerAdapter {    public MainAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int position) {        switch (position) {            case 0:                return BlankFragment.newInstance(1);            case 1:                return new FileFragment();            case 2:                return new PhotoFragment();        }        return null;    }    @Override    public int getCount() {        return 3;    }}

③activity具体实现

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {    private String[] titles = {"最近", "文件", "照片"};    private int[] icons = {R.drawable.tab_lately, R.drawable.tab_file, R.drawable.tab_picture};    private TabLayout tabLayout;    private MainAdapter adapter;    private RelativeLayout container;    private TextView tv_title;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initTab();    }    private void initTab() {        //添加tab        for (int i = 0; i < titles.length; i++) {            View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null);            ImageView icon = (ImageView) view.findViewById(R.id.tab_icon);            TextView name = (TextView) view.findViewById(R.id.tab_name);            icon.setImageResource(icons[i]);            name.setText(titles[i]);            TabLayout.Tab tab = tabLayout.newTab();            tab.setCustomView(view);            //这一句要先有监听才能选中fragment            tabLayout.addTab(tab, i == 0 ? true : false);        }    }    private void initView() {        tabLayout = (TabLayout) findViewById(R.id.tablayout);        tabLayout.setTabMode(TabLayout.MODE_FIXED);        tabLayout.addOnTabSelectedListener(this);        container = (RelativeLayout) findViewById(R.id.container);        adapter = new MainAdapter(getSupportFragmentManager());    }    @Override    public void onTabSelected(TabLayout.Tab tab) {        Fragment fragment = (Fragment) adapter.instantiateItem(container, tab.getPosition());        adapter.setPrimaryItem(container, tab.getPosition(), fragment);        adapter.finishUpdate(container);//这里可以设置对应的title随页面切换变化        //tv_title.setText(titles[tab.getPosition()]);    }    @Override    public void onTabUnselected(TabLayout.Tab tab) {    }    @Override    public void onTabReselected(TabLayout.Tab tab) {    }  }

④TabLayout的item布局

<?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="wrap_content"    android:orientation="vertical">    <ImageView        android:id="@+id/tab_icon"        android:layout_width="20dp"        android:layout_height="20dp"        android:layout_gravity="center_horizontal"        android:src="@mipmap/tab_ic_file" />    <TextView        android:id="@+id/tab_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="文件"        android:textColor="@color/tab_text"        android:textSize="12sp" /></LinearLayout>

打完收工，依然简单实用，这里要注意的是：fragment会重叠，在添加的fragment中重写以下方法可解决

@Overridepublic void setMenuVisibility(boolean menuVisible) {        super.setMenuVisibility(menuVisible);        if (this.getView() != null) {            this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);        }}

三、TrustyGridSimpleAdapter实现按日分类图片

首先添加jar包：http://download.csdn.net/download/g_ying_jie/9940229

①activity或fragment主页面布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.gu.rsyun.fragment.PhotoFragment">    <android.support.v4.widget.SwipeRefreshLayout        android:id="@+id/swipe_refresh"        android:layout_width="match_parent"        android:layout_height="match_parent">        <com.trustyapp.gridheaders.TrustyGridGridView            android:id="@+id/gv_image"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:horizontalSpacing="3dp"            android:numColumns="4"            android:padding="3dp"            android:verticalSpacing="3dp" />    </android.support.v4.widget.SwipeRefreshLayout></FrameLayout>

②适配器布局，这里包含两个item布局一个是用于显示日期，一个用于展示图片

<?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:orientation="vertical">    <TextView        android:id="@+id/tv_time_header"        android:layout_width="wrap_content"        android:layout_height="34dp"        android:layout_marginLeft="17dp"        android:text="fdsfsdfsdf"        android:gravity="center"        android:textColor="#000000"        android:textSize="15sp" /></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"    android:orientation="vertical">    <ImageView        android:id="@+id/iv_image"        android:layout_width="104dp"        android:layout_height="104dp"        android:layout_centerInParent="true"        android:scaleType="fitXY"        /></LinearLayout>

③适配器实现

package com.gu.rsyun.adapter;import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.bumptech.glide.Glide;import com.bumptech.glide.signature.MediaStoreSignature;import com.gu.rsyun.R;import com.gu.rsyun.bean.FileItem;import com.gu.rsyun.utils.DirUtil;import com.trustyapp.gridheaders.TrustyGridSimpleAdapter;import java.io.File;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;public class ImageAdapter extends BaseAdapter implements TrustyGridSimpleAdapter {    private Context mContext;    private ArrayList<FileItem> fileInfo;    public ImageAdapter(Context mContext, ArrayList<FileItem> fileInfo) {        this.mContext = mContext;        this.fileInfo = fileInfo;    }    public void setData(ArrayList<FileItem> fileInfo) {        this.fileInfo = fileInfo;    }    @Override    public int getCount() {        int count = 0;        if (fileInfo != null && fileInfo.size() > 0) {            count = fileInfo.size();        }        return count;    }    @Override    public Object getItem(int position) {        return position;    }    @Override    public long getItemId(int position) {        return position;    }        @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder = null;        if (convertView == null) {            viewHolder = new ViewHolder();            convertView = View.inflate(mContext, R.layout.item_image, null);            viewHolder.ivImage = (ImageView) convertView.findViewById(R.id.iv_image);            convertView.setTag(viewHolder);        } else {            viewHolder = (ViewHolder) convertView.getTag();        }        if (fileInfo != null && fileInfo.size() > 0) {            FileItem item = fileInfo.get(position);            Glide.with(mContext).load(item.getDownloadUrl()).into(viewHolder.ivImage);        }        return convertView;    }        @Override    public View getHeaderView(int position, View convertView, ViewGroup viewGroup) {        HeaderViewHolder mHeadViewHolder = null;        if (convertView == null) {            mHeadViewHolder = new HeaderViewHolder();            convertView = View.inflate(mContext, R.layout.item_time_header, null);            mHeadViewHolder.tvTimeHeader = (TextView) convertView.findViewById(R.id.tv_time_header);            convertView.setTag(mHeadViewHolder);        } else {            mHeadViewHolder = (HeaderViewHolder) convertView.getTag();        }        mHeadViewHolder.tvTimeHeader.setText(DirUtil.getPhotoTime(fileInfo.get(position).getCtime()));        return convertView;    }    @Override    public long getHeaderId(int i) {        return getTimeId(DirUtil.getPhotoTime(fileInfo.get(i).getCtime()));    }    public long getTimeId(String date) {        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");        Date mDate = null;        try {            mDate = sdf.parse(date);        } catch (ParseException e) {            // TODO Auto-generated catch block              e.printStackTrace();        }        return mDate.getTime();    }    class HeaderViewHolder {        public TextView tvTimeHeader;    }    class ViewHolder {        ImageView ivImage;    }}  

将long类型的时间戳转换成可读字符串

/**     * 调用此方法输入所要转换的时间戳输入例如（1402733340）输出（"2014年06月14日）     */public static String getPhotoTime(long time) {        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");        return sdf.format(new Date(time * 1000));    }

④Javabean类，提供图片的下载地址和日期

public class FileItem {        //创建的时间戳    private long ctime;    private String downloadUrl;    public FileItem(long ctime, String downloadUrl) {        this.ctime = ctime;        this.downloadUrl = downloadUrl;    }    public String getDownloadUrl() {        return downloadUrl;    }    public void setDownloadUrl(String downloadUrl) {        this.downloadUrl = downloadUrl;    }    public long getCtime() {        return ctime;    }    public void setCtime(long ctime) {        this.ctime = ctime;    }}

⑤activity或fragment具体实现

public class PhotoFragment extends Fragment implements SwipeRefreshLayout.OnRefreshListener {    private TrustyGridGridView gvImage;    private ImageAdapter adapter;    private ArrayList<FileItem> fileInfo = new ArrayList<>();    private SwipeRefreshLayout swipeRefreshLayout;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_photo, container, false);        initView(view);        initData();        return view;    }    private void initView(View view) {        gvImage = (TrustyGridGridView) view.findViewById(R.id.gv_image);        adapter = new ImageAdapter(getActivity(), fileInfo);        gvImage.setAdapter(adapter);        swipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipe_refresh);        swipeRefreshLayout.setOnRefreshListener(this);    }    @Override    public void onRefresh() {        //下拉刷新    }}