打造Material风格的Android应用
Android Material风格的应用(一)–AppBar TabLayout
Android Material风格的应用(二)–RecyclerView
Android Material风格的应用(三)–DrawerLayout
Android Material风格的应用(四)–FloatActionButton
Android Material风格的应用(五)–CollapsingToolbar
开发环境:
- JDK 8+
- Android Studio 2.2.2
工程源码
Themes And Colors
主题颜色值 res/values/colors.xml
|
|
如此,添加一个Light主题风格的style res/values/styles.xml
|
|
使用 parent="Theme.AppCompat.Light.NoActionBar"
是在应用中去除ActionBar
运行效果图
布局和动画
添加 Toolbar
在res/layout/activity_main.xml
和MainActivity.java
中添加toolbar,这里使用CoordinatorLayout
作为一个容器
里面会包含TabLayout FloatingActionButton Toolbar
等,引入design的支持库1compile 'com.android.support:design:24.2.1'activity_main.xml
12345678910111213141516171819202122232425262728<android.support.design.widget.CoordinatorLayoutxmlns: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.AppBarLayoutandroid: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.Toolbarandroid: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.TabLayoutandroid: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
12Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);setSupportActionBar(toolbar);添加TabLayout
1234TabLayout 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
123456<android.support.v4.view.ViewPagerandroid: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
12345678<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="List"/></LinearLayout>分别创建不同的Fragment文件和布局对应
ListContentFragment.java
12345678public class ListContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View v = inflater.inflate(R.layout.item_list,null);return v;}}TileContentFragment.java
1234567public class TileContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return inflater.inflate(R.layout.item_tile,null);}}CardContentFragment.java
1234567public class CardContentFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return inflater.inflate(R.layout.item_card,null);}}在
MainActivity.java
中添加ViewPager
1234567891011121314151617181920212223242526272829303132333435363738ViewPager 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);}@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}@Overridepublic int getCount() {return fragmentList.size();}public void addFragment(Fragment fragment,String title){fragmentList.add(fragment);fragmentTitle.add(title);}@Overridepublic CharSequence getPageTitle(int position) {return fragmentTitle.get(position);}}