你的位置:首页 > 操作系统

[操作系统]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.gradledependencies {  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.

colors.<??><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.

dimens.<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.

styles.<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.

styles.<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.

AndroidManifest.<??><manifest ="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.javapackage 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.<RelativeLayout   ="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.<android.support.design.widget.CoordinatorLayout ="http://schemas.android.com/apk/res/android"  ="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.javapackage 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);    }  }}

 

最终效果图:

最近不在状态。。。。