文档章节

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

coderminer
 coderminer
发布于 2016/11/14 20:00
字数 591
阅读 72
收藏 2
点赞 0
评论 0

打造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
博文 14
码字总数 7925
作品 0
海淀
Android Material风格的应用(五)--CollapsingToolbar

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

coderminer ⋅ 2016/11/14 ⋅ 0

Android Material风格的应用(四)--FloatActionButton

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

coderminer ⋅ 2016/11/14 ⋅ 0

Android Material风格的应用(三)--DrawerLayout

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

coderminer ⋅ 2016/11/14 ⋅ 0

Android Material风格的应用(二)--RecyclerView

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

coderminer ⋅ 2016/11/14 ⋅ 0

Material Design 控件

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

CrazyManDF ⋅ 2016/03/23 ⋅ 0

是时候开始用C#快速开发移动应用了

从2015年接触Xamarin到至今已经2个年头,我对Xamarin的技能没有长进多少,但它却已经足够成熟到在跨平台移动开发工具中占有一席之地。在扫了一些资料之后,突然发现国外有很多移动端的应用已...

⋅ 2017/09/24 ⋅ 0

Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色

Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色 Android原生的Tablayout下面有一个指示器(指示线、下划线),如图所示: 详情见附录1。 但是Android原生的Tablayo...

zhangphil ⋅ 04/27 ⋅ 0

彻底理解 Android 中的阴影

如果我们想创造更好的 Android App,我相信我们需要遵循 Material Design 的设计规范。一般而言,Material Design 是一个包含光线,材质和投影的三维环境。如果我们想要在 App 的开发过程中,...

丁佳辉 ⋅ 04/18 ⋅ 0

CoordinatorLayout布局的使用方式

作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧? 本文源码...

朱园 ⋅ 2016/12/01 ⋅ 0

Android深度定制化TabLayout:圆角,渐变色,背景边框,基于Android原生TabLayout

Android深度定制化TabLayout:圆角,渐变色,背景边框,基于Android原生TabLayout 如今UI设计已经不再满足于下方只有一个下划线,切换后能改变和表示选中颜色的TabLayout了。设计对于TabLayo...

zhangphil ⋅ 05/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Cube、Cuboid 和 Cube Segment

1.Cube (或Data Cube),即数据立方体,是一种常用于数据分析与索引的技术;它可以对原始数据建立多维度索引。通过 Cube 对数据进行分析,可以大大加快数据的查询效率 2.Cuboid 在 Kylin 中特...

无精疯 ⋅ 31分钟前 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 33分钟前 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 43分钟前 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 46分钟前 ⋅ 0

我的第一篇个人博客

虽然这是个技术博客,但是,我总是想写一些自己的东西,所有就大胆的在这里写下了第一篇非技术博客。技术博客也很久没有更新,个人原因。 以后自己打算在这里写一些非技术博客,可能个人观点...

Mrs_CoCo ⋅ 47分钟前 ⋅ 0

Redis 注册为 Windows 服务

Redis 注册为 Windows 服务 redis 注册为 windows 服务相关命令 注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 启动服务 re......

Os_yxguang ⋅ 47分钟前 ⋅ 0

世界那么大,语言那么多,为什么选择Micropython,它的优势在哪?

最近国内MicroPython风靡程序界,是什么原因导致它这么火呢?是因为他功能强大,遵循Mit协议开源么? 错!因为使用它真的是太舒服了!!! Micropython的由来,这得益于Damien George这位伟大...

bodasisiter ⋅ 51分钟前 ⋅ 0

docker 清理总结

杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器(docker rm没有加-f参数,运行中的容器不会删掉) docker rm $(docker ps -a -q) 删除所有未打 dangling 标...

vvx1024 ⋅ 今天 ⋅ 0

关于学习

以前学车的时候,教练说了这样的一句话:如果一个人坐在车上一直学,一直学,反而不如大家轮流着学。因为一个人一直学,就没有给自己留空间来反思和改进。而轮流着学的时候大家下来之后思考上...

mskk ⋅ 今天 ⋅ 0

压缩工具之gzip-bzip2-xz

win下常见压缩工具:rar zip 7z linux下常见压缩工具:zip gz bz2 xz tar.gz tar.bz2 tar.xz gzip 不支持目录压缩 gzip 1.txt #压缩。执行后1.txt消失,生成1.txt.gz压缩文件 gzip -d 1.txt....

ZHENG-JY ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部