Android Material风格的应用(一)--AppBar TabLayout

打造Material风格的Android应用

Android Material风格的应用(一)–AppBar TabLayout
Android Material风格的应用(二)–RecyclerView
Android Material风格的应用(三)–DrawerLayout
Android Material风格的应用(四)–FloatActionButton
Android Material风格的应用(五)–CollapsingToolbar

开发环境：
* JDK 8+
* Android Studio 2.2.2
工程源码

Themes And Colors

主题颜色值 res/values/colors.xml


<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>


如此，添加一个Light主题风格的style res/values/styles.xml


<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

使用 parent="Theme.AppCompat.Light.NoActionBar" 是在应用中去除ActionBar运行效果图

布局和动画

• 添加 Toolbar
  在res/layout/activity_main.xml和MainActivity.java中添加toolbar，这里使用CoordinatorLayout作为一个容器
  里面会包含TabLayout FloatingActionButton Toolbar等，引入design的支持库

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

  activity_main.xml

  <android.support.design.widget.CoordinatorLayoutxmlns: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:id="@+id/main_content"><android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:id="@+id/app_bar_layout"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    <android.support.v7.widget.Toolbar        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:id="@+id/toolbar"        app:layout_scrollFlags="enterAlways|scroll"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>    <TableLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/tabs">    </TableLayout></android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

  MainActivity.java

  Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);setSupportActionBar(toolbar);

• 添加TabLayout

  TabLayout tabLayout = (TabLayout)findViewById(R.id.tabs);tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

• 添加 Fragment 和 ViewPager
  在 activity_main.xml中添加ViewPager

  <android.support.v4.view.ViewPagerandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/viewpager"app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>

  通过添加ViewPager和TabLayout联动，创建3个Fragment的类
  ListContentFragment.java TileContentFragment.java 和 CardContentFragment.java

  添加item_list.xml item_tile.xml item_card.xml

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="List"/></LinearLayout>

  分别创建不同的Fragment文件和布局对应 ListContentFragment.java

  public class ListContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    View v = inflater.inflate(R.layout.item_list,null);    return v;}}

  TileContentFragment.java

  public class TileContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    return inflater.inflate(R.layout.item_tile,null);}}

  CardContentFragment.java

  public class CardContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    return inflater.inflate(R.layout.item_card,null);}}

  在MainActivity.java中添加ViewPager

  ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);setupViewPager(viewPager);private void setupViewPager(ViewPager viewPager){    Adapter adapter = new Adapter(getSupportFragmentManager());    adapter.addFragment(new ListContentFragment(),"List");    adapter.addFragment(new TileContentFragment(),"Tile");    adapter.addFragment(new CardContentFragment(),"Card");    viewPager.setAdapter(adapter);}static class Adapter extends FragmentPagerAdapter{  private final List<Fragment> fragmentList = new ArrayList<>();  private final List<String> fragmentTitle = new ArrayList<>();  public Adapter(FragmentManager fm) {      super(fm);  }  @Override  public Fragment getItem(int position) {      return fragmentList.get(position);  }  @Override  public int getCount() {      return fragmentList.size();  }  public void addFragment(Fragment fragment,String title){      fragmentList.add(fragment);      fragmentTitle.add(title);  }  @Override  public CharSequence getPageTitle(int position) {      return fragmentTitle.get(position);  }}