Android自学历程—Material Design的Tabs

好几天没写博客了，今天给大家带来一篇不错的译文。我照着练习了段时间，还有买了新书《android开发艺术探索》，如果好的话给大家分享分享。

用Android Material Design的方式处理Tabs

Android Design Support Library这个类可以使我们更加向后兼容Androoid 2.1，去使用material design的组建。在Design support Library中，一些组建如：navigation drawer, floating action button, snackbar, tabs, floating labels and animation frameworks 都已经有介绍。这这节章节中，我们将学习使用material design的Tabs。

在深入之前，我们建议你去看看这篇 tabs 的文档，她会告诉你什么时候该实现Tabs。

1.所需的准备

我们将会创建一个新的项目来应用material theme。如果你还没有明白什么是material design，Android Getting Started with Material Design 这篇文章是不错的开始。

  1. 打开build.gradle ，添加如下第三方库com.android.support:design:23.0.1
build.gradle
dependencies {
    compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
    compile ‘com.android.support:appcompat-v7:23.0.1‘
    compile ‘com.android.support:design:23.0.1‘
}

　　

　　2. 打开 colors.xml，并添加如下

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#125688</color>
    <color name="colorPrimaryDark">#125688</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#c8e8ff</color>
</resources>

　　3.添加如下至 dimens.xml

dimens.xml
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="tab_max_width">264dp</dimen>
    <dimen name="tab_padding_bottom">16dp</dimen>
    <dimen name="tab_label">14sp</dimen>
    <dimen name="custom_tab_layout_height">72dp</dimen>
</resources>

　　4. 打开 添加如下 styles.xml

styles.xml
<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

　　5. 创建values-v21. 在其中创建另一个 styles.xml ，这个 styles 特定于 Android 5.0

styles.xml
<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

</resources>

　　6。修改AndroidManifest.xml，改变android:theme属性的值

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialtabs" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

运行程序：

当然至此还没有结束。

　　7.创建Fragment的activity

OneFragment.java
package info.androidhive.materialtabs.fragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import info.androidhive.materialtabs.R;

public class OneFragment extends Fragment{

    public OneFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

}

　　8.创建fragment对应的布局

fragment_one.xml
<RelativeLayout 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="info.androidhive.materialtabs.fragments.OneFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/one"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

</RelativeLayout>

　　9.如此多次创建fragment，以供测试

2. Fixed Tabs

固定的Tabs应该用在那些有限制的Tabs上。那些Tabs固定在对应的位置上。在android design support library中没有好多新的元素例如：CoordinatorLayout, AppBarLayout, TabLayout 并且有许多已经介绍过了。在这节课中我将不会再提。

　　10.打开activity_main并添加如下代码：

　　　　app:tabMode　　定义了Tablayout的布局模式，在这个栗子中我们使用的是“fixed”

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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

　　11.打开MainActivity.java 并打开如下代码

tabLayout.setupWithViewPager() 　　分配Viewpage到Tablayout中

setupViewPager()　　Defines the number of tabs by setting appropriate fragment and tab name.

ViewPagerAdapter　　Custom adapter class provides fragments required for the view pager.

MainActivity.java
package info.androidhive.materialtabs.activity;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
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 android.support.v7.widget.Toolbar;

import java.util.ArrayList;
import java.util.List;

import info.androidhive.materialtabs.R;
import info.androidhive.materialtabs.fragments.OneFragment;
import info.androidhive.materialtabs.fragments.ThreeFragment;
import info.androidhive.materialtabs.fragments.TwoFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        adapter.addFragment(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

最终效果图：

最近不在状态。。。。

时间： 2024-08-24 21:09:11

Android自学历程—Material Design的Tabs的相关文章

Android自学历程—回调函数的意思（源码＋例子）

为什么会学习回调函数,那还要从线程说起.虽然以前写过一篇文章叫做“Android自学历程—多线程”,现在看看还是太年轻了. 在学习线程的时候,我试着看了看Handler的源码,于是对其中的Callback接口产生了兴趣.于是补自身不足,拿来学习学习.废话到此为止,整理思路,一起来学习. 下面这是一段Handler的源码 /** * Callback(回收) interface(界面) you can use when instantiating(例示) a Handler to avoid *

【Android】进入Material Design时代

由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Design 官方Material Design详细介绍文档:http://www.google.com/design/spec/material-design/introduction.html Material Design是Android 5.0系统的重头戏,并在以后App中将成为一种设计标准,而且随

android 5.0 Material Design酷炫风格的开源项目集合

一.前言 Android 5.0上线有一个段时间了,估计小伙伴们都看到了Android5.0界面上相比前面几个版本有了很大的突破,给人一种非常酷炫,平滑的跳转,生动的界面切换,全新的感觉,Android用户终于可以感叹,Google升级了这么多个版本终于像样的搞了一回界面.开发者们看到这些优美的动画也要大户过瘾啊.github上面的高人们都已经饥渴难耐了出了写出了各种好用,炫丽的特效,我们今天就来看一下都有哪些可以用比较爽的开源项目. Material Menu 项目地址:https://git

[转]Android 5.0——Material Design详解（动画篇）

Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Android L中新增了如下几种动画: * middot;Touch feedback(触摸反馈) * middot;Reveal effect(揭露效果) * middot;Activity transitions(Activity转换效果) * middot;Curved motion(曲线运动) *

Android自学历程—RecyclerView的使用

在网上看见有关RecyclerView的介绍,说是ListView的进阶版,官方推荐,便找来资料,耍耍. 首先挂上官方的教程,官方是最具权威和最让人信服的第一手资料. https://developer.android.com/training/material/lists-cards.html To create complex lists and cards with material design styles in your apps, you can use the RecyclerV

Android自学历程—Toolbar(manterial design)

近来又学了学Toolbar,发现国外的文字文档比国内的还少,不知道是我搜索方式有误还是咋的,国外的视屏教学又听不懂,哎,看来以后还是要硬着头皮听,看下去. 国内的文档好的挺多的,这里我推荐一个国外,一个香港的. 一篇台湾博主的:www.blog.mosil.biz/2014/10/android-toolbar/,我看他的遇到不少问题,也解决了不少 一篇国外的基本的教程:www.javatechig.com/android/android-lollipop-toorbar-example,这个可

Android自学历程—Builder()模式

前一篇文章,在学习OKHttp的时候遇到Builder pattern,当然那时候还不知道这是Builder模式,只是觉得奇怪怎么后面跟了好多个点,后来通过了解才明白这是Android 中的建造者模式.稍微学习过android的,一定用过AlertDialog.buider,说来惭愧!当时没写博客,也就局限于会用的阶层.通过这篇,希望能更加的了解. Builder Design pattern in Java 建造者设计模式在Java中是一种创造类型的模式.例如,用来创建对象,类似如Factor

Android学习笔记---Material Design设计理念

具体自己百度,我直接贴用法咯, styles.xml <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary&quo

Android自学历程—围住神经猫开发

学习核心内容: 1. 学会SurfaceView的绘图技巧. 2. 掌握神经猫的游戏逻辑设计. 第一阶段主要完成内容: 并且创建游戏所需的类,搭建基本的代码结构. 创建一个二维数组,用于保存游戏场景,并且将场景初始化. SurfaceView中根据场景数据,在界面中绘制点阵. 先上代码 1 package com.ryan.catchcrazycat; 2 3 /** 4 * Created by air on 15-8-1. 5 */ 6 public class Dot { 7 8 /* 9