Google官方在14年Google I/O上推出了全新的设计语言——Material Design。一并推出了一系列实现Material Design效果的控件库——AndroidDesign Support Library。其中,有TabLayout, NavigationView,Floating labels for editing text,Floating Action Button,Snackbar, CoordinatorLayout, CollapsingToolbarLayout等等控件。在今后的学习中,我将一一介绍它们的特点和用法。
我们可以使用三方开源的PagerSlidingTabStrip去实现,或者viewpagerindicator,我一般都偏向前者。现在我们可以使用Design support library库的TabLayout去实现了。
Demo地址:https://github.com/setasmallgoal/TabLayoutDemo
Demo首页图:
最终的效果图:
一、TabLayout基本使用 。
1.在应用的Build.gradle中添加support.design支持库(注意:必须和v7包的版本相同)。
compile 'com.android.support:design:25.3.1'
2.TabLayout第一种使用–Tab固定模式。
1)创建布局文件activity_short_tab,在布局文件中添加TabLayout及ViewPager。
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.linwei.lw.tablayoutdemo.ui.activity.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorAccent">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
2)定义一个FragmentFactivity的Fragment工厂类,专门生产Fragment对象(用了工厂类,方便Fragment使用,提高了性能,在项目中很常见,记得在android5.0的Demo中也是怎么写的,可能有些读者觉得没必要,也可以每次去创建Fragment,并添加到ViewPager中也可)。
package com.linwei.lw.tablayoutdemo.ui.fragment;
import java.util.HashMap;
/**
* Fragment工厂类。
* Created by LW on 2017/4/20.
*/
public class FragmentFactory {
private static HashMap<Integer, BaseFragment> mBaseFragments = new HashMap<Integer, BaseFragment>();
public static BaseFragment createFragment(int pos) {
BaseFragment baseFragment = mBaseFragments.get(pos);
if (baseFragment == null) {
switch (pos) {
case 0:
baseFragment = new TopLineFragment();//头条
break;
case 1:
baseFragment = new NewsFragment();//要闻
break;
case 2:
baseFragment = new EntertainmentFragment();//娱乐
break;
case 3:
baseFragment = new SportsFragment();//体育
break;
case 4:
baseFragment = new FinanceFragment();//财经
break;
case 5:
baseFragment = new ScienceFragment();//科技
break;
case 6:
baseFragment = new ModeFragment();//时尚
break;
case 7:
baseFragment = new VideoFragment();//视频
break;
case 8:
baseFragment = new DirectSeedingFragment();//直播
break;
}
mBaseFragments.put(pos, baseFragment);
}
return baseFragment;
}
}
3)定义一个Fragment的父类BaseFragment,我就不解释了看代码。
package com.linwei.lw.tablayoutdemo.ui.fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by LW on 2017/4/20.
*/
public abstract class BaseFragment extends Fragment {
protected Context mContent;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContent = getContext();//上下文。
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return initView();//初始化布局。
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
loadData();//初始化数据。
}
protected abstract void loadData();
protected abstract View initView();
}
4)BaseFragment的实现子类TopLineFragment,这里我就只列出一个子类代码,其他子类代码也是一样的。
package com.linwei.lw.tablayoutdemo.ui.fragment;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
/**
* Created by LW on 2017/4/21.
*/
public class TopLineFragment extends BaseFragment {
@Override
protected void loadData() {
Toast.makeText(mContent,"Fragment头条加载数据",Toast.LENGTH_SHORT).show();
}
@Override
protected View initView() {
TextView mView = new TextView(mContent);
mView.setText("Fragment头条");
mView.setGravity(Gravity.CENTER);
mView.setTextSize(18);
mView.setTextColor(Color.BLACK);
return mView;
}
}
5)arrays.xml中第一显示数据。我了方便使用,通过字符串数组定义起来。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="tab_short_Title">
<item>头条</item>
<item>要闻</item>
<item>娱乐</item>
<item>体育</item>
</string-array>
<string-array name="tab_long_Title">
<item>头条</item>
<item>要闻</item>
<item>娱乐</item>
<item>体育</item>
<item>财经</item>
<item>科技</item>
<item>时尚</item>
<item>视频</item>
<item>直播</item>
</string-array>
</resources>
6)ShortTabActivity类,实现TabLayout和ViewPager的业务逻辑。
package com.linwei.lw.tablayoutdemo.ui.activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.linwei.lw.tablayoutdemo.R;
import com.linwei.lw.tablayoutdemo.Utils.CommentUtils;
import com.linwei.lw.tablayoutdemo.ui.fragment.BaseFragment;
import com.linwei.lw.tablayoutdemo.ui.fragment.FragmentFactory;
public class ShortTabActivity extends AppCompatActivity {
private TabLayout mTab;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_short_tab);
initView();
initData();
}
private void initData() {
ShortPagerAdapter adapter = new ShortPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(adapter);
mTab.setupWithViewPager(mViewPager);
}
private void initView() {
mTab = (TabLayout) findViewById(R.id.tab);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
}
private class ShortPagerAdapter extends FragmentPagerAdapter {
public String[] mTilte;
public ShortPagerAdapter(FragmentManager fm) {
super(fm);
mTilte = getResources().getStringArray(R.array.tab_short_Title);
}
@Override
public CharSequence getPageTitle(int position) {
return mTilte[position];
}
@Override
public BaseFragment getItem(int position) {
BaseFragment fragment = FragmentFactory.createFragment(position);
return fragment;
}
@Override
public int getCount() {
return CommentUtils.TAB_SHORT_COUNT;
}
}
}
TabLayout其他模式,我就不一一介绍,这里有Demo和CSDN详细文章。
原文出处:http://blog.csdn.net/persistence_lw/article/details/70473255
最后,附上源码地址:https://github.com/setasmallgoal/TabLayoutDemo
(原文来自本人,谢谢阅读)