AppBar作为Android5.0的重要动画效果, 非常绚丽的UI, 通过内容驱动, 可以减少页面的访问, 更加便捷的传递主题思想. 那么我们看看如何使用.
本文源码的GitHub下载地址
欢迎Follow我的GitHub: https://github.com/SpikeKing
配置
创建一个Navigation Drawer的工程, 修改主题颜色.
|
1 2 3 4 5 |
<resources> <color name="colorPrimary">#FF1493</color> <color name="colorPrimaryDark">#FF1493</color> <color name="colorAccent">#FF4081</color> </resources> |
修改抽屉的渐变颜色side_nav_bar.xml
|
1 2 3 4 5 6 7 8 9 |
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:startColor="#FF34" android:centerColor="#FF3E96" android:endColor="#FF1493" android:type="linear" android:angle="135"/> </shape> |
ViewPager
修改app_bar_main.xml, 在CoordinatorLayout中添加ViewPager.
|
1 2 3 4 5 |
<android.support.v4.view.ViewPager android:id="@+id/main_vp_container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> |
设置ViewPager的Fragment内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** * 简单的Fragment * <p/> * Created by wangchenlong on 15/11/9. */ public class SimpleFragment extends Fragment { private static final String ARG_SELECTION_NUM = "arg_selection_num"; @Bind(R.id.main_tv_text) TextView mTvText; public SimpleFragment() { } public static SimpleFragment newInstance(int selectionNum) { SimpleFragment simpleFragment = new SimpleFragment(); Bundle args = new Bundle(); args.putInt(ARG_SELECTION_NUM, selectionNum); simpleFragment.setArguments(args); return simpleFragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main, container, false); ButterKnife.bind(this, view); return view; } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); mTvText.setText("Page " + String.valueOf(getArguments().getInt(ARG_SELECTION_NUM))); } @Override public void onDestroyView() { super.onDestroyView(); ButterKnife.unbind(this); } } |
设置ViewPager的适配器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** * ViewPager的适配器 * <p/> * Created by wangchenlong on 15/11/9. */ public class SimpleAdapter extends FragmentPagerAdapter { private static final String[] TITLE = {"SELECTION 1", "SELECTION 2", "SELECTION 3"}; public SimpleAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return SimpleFragment.newInstance(position + 1); } @Override public int getCount() { return TITLE.length; } @Override public CharSequence getPageTitle(int position) { if (position >= 0 && position < TITLE.length) { return TITLE[position]; } return null; } } |
在MainActivity中添加ViewPager逻辑
|
1 |
mVpContainer.setAdapter(new SimpleAdapter(getSupportFragmentManager())); |
AppBarLayout
修改AppBarLayout, 添加CollapsingToolbarLayout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="400dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="16dp" app:expandedTitleMarginEnd="16dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/toolbar_iv_image" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:contentDescription="@null" android:fitsSystemWindo |
