文档章节

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

coderminer
 coderminer
发布于 2016/11/14 20:00
字数 591
阅读 81
收藏 2

打造Material风格的Android应用

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

开发环境:

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运行效果图

布局和动画

TabLayout

  • 添加 Toolbar 在res/layout/activity_main.xmlMainActivity.java中添加toolbar,这里使用CoordinatorLayout作为一个容器 里面会包含TabLayout FloatingActionButton Toolbar等,引入design的支持库
compile 'com.android.support:design:24.2.1'

activity_main.xml

<android.support.design.widget.CoordinatorLayout
  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: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>

      <android.support.design.widget.TabLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:id="@+id/tabs">
       </android.support.design.widget.TabLayout>
      </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.ViewPager
  android: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.javaCardContentFragment.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
  @Override
  public 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
  @Override
  public 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
  @Override
  public 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);
    }
}

© 著作权归作者所有

共有 人打赏支持
coderminer
粉丝 1
博文 35
码字总数 8561
作品 0
海淀
Android Material风格的应用(五)--CollapsingToolbar

Collapsing Toolbar Android Material风格的应用(一)--AppBar TabLayout Android Material风格的应用(二)--RecyclerView Android Material风格的应用(三)--DrawerLayout Android Material风格......

coderminer
2016/11/14
34
0
Android Material风格的应用(四)--FloatActionButton

添加 FloatActionButton和SnackBar Android Material风格的应用(一)--AppBar TabLayout Android Material风格的应用(二)--RecyclerView Android Material风格的应用(三)--DrawerLayout Andro......

coderminer
2016/11/14
60
0
Android Material风格的应用(三)--DrawerLayout

添加抽屉导航 Android Material风格的应用(一)--AppBar TabLayout Android Material风格的应用(二)--RecyclerView Android Material风格的应用(三)--DrawerLayout Android Material风格的应用......

coderminer
2016/11/14
84
0
Android Material风格的应用(二)--RecyclerView

添加RecyclerView Android Material风格的应用(一)--AppBar TabLayout Android Material风格的应用(二)--RecyclerView Android Material风格的应用(三)--DrawerLayout Android Material风格的......

coderminer
2016/11/14
72
0
Material Design 控件

Material Design 新控件 SwipeRefreshLayout 只能包含一个子View,setOnRefreshListener设置下拉刷新监听 问题:以下布局会出现下拉和列表滑动冲突问题 width="matchparent"android:layouth...

CrazyManDF
2016/03/23
238
0

没有更多内容

加载失败,请刷新页面

加载更多

python:关于读取文件的指定行的问题

先来造一个文件:就叫做 test.txt吧,内容是下面这个样子: 表头1,数据12,数据23,数据34,数据45,数据56,数据67,数据7 那么我们并不打算把这个表头给读出来 怎么办呢? 先来打开文...

Oh_really
23分钟前
1
0
Rails 用现代 Rails 逃离单页面应用 “兔子洞”

在工作共总是觉得turbolinks非常爽,但是却总是被说成是过时的技术,大家都喜欢spa,哪怕不用的spa的人也是禁用掉的多,找不到很好的理由劝说别人使用,这篇文章说的很到位,或者说至少是牛人...

wmzsonic
28分钟前
0
0
Hive 分布式搭建,Spark集成Hive记录

本帖详细介绍搭建步骤,仅仅记录自己搭建过程以及采坑经历。 前提环境: Hadoop集群 版本2.7.2 Spark集群 版本2.1.0 Linux版本 Centos7 准备搭建 MySql版本5.5.61 ,Hive-2.1.0 去官网下载M...

我爱春天的毛毛雨
30分钟前
2
0
打包QML程序

1、windeployqt执行路径(D:\Qt\5.12.0\msvc2017_64\bin)加入到PATH中 2、使用Qt自带的命令行交互 Command 终端(Qt 5.12.0 64-bit for Desktop (MSVC 2017))切换到 Release 编译成功的exe...

渣渣曦
今天
4
0
优秀互联网高级测试工程师应该具备的能力

概述 在之前写的互联网高级测试工程师至少具备的能力一文中,提到了测试工程师至少具备的能力,但是并没有提到优秀测试工程师应该具备的能力,下文简单的谈一谈。当然这些全部都是我的个人理...

Sam哥哥聊技术
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部