Android Material風格的應用(一)--AppBar TabLayout
Android Material風格的應用(二)--RecyclerView
Android Material風格的應用(三)--DrawerLayout
Android Material風格的應用(四)--FloatActionButton
Android Material風格的應用(五)--CollapsingToolbarjava
開發環境:android
主題顏色值 res/values/colors.xml
git
<resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>
如此,添加一個Light主題風格的style res/values/styles.xml
github
<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
運行效果圖app
res/layout/activity_main.xml
和MainActivity.java
中添加toolbar,這裏使用CoordinatorLayout
做爲一個容器 裏面會包含TabLayout FloatingActionButton Toolbar
等,引入design的支持庫compile 'com.android.support:design:24.2.1'
activity_main.xml
ide
<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)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"));
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.java
和 CardContentFragment.java
動畫
添加item_list.xml
item_tile.xml
item_card.xml
.net
<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
code
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); } }